{"id":56521,"date":"2023-01-24T21:15:57","date_gmt":"2023-01-24T15:45:57","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56521"},"modified":"2024-01-02T17:41:49","modified_gmt":"2024-01-02T12:11:49","slug":"top-level-await-without-async-function-in-nodejs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/top-level-await-without-async-function-in-nodejs\/","title":{"rendered":"Top level await() without async() function in NodeJs"},"content":{"rendered":"

\"Blog<\/p>\n

Here\u2019s how async-await function typically works:<\/p>\n

function<\/span> myDummyBackendCall<\/span>() {\r\nreturn<\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> {\r\nsetTimeout<\/span>(() =><\/span> {\r\nresolve<\/span>({\r\nname<\/span>: \"Shivang\"<\/span>,\r\nid<\/span>: \"asmdhajkdhajdsh8qweuqoweuiqepoi-0q-0eueiuaisjdaKcjaisku\"<\/span>,\r\n});\r\n});\r\n});\r\n}\r\n\r\n\/\/ Used an async wrapper function to make an await call<\/span>\r\n(async<\/span> () => {<\/mark>\r\nlet<\/span> data = await<\/span> myDummyBackendCall<\/span>();\r\nconsole<\/span>.log<\/span>(data);\r\n})();<\/pre>\n
If you are a JS developer, you would know that without\u00a0async<\/code>\u00a0function,\u00a0await<\/code>\u00a0call will run into an error. And rightly so. The error will look something like this:<\/p>\n
\"Blog<\/p>\n
Let\u2019s now talk about a different scenario<\/h3>\n
Here\u2019s another example of my index.js file inside my NodeJs project wherein I haven\u2019t enclosed my\u00a0await<\/code>\u00a0call inside an\u00a0async<\/code>function (Node version that I am using is 19.3.0):<\/p>\n
function<\/span> myDummyBackendCall<\/span>() {\r\nreturn<\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> {\r\nsetTimeout<\/span>(() =><\/span> {\r\nresolve<\/span>({\r\nname<\/span>: \"Shivang\"<\/span>,\r\nid<\/span>: \"asmdhajkdhajdsh8qweuqoweuiqepoi-0q-0eueiuaisjdaKcjaisku\"<\/span>,\r\n});\r\n});\r\n});\r\n}\r\n\r\n\/\/Note that there is no async wrapper function<\/span>\r\n\r\nlet<\/span> data = await<\/span> myDummyBackendCall<\/span>();\r\nconsole<\/span>.log<\/span>(data);<\/pre>\n
\/\/ Output of node index.js\r\n{\r\nname: 'Shivang'<\/span>,\r\nid<\/span>: 'asmdhajkdhajdsh8qweuqoweuiqepoi-0q-0eueiuaisjdaKcjaisku'<\/span>\r\n}<\/pre>\n
You must be wondering how this is done and trust me, it\u2019s fairly simple. All you have to do is to add a simple configuration, \u201ctype\u201d with \u201cmodule\u201d as its value in the package.json file. Here\u2019s an example:<\/p>\n
{\r\n\"name\"<\/span>: \"src\"<\/span>,\r\n\"version\"<\/span>: \"1.0.0\"<\/span>,\r\n\"description\"<\/span>: \"\"<\/span>,\r\n\"main\"<\/span>: \"index.js\"<\/span>,\r\n\"type\"<\/span>:\"module\"<\/span>, \/\/ I'm here!<\/span>\r\n\"scripts\"<\/span>: {\r\n\"test\"<\/span>: \"echo \\\\\"<\/span>Error<\/span>: no test specified\\\\\" && exit 1\"<\/span>\r\n},\r\n\"author\"<\/span>: \"\"<\/span>,\r\n\"license\"<\/span>: \"ISC\"<\/span>\r\n}<\/pre>\n
Behind the scenes<\/h3>\n
Within a\u00a0package.json<\/code>\u00a0,\u00a0\u201ctype\u201d<\/code>\u00a0value of\u00a0\u201cmodule\u201d<\/code>\u00a0tells NodeJs to interpret the files with\u00a0.js<\/code>\u00a0extension as using ES module syntax, e.g.:\u00a0import<\/code>\u00a0statement or\u00a0import()<\/code>\u00a0expressions.<\/p>\n
\u201ctype\u201d<\/code>\u00a0defines how NodeJs runtime should resolve specifiers or load modules.<\/strong><\/p>\n
There are two possible values for\u00a0\u201ctype\u201d<\/code>\u00a0config:<\/p>\n
    \n
  1. module<\/li>\n
  2. commonjs\u00a0(default)<\/em><\/strong><\/li>\n<\/ol>\n
    There are ways to mix things up without adding\u00a0type<\/code>\u00a0to the\u00a0package.json<\/code>\u00a0file. Since we know that\u00a0commonjs<\/code>\u00a0is the default value applied to your NodeJs project, every file with\u00a0.js<\/code>\u00a0extension will be treated as CommonJS. But if you still want to load a file(s) as an ES Module, simply give the file\u00a0.mjs<\/code>\u00a0extension.<\/p>\n
    Here\u2019s the sample code (without\u00a0type<\/code>\u00a0configuration):<\/p>\n
    {\r\n\"name\"<\/span>: \"src\"<\/span>,\r\n\"version\"<\/span>: \"1.0.0\"<\/span>,\r\n\"description\"<\/span>: \"\"<\/span>,\r\n\"main\"<\/span>: \"index.js\"<\/span>,\r\n\"scripts\"<\/span>: {\r\n\"test\"<\/span>: \"echo \\\\\"<\/span>Error<\/span>: no test specified\\\\\" && exit 1\"<\/span>\r\n},\r\n\"author\"<\/span>: \"\"<\/span>,\r\n\"license\"<\/span>: \"ISC\"<\/span>\r\n}<\/pre>\n
    Here\u2019s the screenshot of the\u00a0.mjs<\/code>\u00a0file:<\/p>\n
    \"Blog<\/p>\n
    Here\u2019s the code inside\u00a0index.mjs<\/code>\u00a0(exactly same code as above):<\/p>\n
    function<\/span> myDummyBackendCall<\/span>() {\r\nreturn<\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> {\r\nsetTimeout<\/span>(() =><\/span> {\r\nresolve<\/span>({\r\nname<\/span>: \"Shivang\"<\/span>,\r\nid<\/span>: \"asmdhajkdhajdsh8qweuqoweuiqepoi-0q-0eueiuaisjdaKcjaisku\"<\/span>,\r\n});\r\n});\r\n});\r\n}\r\n\r\nconsole<\/span>.log<\/span>(await<\/span> myDummyBackendCall<\/span>());<\/pre>\n
    Here\u2019s the result:<\/p>\n
    \"Blog<\/p>\n
    Here are some points straight from the\u00a0official NodeJs documentation<\/a><\/h3>\n
      \n
    1. Files ending with\u00a0.mjs<\/code>\u00a0are always loaded as ES modules regardless of the nearest parent\u00a0package.json<\/code>.<\/li>\n
    2. Files ending with\u00a0.cjs<\/code>\u00a0are always loaded as CommonJS regardless of the nearest parent\u00a0package.json<\/code>.<\/li>\n<\/ol>\n
      But before you get overly optimistic\u2026<\/h3>\n
      This only works when\u00a0await<\/code>\u00a0call is made at the top level of modules. Here\u2019s an illustration:<\/p>\n
      \"Blog<\/p>\n
      ECMAScript module loader is asynchronous<\/strong>. It means that top-level await enables the module to act like a BIG async function when NodeJs loads it as ES Module. Hence, the top-level await doesn\u2019t need an explicit async function wrapper. It also means that an await without async is a myth!<\/em><\/p><\/blockquote>\n
      Disclaimer<\/h3>\n
      This is purely a NodeJs feature. There is no concept of\u00a0.mjs<\/code>\u00a0and\u00a0.cjs<\/code>\u00a0in vanilla JavaScript.<\/p>\n
      ***<\/p>\n
      Note of thanks \u2764\ufe0f<\/h3>\n
      \"Blog<\/p>\n
      Thank you for stopping by. Hope, you find this article helpful. Please follow me<\/em><\/strong><\/a>\u00a0on medium and help me reach 1k followers ??. That will truly encourage me to put out more content.<\/p>\n
      P.S.: If you feel something can be improved or lacks proper explanation, drop me a note in the comment box or mail me at\u00a0shiva.chaturvedi91@gmail.com<\/a>. After all, you can teach me a thing or two as well.<\/em><\/p><\/blockquote>\n
      <\/div>","protected":false},"excerpt":{"rendered":"
      Here\u2019s how async-await function typically works: function myDummyBackendCall() { return new Promise((resolve) => { setTimeout(() => { resolve({ name: “Shivang”, id: “asmdhajkdhajdsh8qweuqoweuiqepoi-0q-0eueiuaisjdaKcjaisku”, }); }); }); } \/\/ Used an async wrapper function to make an await call (async () => { let data = await myDummyBackendCall(); console.log(data); })(); If you are a JS developer, you […]<\/p>\n","protected":false},"author":1535,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":495,"footnotes":""},"categories":[4684,1185],"tags":[5084,5093,1787,229,55,1177,1472],"class_list":["post-56521","post","type-post","status-publish","format-standard","hentry","category-mean-2","category-node-js-2","tag-backend","tag-computer-science","tag-development","tag-services","tag-javascript","tag-nodejs-2","tag-programming"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t