# ES6 ## `let`, `var`, `const` Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are ***block scoped***, ie. they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop). ## Function constructors Example of each: ```javascript // ES5 Function Constructor function Person(name) { this.name = name; } // ES6 Class class Person { constructor(name) { this.name = name; } } ``` For simple constructors, they look pretty similar. The main difference in the constructor comes when using **inheritance**. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above. ```javascript // ES5 Function Constructor function Student(name, studentId) { // Call constructor of superclass to initialize superclass-derived members. Person.call(this, name); // Initialize subclass's own members. this.studentId = studentId; } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; // ES6 Class class Student extends Person { constructor(name, studentId) { super(name); this.studentId = studentId; } } ``` It's much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember. **References** * * ## Arrow functions Simplify the syntax needed to create functions, without a need for the `function`keyword. The `this` within arrow functions is also bound to the enclosing scope which is different compared to regular functions where the `this` is determined by the object calling it. **Lexically-scoped `this`** is useful when invoking callbacks especially in React components. ## Advantage of using the arrow syntax for methods in a constructor The value of `this` gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, **`this` will always refer to that object**. Example: we have a `Person` constructor that takes a first name as an argument has two methods to `console.log` that name, one as a regular function and one as an arrow function: ``` const Person = function(firstName) { this.firstName = firstName; this.sayName1 = function() { console.log(this.firstName); }; this.sayName2 = () => { console.log(this.firstName); }; }; const john = new Person('John'); const dave = new Person('Dave'); john.sayName1(); // John john.sayName2(); // John // The regular function can have its 'this' value changed, but the arrow function cannot john.sayName1.call(dave); // Dave (because "this" is now the dave object) john.sayName2.call(dave); // John john.sayName1.apply(dave); // Dave (because 'this' is now the dave object) john.sayName2.apply(dave); // John john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object) john.sayName2.bind(dave)(); // John var sayNameFromWindow1 = john.sayName1; sayNameFromWindow1(); // undefined (because 'this' is now the window object) var sayNameFromWindow2 = john.sayName2; sayNameFromWindow2(); // John ``` **`this` can be changed for a normal function, but the context always stays the same for an arrow function**. **Even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the context changing.** **This can be particularly helpful in React class components.** If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind `this` in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: ) **References** * * ## Destructuring **Extract values of Objects or Arrays and place them into distinct variables**. **Array destructuring** ```javascript // Variable assignment. const foo = ['one', 'two', 'three']; const [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" ``` ```javascript // Swapping variables let a = 1; let b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1 ``` **Object destructuring** ```javascript // Variable assignment. const o = { p: 42, q: true }; const { p, q } = o; console.log(p); // 42 console.log(q); // true ``` **References** * * Very useful when coding in a **functional paradigm** as we can easily **create copies of arrays or objects without resorting to `Object.create`, `slice`**, or a library function. This language feature is used often in **Redux** and rx.js projects. ```javascript function putDookieInAnyArray(arr) { return [...arr, 'dookie']; } const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"] const person = { name: 'Todd', age: 29, }; const copyOfTodd = { ...person }; ``` ES6's **rest syntax** offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like **an inverse of the spread syntax**, taking data and **stuffing it into an array rather than unpacking an array of data**, and it works in function arguments, as well as in array and object destructuring assignments. ```javascript function addFiveToABunchOfNumbers(...numbers) { return numbers.map(x => x + 5); } const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15] const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4] const { e, f, ...others } = { e: 1, f: 2, g: 3, h: 4, }; // e: 1, f: 2, others: { g: 3, h: 4 } ``` **References** * * * ## Template literals --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ricardomol.gitbook.io/notes/frontend/untitled/es6.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.