{"resource":{"author":{"id":"h2so9H8jPMmgUKGghoNl","name":"Yomesh Gupta","username":"yomeshgupta"},"content":{"link":null,"difficulty":1,"domain":2,"type":1,"isInternal":true,"body":"JavaScript is one of the most popular languages. There are a lot of resources on the web teaching JavaScript and its concepts. Our aim with this series is to share a concise, useful, and quality list of questions with their answers. We don't want to add to the noise but rather be the source of clarity.\r\n\r\n### Explain Hoisting in javascript\r\n\r\nThe most common explanation of Hoisting on the web would be\r\n\r\n> Hoisting is the default behaviour of JavaScript where all the variables and functions declarations are moved to the top.\r\n\r\nIt is correct but there is more to it than what meets the eye.\r\n\r\n### Variable Declarations\r\n\r\nIn JavaScript, we can define variables using different keywords that have subtle differences among them [https://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations](https://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations).\r\n\r\nWe can declare variables in three ways --\r\n\r\n```js\r\nvar name = \"Yomesh\";\r\nlet surname = \"Gupta\";\r\nconst profession = \"Senior Frontend Engineer\";\r\n```\r\n\r\nJavaScript engine runs through our code in two phases — the `Creation Phase` and the `Execution Phase`. In the first (Creation) phase, the engine goes through the code and allocates memory for the variables.\r\n\r\nIn the same phase, the variables declared via `var` are assigned the value `undefined` and that is why in the below code snippet you will get the value of the variable `firstname` as `undefined`.\r\n\r\n```js\r\nconsole.log(firstname); // undefined\r\nvar firstname = \"Yomesh\";\r\n```\r\n\r\nThis is what we know as `Hoisting`.\r\n\r\nIn the case of the variables declared via `let` and `const`, they are also allocated memory but they are not assigned the value `undefined` initially i.e. variable declarations do hoist but they throw an error till initialized. Let us consider an example.\r\n\r\n```js\r\n/*\r\n  Since variables are hoisted\r\n  it would be equivalent to\r\n\r\n  let firstname;\r\n*/\r\n// ReferenceError as memory is allocated but undefined is not assigned initially\r\nconsole.log(firstname);\r\n\r\nfunction init() {\r\n...\r\n}\r\nfunction processing() {\r\n...\r\n}\r\n\r\nlet firstname = \"Yomesh\"; // initialization\r\nconsole.log(firstname); // Yomesh\r\n```\r\n\r\nIn the Execution phase, variables are assigned their actual values and it is perfectly fine to use them afterwards.\r\n\r\n```js\r\nconst name = \"Yomesh\";\r\nconsole.log(name); // Yomesh | Perfectly fine to use here\r\n```\r\n\r\n### Temporal Dead Zone\r\n\r\nLet us re-consider one of the previously discussed examples again.\r\n\r\n```js\r\n// Beginning of the temporal dead zone\r\nconsole.log(firstname); // ReferenceError\r\n\r\nfunction init() {\r\n...\r\n}\r\nfunction processing() {\r\n...\r\n}\r\n\r\nlet firstname = \"Yomesh\"; // Ending of the temporal dead zone\r\nconsole.log(firstname); // Yomesh\r\n```\r\n\r\nAs we have seen earlier, any variable declared via `let` or `const` cannot be accessed before their `initialization`. The region for the variable `firstname` which begins from the place where the variable is hoisted as in its scope is created till the place where the variable is initialized is known as `Temporal Dead Zone`. Temporal Dead Zone is a good way to indicate bugs in the code. Accessing variables before the declaration is often a root cause of many errors.\r\n\r\n### Hoisting in Functions\r\n\r\nHoisting in functions works the same way with the only notable exception that function declarations are hoisted but not function expressions. For example --\r\n\r\n```js\r\nsayHello(); // logs Hello\r\n\r\n// Function declaration\r\nfunction sayHello() {\r\n  console.log(\"Hello\");\r\n}\r\n```\r\n\r\nFunction declarations are hoisted to the top of the enclosing function or global scope. We can use the function before we declared it.\r\n\r\n```js\r\nsayHello(); // Uncaught TypeError: sayHello is not a function\r\n\r\n// Function expression\r\nvar sayHello = function () {\r\n  console.log(\"Hello\");\r\n};\r\n```\r\n\r\nFunction expressions are not hoisted, unlike function declarations. We can't use function expressions before we create them.\r\n\r\nI hope this was helpful to you in some way. Please do share with others so that they can learn too! :D\r\n","languages":[],"editorConfig":{}},"stats":{"views":19584,"used":0,"likes":0},"description":"","published":true,"isActive":true,"tags":["javascript","hoisting","interview","js fundamentals","frontend fundamentals","scoping","temporal dead zone","frontend interview questions","interview answers"],"slug":"hoisting-in-javascript-explained-or-javascript-interview-questions---rid---6oy63tirhGHUyvC3HYf1","isPremium":false,"categories":[],"requires":[],"_id":"61f104fcf144a82a5ee29fb2","title":"Hoisting in JavaScript Explained | JavaScript Interview Questions","resourceId":"6oy63tirhGHUyvC3HYf1","createdAt":1643185404922,"modifiedAt":1643966497881},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"62810474d3473370ac35a467","content":{"languages":["react"],"difficulty":2},"tags":["javascript","autocomplete","frontend","inline","suggestions","devtools tech","frontend fundamentals","interview question","blog","test"],"slug":"build-an-autocomplete-using-react-js-or-type-one-or-frontend-coding-challenge-or-javascript-interview-question---qid---wIsJwxPV1Ka0GdmTIXQX","title":"Build an Autocomplete using React.js | Type One | Frontend Coding Challenge | JavaScript Interview Question","questionId":"wIsJwxPV1Ka0GdmTIXQX"},{"_id":"6871628350393ab55076954e","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","problem solving","frontend","coding interview","ui","ux","uber frontend interview","devtools tech","tech tutorial","frontend coding challenge"],"slug":"company-structure-validator---qid---UhGdKfJaM4a7VuQsFRV3","title":"Company Structure Validator","questionId":"UhGdKfJaM4a7VuQsFRV3"},{"_id":"638f584c937c6f5491664d6a","content":{"languages":["react"],"difficulty":2},"tags":["javascript","custom hook","useasync","usepromise","react","advanced js","advanced react","frontend interview questions","javascript interview questions","react hooks","resuable logic","components","react components"],"slug":"how-to-create-useasync-hook-in-react-js-or-javascript-interview-question-or-frontend-problem-solving-or-custom-react-hooks---qid---BnA2gzIkXpyZTkukd4xa","title":"How to create useAsync hook in React.js? | JavaScript Interview Question | Frontend Problem Solving | Custom React Hooks","questionId":"BnA2gzIkXpyZTkukd4xa"},{"_id":"6016fc8d36ceba7a9c62d08a","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","classes","nodejs","frontend","interviews","closure","prototype"],"slug":"how-to-create-a-function-calculator-programming-interview-question---qid---EXKZ79sIBPn1T5EhP4qv","title":"How to create a function calculator? [Programming Interview Question]","questionId":"EXKZ79sIBPn1T5EhP4qv"},{"_id":"5ea55a1fdae82663ed99f7c4","content":{"difficulty":1,"languages":"javascript"},"tags":["javascript","react.js","frontend","setstate"],"title":"What would be the output? [React.js]","questionId":"45fMGII9cXEyIUZvkfQ8","slug":"what-would-be-the-output-reactjs---qid---45fMGII9cXEyIUZvkfQ8"}],"resources":[{"_id":"680a7a04ad3ccc49f04e55ba","content":{"difficulty":4,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","blog","ui","ux","devtools tech","frontend","coding","seo","improving seo","google","pagination","client-side","javascript coding","interview questions","frontend system design"],"slug":"how-a-small-pagination-fix-boosted-seo---rid---eIjvS9gwWKW18RV86knB","title":"How a Small Pagination Fix Boosted SEO?","resourceId":"eIjvS9gwWKW18RV86knB"},{"_id":"6a12f6954b3e6d922c54a4bb","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","devtools tech","prioritising critical images","web performance"],"slug":"prioritising-critical-images---rid---BlV5X4YylAW61dYwFmyG","title":"Prioritising Critical Images","resourceId":"BlV5X4YylAW61dYwFmyG"},{"_id":"636b69d7c958c137b34c4eaf","content":{"difficulty":1,"domain":2,"type":1,"isInternal":true},"tags":["javascript","frontend code","faded background","html","css","js","ui","ux","styling","sass","linear gradient","css opacity"],"slug":"how-to-create-faded-background-using-html-css-and-javascript---rid---biuSrrx7QmDLJ8iCN0Uh","title":"How to Create Faded Background using HTML, CSS, and JavaScript","resourceId":"biuSrrx7QmDLJ8iCN0Uh"},{"_id":"62f3547677f9961d5b7c4bdf","content":{"difficulty":4,"domain":2,"type":2,"isInternal":false},"tags":["javascript","frontend coding challenges","reactjs","vanilla js","trello board","clone trello board","devtools tech","frontend masters","javascript interview question"],"slug":"clone-trello-board,-implement-dom-tree,-access-nested-properties-or-frontend-coding-challenges---rid---tNbr11YAsDyhSDHgQNiv","title":"Clone Trello Board, Implement DOM Tree, Access Nested Properties | Frontend Coding Challenges","resourceId":"tNbr11YAsDyhSDHgQNiv"},{"_id":"627795d91195627fe9f20c27","content":{"difficulty":4,"domain":12,"type":2,"isInternal":false},"tags":["product management","video podcast","devtools tech","youtube","product manager","remote","remote job","yomesh gupta","art"],"slug":"the-art-of-product-management-or-in-conversation-with-sourabh-ahuja-or-devtools-tech---rid---Ad5B6k5Zu9Oja2NdFK3t","title":"The Art of Product Management | In Conversation with Sourabh Ahuja | Devtools Tech","resourceId":"Ad5B6k5Zu9Oja2NdFK3t"}]}}