Variable shadowing, hoisting and the temporal dead zone

var x = 1;
function f() {
let x = x;
// Something that modifies x
};
f();

Variable shadowing

let x = 3;
if(x === 3) {
let y = 4;
console.log(x); // 3
console.log(y); // 4
}
console.log(x); // 3
console.log(y); // ReferenceError
let x = 3;
if(x === 3) {
let x = 4;
console.log(x); // 4
}
console.log(x); // 3
  • Variable shadowing is completely valid JavaScript.
  • When within the scope of the local x (the if block), there is no way to access the global x.

Hoisting

function f() {
console.log(x); // undefined
var x = 3;
console.log(x); // 3
}
function f() {
var x;
console.log(x); // undefined
x = 3;
console.log(x); // 3
}
  • A variable may be defined before its first appearance in the code, possibly catching you by surprise.
  • Even if you assign a variable at the same time it is declared, accessing that variable still may return undefined.

The temporal dead zone

function f() {
console.log(x); // RefenceError
let x = 3;
console.log(x);
}
function f() {
let x;
// TDZ begins here
console.log(x); // ReferenceError
// TDZ ends here
x = 3;
console.log(x);
}
  • If we attempt to access a let / const variable after it is defined but before it is assigned a value, we get an error.
  • This differs from var variables, which would return undefined in the same situation.

What’s wrong with my code?

var x = 1;
function f() {
let x = x;
// Something that modifies x
};
f();
var x = 1;
function f() {
let x;
x = x;
// Something that modifies x
};
f();
A Node.js session showing “ReferenceError: Cannot access ‘x’ before initialization” when my code is executed

What about var?

var x = 1;
function f() {
var x = x;
// Something that modifies x
};
f();

How can fix this?

var x = 1;
function f() {
let xCopy = x;
// Something that modifies xCopy
};
f();

Scope

  • What is a closure?
  • Exactly where does one scope end and another begin?
  • Exactly what is the difference between let, const and var?

--

--

--

https://alexbostock.co.uk

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create a Whack a Mole Game with React and JavaScript

Beginner’s Guide to Ionic Angular Unit Testing (Part 2) — Mocks and Spies

Beginner’s Guide to Ionic Angular Unit Testing (Part 2) — Mocks and Spies

Trello clone with ReactJS and Firebase

JavaScript Interview Questions and Solutions

Cursor colors with Prosemirror + Yjs

Emoji “Shocked Face With Exploding Head”

Top React Hooks — Drop Area, Speech, Full Screen, and Slider

Export To The File System (Save As…) + Fallback In TypeScript

React Tips — Elements and Caching Values

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Bostock

Alex Bostock

https://alexbostock.co.uk

More from Medium

An interview with our partner Zalando

Complete guide about UseState Hook in React

Transpiler VS Compiler

Leetcode 238: Product of Array Except Self Javascript solution