How would Jake Peralta explain Hoisting in JavaScript to Captain Holt

Understanding Hoisting and Execution Context in JavaScript with one of the funniest sitcom duo

Interviewers tend to test newbie developer to check their understanding about core concepts in the language by tweaking basic questions. In order to get ahead in JavaScript or any other language, every developer should have his/her basics very clear.

Let’s discuss one of the basic concepts of JavaScript today via an Interview between Sr. developer Raymond Holt and newbie coder Jake Peralta seeking an internship at Holt’s startup — ? Of course you guessed it right , B99 !

Raymond Holt : Greetings Peralta, I see your resume is up to the mark . I have all the information needed. I see you have mentioned expertise in JavaScript. Let me ask you a quick question to test your knowledge. What would be the output of this code, Peralta ?

Jake : Noice ! It would be “Hello world” and then “undefined”

Raymond Holt : Could you explain it in detail how this happens behind the scenes ?

Jake : Okay Cool ,cool , cool , cool , cool , cool

Raymond Holt : Are you nervous , Peralta ?

Jake : No , captain, I am a story teller . It’s my craft ! Here I come up with the best explanation.

Behind the scenes , there is this container called — “The execution context”. It consists of two components —

• Memory component
• Code component

Raymond Holt : Give me the technical terms for these components Peralta !

Jake : Ya captain!

Raymond Hold : It’s Yes Peralta . Do not use “Ya” . Continue !

Jake : Yes captain !The memory component is nothing but the variable environment, and the code component is nothing but the thread of execution.

As JavaScript is a synchronous single-threaded language , it executes each code line by line in the code component.

All the variables and functions are reserved space in the memory even before the code is executed.

In the case of variables , they are stored in the memory as a value undefined. “undefined” acts as a placeholder here. Whereas in the case of functions ,the entire copy of the function is stored in the memory.

In the second example, the memory has

already present in the memory .

So in the thread of execution i.e. the code component,

• The first line of code gets executed successfully as the function is already present in the memory
• The second line gets executed but as the memory has the value of x stored as undefined, it prints “undefined” in the console

Also , if I use an arrow function like ,

It will print throw an error stating “Uncaught reference” as the function here is stored as a variable which is undefined.

Raymond Holt : Correct

Jake : Yeah ! I have said multiple correct things consecutively ! Noiceeee

Raymond Holt: Please refrain from using those words Peralta. One last question and we can end the discussion. What is undefined ? Is it same as not defined ?

Jake : Smort question ! No , they are not the same at all ! Undefined acts as a placeholder for a variable that has been declared in the code somewhere. Not defined indicates that there is no mention of the variable in the code anywhere.

Example ,

Here the code throws an error “Uncaught ReferenceError: x is not defined “

Raymond Holt : Clear ! Nice explanation Peralta !

Jake : Thanks dad ! Umm Thanks captain !

Raymond Holt : I will be assigning you a project with Santiago , I hope you don’t mind!

Jake : Noiceee !

Not a doctor ssh , Fremulon

More about hoisting —

• Resource : Hoisting — MDN Web Docs Glossary: Definitions of Web-related terms | MDN (mozilla.org)

Connect with me on LinkedIn : Divya Rao | LinkedIn

Follow me on Twitter : Divya Rao (@dailydevDivya) / Twitter