I am new to JavaScript. I have learned that I can make my scripts async by putting the word async in front in the html script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script async src="scripts.js"></script>
</body>
</html>
But I saw in another video that I need to use callbacks/ Promises/ Async-await to make my code async.
const friendlyFunction = async ()=> {
return `Hello`
}
console.log(friendlyFunction)
Is there any difference?
These are two entirely independent concepts.
The async attribute on a script tag means that the script will not be render-blocking - the browser will not wait for the script payload to finish downloading and to finish executing the script before continuing on to render later parts of the HTML. This would be helpful if you had other stuff below the script tag, eg
<script async src="scripts.js"></script>
<div>more HTML content here</div>
(If you don't have any more content below the script tag, the attribute doesn't really do anything useful)
In contrast, using the async keyword in front of JavaScript functions will mean
await inside the async function to resolve other Promises in a clean, syntactically flat way, without .thenThey're quite different uses of the same word, async. You may want to use the async attribute, or you may want to use async functions in some situations, or both, or neither.