![](\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/0uJsNKFahmenV5AhB.jpg\")
<\/p>\n<\/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>\nIf 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\/wp-ttn-blog\/uploads\/2024\/01\/1_mAoF4ks8F3legp5VcSM3A.png\")
<\/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>\nfunction<\/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>\nYou 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>\nBehind 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>\nThere are two possible values for\u00a0\u201ctype\u201d<\/code>\u00a0config:<\/p>\n\n- module<\/li>\n
- 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>\nHere\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>\nHere\u2019s the screenshot of the\u00a0.mjs<\/code>\u00a0file:<\/p>\n![](\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/1jfy63LIDdrtYTCnMXKhbjw.png\")
<\/p>\n
Here\u2019s the code inside\u00a0index.mjs<\/code>\u00a0(exactly same code as above):<\/p>\nfunction<\/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>\nHere\u2019s the result:<\/p>\n
![](\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/1y51bT_SiP3in8l3vvl-t9w.png\")
<\/p>\n
Here are some points straight from the\u00a0official NodeJs documentation<\/a><\/h3>\n\n- Files ending with\u00a0
.mjs<\/code>\u00a0are always loaded as ES modules regardless of the nearest parent\u00a0package.json<\/code>.<\/li>\n- Files ending with\u00a0
.cjs<\/code>\u00a0are always loaded as CommonJS regardless of the nearest parent\u00a0package.json<\/code>.<\/li>\n<\/ol>\nBut 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\/wp-ttn-blog\/uploads\/2024\/01\/1DV2USzEnMcGgr-6yHatTcQ.png\")
<\/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>\nDisclaimer<\/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\/wp-ttn-blog\/uploads\/2024\/01\/0XnuqCv7iw5_63Pgd.jpg\")
<\/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