If I use async in my script tag in index.html do I need to bother with writing async code in scripts.js? I am asking for javascript

user_14605651 0
Viewed 1560

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?

script promise async-await javascript
1 Answers

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

  • The function will always return a Promise
  • If you return a value from inside the function, the returned Promise will resolve to that value
  • You can use await inside the async function to resolve other Promises in a clean, syntactically flat way, without .then

They'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.

user_95152070
Related