A Gentle Introduction to ES6 You must understand to grasp the benefits of / . Let’s rewind. var let const Review: Variable Declarations It’s important to intentionally your variables within a specific using , to keep your code clear and maintainable. declare scope, var var x = "outside";function foo() {var x = "inside";console.log(x);} foo(); // insideconsole.log(x); // outside Above code properly declares both outside and inside the function using . What happens without in ? x var var foo var x = "outside";function foo() {x = "inside";console.log(x);} foo(); // insideconsole.log(x); // inside Uh oh! outside the function was overwritten by inside the function because we didn’t specify that was to be only to ! x x x scoped foo Hoisting Best Practices Declare variables using at the top of the current scope. var OK: console.log('sup')var i = 0; Better: var i = 0;console.log('sup') Review: Hoisting Variables declared using are always to the top of their . var hoisted scope console.log(j); // ReferenceError: j is not defined console.log(i); // undefinedvar i = 0; The was never , so we get an error saying “I’ve never heard of !”. variable j declared j before being logged due to . Here is how the interpreter executed it: i was declared hoisting var i;console.log(i);i = 0; The interpreter moved (e.g. “hoisted”) the to the top of the . variable declaration scope However, the variable was to yet. says “I know , but I don’t know what value because you didn’t it to anything”. not assigned 0 undefined i exists i points to assign Supplement1: What if _var_ refers to a function ?Supplement2: Hoisting doesn’t physically “move” your code — MDN Function Scope 's are : scope is limited to the function it was defined in. var function-scoped function foo() {var i = 0;} console.log(i); // ReferenceError: i is not defined only exists within so we get an error: “I’ve never heard of !”. i foo i Block Scope ’s are : scope is limited to the block it was defined in. var not block-scoped not var i = 0if (true) {var i = 1;} console.log(i); // 1 still in the “global scope” within the . 's was overwritten, which may have not been the intention. i was if block i value let variables ! Specific scope = less mistakes. let are block-scoped let i = 0;if (true) {let i = 1;} console.log(i); // 0 Even though was to in the , that was to the and therefore our “global” was still . The block’s scope was separate from the global scope. i assigned 1 if block assignment local block i 0 if const == Constant restricts over-writing variables. const const i = 0;i = 1; // TypeError: Assignment to constant variable. doesn’t even let you declare a variable without assigning its (constant) value! const const i; // SyntaxError: Missing initializer in const declaration , like , is . const let block scoped if (true) {const i = 0;} console.log(i); // ReferenceError: i is not defined allow variable (only objects/arrays are mutable in JS). const does mutation Array Mutation: const a = [1];const b = a;console.log(a === b); // trueb.push(2);console.log(a === b); // trueconsole.log(a); /// [ 1, 2 ] Object Mutation: const obj = {};obj.i = 1;console.log(obj); // { i: 1 } let/const Hoisting and declarations are hoisted! let const not EDIT: Technically they , but they are not initialized to anything ( is initialized to ). are hoisted var undefined console.log(a); // undefinedvar a = 2; console.log(b); // Uncaught ReferenceError: b is not defined console.log(c); // Uncaught ReferenceError: c is not definedlet c = 2; This protects against variable placed after to variables. declarations references has a bug — it always returns . isEqualTo5 true function isEqualTo5(n) {return !(n - five);var five = 5;}console.log(isEqualTo5(4)); // true The issue is that isn’t assigned till after it’s referenced. It declared so when it is referenced in the return statement, its value is . five was undefined !(4 - undefined) === !(NaN) === true This bug may be hard to catch. / to the rescue! let const function isEqualTo5(n) {return !(n - five);const five = 5;}console.log(isEqualTo5(4)); // ReferenceError: five is not defined doesn’t hoist the declaration → error: reference before declaration→ prevents bug. const Specific scope = less errors + improved readability/maintainability. TLDR: →🗑, where you can 🔑, otherwise 's cool too! 🕶 var const let
