What is this problem in JavaScript’s selfexecuting anonymous function?

Javascript Web Development Object Oriented Programming

Let’s say here is a sample code snippet and we are required to tell the possible output for this snippet and provide an explanation for it<pre class="prettyprint notranslate">var name = 'Zakir'; (() => {    name = 'Rahul';    return;    console.log(name);    function name(){       let lastName = 'Singh';    } })(); console.log(name);</pre>Let’s go through this problem line by line with a naive approach1 → ‘Zakir’ stored in variable name3 → We enter inside a self-executing anonymous function4 → The variable name is reinitialized to ‘Rahul’5 → return statement is encountered, so we exit the function15 → print the name variable to screen whose current value is ‘Rahul’So, the final output will be<pre class="result notranslate">Rahul</pre>But, unfortunately, it’s wrong, let’s go through the code once again to see where we went wrong, this time keeping the concept of variable and function hoisting in mind.1 → ‘Zakir’ stored in variable name3 → We enter inside a self-executing anonymous functionAs we enter the function, function hoisting takes on and the function name() which is defined at the bottom of the self-executing function is hoisted to very top of the self-executing function And at that intermediate state the code would be something like −<h2>Example</h2><pre class="prettyprint notranslate">let name = 'Zakir'; (() => {    let name;    name = 'Rahul';    return;    console.log(name);    name = function(){       let lastName = 'Singh';    } })(); console.log(name);</pre>Note that whenever a variable/function is hoisted to the top of its scope it’s only defined and initialised, it is initialised at its actual position, at the top it is undefined, but it exists.So, when the variable name is reinitialised it’s the local variable name which gets reinitialized and not the global variable so, after this we return out of the self-executing function and print the global variable name to the console, which still holds ‘Zakir’. Therefore, the output will be −<h2>Output</h2><pre class="result notranslate">Zakir</pre>

AmitDiwan

Updated on 18-Aug-2020 07:27:22

Previous Page Print Page Next Page