The first time I heard about the “temporal dead zone” I thought perhaps we had left javascript land and were talking about some type of shrimp . Indeed, I was wrong. I must have been hungry at the time. tempura The temporal dead zone or “tdz” for short, is relevant when writing es6 with let and const. Because let and const are block scoped and because they cannot be accessed before they are declared, you can run into situations where let and const are not defined. Let’s take a look at some examples using our tempura theme: var favoriteRoll = “Salmon Avocado”;console.log(favoriteRoll); “Salmon Avocado” as we expected. Let’s take a look at the outcome when we switch the order. What do you think will be printed to the console? console.log(favoriteRoll);var favoriteRoll = “Salmon Avocado”; undefinedSince variables are hoisted in javascript, favoriteRoll’s declaration and not initialization is hoisted to the top of the scope. Check out MDN’s section on var hoisting in case you want to What will this give us? learn more. Now let’s try our new friends let and const. let favoriteSauce = “soy sauce”;const WESTCOASTROLL = “California Roll”;console.log(favoriteSauce);console.log(WESTCOASTROLL); **What will this produce?**“soy sauce”“California Roll” are correct. Let’s switch up the order. console.log(favoriteSauce);console.log(WESTCOASTROLL);let favoriteSauce = “soy sauce”;const WESTCOASTROLL = “California Roll”; It’s not undefined which we got when we used var.We get “Uncaught ReferenceError: favoriteSauce is not defined”. What does this produce? Because unlike var both let and const cannot be accessed before they are declared. MDN provides a good explanation of let and const: “In ECMAScript 2015…. Referencing the variable in the block before the initialization results in a (contrary to a variable declared with , which will just have the undefined value). The variable is in a ‘ ’ from the start of the block until the initialization is processed.” Why is this happening? ReferenceError var temporal dead zone It’s good to be cognizant of the temporal dead zone when writing code with es6. To help prevent against tdz, it is recommended to declare variables (let / const) at the top of the scope. Senior, Lead, or Principal developer in NYC? ! Want to level up your tech team? ! Stride is hiring See how we do it www.stridenyc.com Originally posted on the Stride Blog . Author: Linda Gonzalez
