{"id":766,"date":"2020-09-01T19:05:04","date_gmt":"2020-09-01T19:05:04","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=766"},"modified":"2020-09-19T18:04:03","modified_gmt":"2020-09-19T18:04:03","slug":"what-is-hoisting-and-temporal-dead-zone-in-es6","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/what-is-hoisting-and-temporal-dead-zone-in-es6\/","title":{"rendered":"What is Hoisting and Temporal Dead Zone in ES6"},"content":{"rendered":"\n

Hoisting<\/strong> is important JavaScript concept introduced in ECMAScript 6 (ES6) where variables and function declarations (declared using var<\/code><\/strong>) are moved to the top of their scope before code execution. Inevitably, this means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.<\/p>\n\n\n\n

Variable Hoisting:<\/strong><\/p>\n\n\n\n

\n\nIt is important to note that, JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined. \n\n<\/p>\n\n\n\n

\/\/ Hoisted\nconsole.log(num); \/\/ undefined\nvar num; \/\/ Declaration\n\n\/\/ Not hoisted\nconsole.log(num); \/\/ ReferenceError: num is not defined\nvar num = 10; \/\/ Initialization<\/code><\/pre>\n\n\n\n
Function Hoisting:<\/strong><\/p>\n\n\n\n
let’s consider an example to understand function hoisting. <\/p>\n\n\n\n
\/\/ Calling function before declaration\nadd(5, 10); Output: 15\n\nfunction add(x, y){\n   console.log(x + y);\n}<\/code><\/pre>\n\n\n\n
As you see, the function add()<\/strong><\/code> is called before it was declared, but the code will work fine without any error because of hoisting mechanism. JavaScript will consider the above code as:<\/p>\n\n\n\n
function add(x, y){\n   console.log(x + y);\n}\nadd(5, 10); Output: 15<\/code><\/pre>\n\n\n\n
The add()<\/strong><\/code> function declaration is moved to the top before executing it.<\/p>\n\n\n\n
 “Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile<\/em> phase, but stay exactly where you typed them in your code. “<\/p><\/blockquote>\n\n\n\n
Temporal Dead Zone:<\/strong><\/p>\n\n\n\n
In ECMAScript 6 (ES6), accessing a let<\/code><\/strong> or const<\/code><\/strong> variable before its declaration within its scope causes a ReferenceError (i.e. does not support hoisting). The time span when that happens, between the creation of a variable’s binding and its declaration, is known as the Temporal Dead Zone.<\/p>\n\n\n\n
console.log(num); \/\/ ReferenceError: num is not defined\nlet num;<\/code><\/pre>\n\n\n\n
To learn more about let<\/strong>, const<\/strong> and other new features introduced in ES6 you may read this article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hoisting is important JavaScript concept introduced in ECMAScript 6 (ES6) where variables and function declarations (declared using var) are moved to the top of their scope before code execution. Inevitably, [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[235,233,234],"class_list":["post-766","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-hoisting-es6","tag-hoisting-in-javascript","tag-temporal-dead-zone-es6","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=766"}],"version-history":[{"count":16,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/766\/revisions"}],"predecessor-version":[{"id":783,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/766\/revisions\/783"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}