FreeCodeCamp: ES6

Complete a Promise with resolve and rejectPassed

- A promise has three states: pending, fulfilled, and rejected. - The promise you created in the last challenge is forever stuck in the pending state because you did not add a way to complete the promise. - The resolve and reject parameters given to the promise argument are used to do this. - resolve is used when you want your promise to succeed, and reject is used when you want it to fail. These are methods that take an argument, as seen below. const myPromise = new Promise((resolve, reject) => { if(condition here) { resolve("Promise was fulfilled"); } else { reject("Promise was rejected"); } }); - The example above uses strings for the argument of these functions, but it can really be anything. - Often, it might be an object, that you would use data from, to put on your website or elsewhere.

Write Concise Object Literal Declarations Using Object Property Shorthand

- ES6 adds some nice support for easily defining object literals. - Consider the following code: const getMousePosition = (x, y) => ({ x: x, y: y }); - getMousePosition is a simple function that returns an object containing two properties. - ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. - You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood. - Here is the same function from above rewritten to use this new syntax: const getMousePosition = (x, y) => ({ x, y });

Set Default Parameters for Your Functions

- In order to help us create more flexible functions, ES6 introduces default parameters for functions. - ex. const greeting = (name = "Anonymous") => "Hello " + name; console.log(greeting("John")); // Hello John console.log(greeting()); // Hello Anonymous - default parameter kicks in when the argument is not specified (it is undefined) - As you can see in the example above, the parameter name will receive its default value "Anonymous" when you do not provide a value for the parameter. - You can add default values for as many parameters as you want.

Use Destructuring Assignment to Pass an Object as a Function's Parameters

- In some cases, you can destructure the object in a function argument itself. Consider the code below: const profileUpdate = (profileData) => { const { name, age, nationality, location } = profileData; // do something with these variables } - This effectively destructures the object sent into the function. This can also be done in-place: const profileUpdate = ({ name, age, nationality, location }) => { /* do something with these fields */ } - This removes some extra lines and makes our code look neat. - This has the added benefit of not having to manipulate an entire object in a function — only the fields that are needed are copied inside the function.

Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements

- In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array. - The result is similar to Array.prototype.slice(), as shown below: const [a, b, ...arr] = [1, 2, 3, 4, 5, 7]; console.log(a, b); // 1, 2 console.log(arr); // [3, 4, 5, 7] - Variables a and b take the first and second values from the array. - After that, because of the rest parameter's presence, arr gets the rest of the values in the form of an array. - The rest element only works correctly as the last variable in the list. - As in, you cannot use the rest parameter to catch a subarray that leaves out the last element of the original array.

Write Arrow Functions with Parameters

- Just like a regular function, you can pass arguments into an arrow function. - ex. // doubles input value and returns it const doubler = (item) => item * 2; - If an arrow function has a single argument, the parentheses enclosing the argument may be omitted. - It is possible to pass more than one argument into an arrow function. - ex. // multiplies the first input value by the second and returns it const multiplier = (item, multi) => item * multi;

Destructuring Assignment to Assign Variables from Arrays

- One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. - you cannot pick or choose which elements you want to assign to variables. - Destructuring an array lets us do exactly that: const [a, b] = [1, 2, 3, 4, 5, 6]; console.log(a, b); // 1, 2 - The variable a is assigned the first value of the array, and b is assigned the second value of the array. - We can also access the value at any index in an array with destructuring by using commas to reach the desired index: const [a, b,,, c] = [1, 2, 3, 4, 5, 6]; console.log(a, b, c); // 1, 2, 5

Handle a Fulfilled Promise with then

- Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. - When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. - This can be achieved by using the then method. - The then method is executed immediately after your promise is fulfilled with resolve. - Here's an example: myPromise.then(result => { // do something with the result. }); - result comes from the argument given to the resolve method

Mutate an Array Declared with const

- Some developers prefer to assign all their variables using const by default - unless they know they will need to reassign the value. Only in that case, they use let. - objects (including arrays and functions) assigned to a variable using const are still mutable. - const declaration only prevents reassignment of the variable identifier. - ex. "use strict"; const s = [5, 6, 7]; s = [1, 2, 3]; // throws error, trying to assign a const s[2] = 45; // works just as it would with an array declared with var or let console.log(s); // returns [5, 6, 45]

template literal

- This is a special type of string that makes creating complex strings easier. - allow you to create multi-line strings and to use string interpolation features to create strings. - ex. const person = { name: "Zodiac Hasbro", age: 56 }; // Template literal with multi-line and string interpolation const greeting = `Hello, my name is ${person.name}! I am ${person.age} years old.`; console.log(greeting); // prints // Hello, my name is Zodiac Hasbro! // I am 56 years old. - A lot of things happened there. Firstly, the example uses backticks (`), not quotes (' or "), to wrap the string. - Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings. - The ${variable} syntax used above is a placeholder. Basically, you won't have to use concatenation with the + operator anymore. - To add variables to strings, you just drop the variable in a template string and wrap it with ${ and }. Similarly, you can include other expressions in your string literal, for example ${a + b}. - This new way of creating strings gives you more flexibility to create robust strings.

inline functions

- We don't need to name these functions because we do not reuse them anywhere else.

Write Concise Declarative Functions with ES6

- When defining functions within objects in ES5, we have to use the keyword function as follows: const person = { name: "Taylor", sayHello: function() { return `Hello! My name is ${this.name}.`; } }; - With ES6, You can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax: const person = { name: "Taylor", sayHello() { return `Hello! My name is ${this.name}.`; } };

Object.freeze()

- is a JavaScript provides a function that prevents data mutation - Once the object is frozen, you can no longer add, update, or delete properties from it. - Any attempt at changing the object will be rejected without an error. - ex. let obj = { name:"FreeCodeCamp", review:"Awesome" }; Object.freeze(obj); obj.review = "bad"; // will be ignored. Mutation not allowed obj.newProp = "Test"; // will be ignored. Mutation not allowed console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}

rest parameter - ...(argument)

- With the rest parameter, you can create functions that take a variable number of arguments. - These arguments are stored in an array that can be accessed later from inside the function. - ex. function howMany(...args) { return "You have passed " + args.length + " arguments."; } console.log(howMany(0, 1, 2)); // You have passed 3 arguments. console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments. - The rest parameter eliminates the need to check the args array and allows us to apply map(), filter() and reduce() on the parameters array.

Use getters and setters to Control Access to an Object

- You can obtain values from an object and set the value of a property within an object class Book { constructor(author) { this._author = author; } // getter get writer() { return this._author; } // setter set writer(updatedAuthor) { this._author = updatedAuthor; } } const lol = new Book('anonymous'); console.log(lol.writer); // anonymous lol.writer = 'wut'; console.log(lol.writer); // wut - Notice the syntax used to invoke the getter and setter. They do not even look like functions. - Getters and setters are important because they hide internal implementation details. - Note: It is convention to precede the name of a private variable with an underscore (_). - However, the practice itself does not make a variable private.

Destructuring Assignment to Assign Variables from Nested Objects

- You can use the same principles from the previous two lessons to destructure values from nested objects. - Using an object similar to previous examples: const user = { johnDoe: { age: 34, email: '[email protected]' } }; - Here's how to extract the values of object properties and assign them to variables with the same name: const { johnDoe: { age, email }} = user; - And here's how you can assign an object properties' values to variables with different names: const { johnDoe: { age: userAge, email: userEmail }} = user;

const (variable)

- added bonus that variables declared using const are read-only. - They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned

spread operator

- allows us to expand arrays and other expressions in places where multiple parameters or elements are expected. - ex. var arr = [6, 89, 3, 45]; var maximus = Math.max.apply(null, arr); // returns 89 - We had to use Math.max.apply(null, arr) because Math.max(arr) returns NaN. - Math.max() expects comma-separated arguments, but not an array. - The spread operator makes this syntax much better to read and maintain. - ex. const arr = [6, 89, 3, 45]; const maximus = Math.max(...arr); // returns 89 - ...arr returns an unpacked array. - In other words, it spreads the array. - However, the spread operator only works in-place, like in an argument to a function or in an array literal. - The following code will not work: - ex. const spreaded = ...arr; // will throw a syntax error

Destructuring allows you to assign a new variable

- allows you to assign a new variable name when extracting values. - You can do this by putting the new name after a colon when assigning the value. - ex. const user = { name: 'John Doe', age: 34 }; - Here's how you can give new variable names in the assignment: - ex. const { name: userName, age: userAge } = user; // userName = 'John Doe', userAge = 34 - You may read it as "get the value of user.name and assign it to a new variable named userName" and so on.

setter functions

- are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. - This change could involve calculations, or even overwriting the previous value completely.

getters function

- are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.

Explore Differences Between the var and let Keywords

- biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. - ex. var camper = 'James'; var camper = 'David'; console.log(camper); // logs 'David' - you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult. - keyword called let - solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error. - ex. let camper = 'James'; let camper = 'David'; // throws an error

Handle a Rejected Promise with catch

- catch is the method used when your promise has been rejected. - It is executed immediately after a promise's reject method is called. - Here's the syntax: myPromise.catch(error => { // do something with the error. }); - error is the argument passed in to the reject method. Note: the then and catch methods can be chained to the promise declaration if you choose.

Compare Scopes of the var and let Keywords

- declare a variable with the var keyword, it is declared globally, or locally if declared inside a function. - let keyword behaves similarly, but with some extra features. - When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression. - ex. var numArray = []; for (var i = 0; i < 3; i++) { numArray.push(i); } console.log(numArray); // returns [0, 1, 2] console.log(i); // returns 3 - With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. - This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. - This is because the stored function will always refer to the value of the updated global i variable. - ex. var printNumTwo; for (var i = 0; i < 3; i++) { if (i === 2) { printNumTwo = function() { return i; }; } } console.log(printNumTwo()); // returns 3 - As you can see, printNumTwo() prints 3 and not 2. - This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. - The let keyword does not follow this behavior: 'use strict'; let printNumTwo; for (let i = 0; i < 3; i++) { if (i === 2) { printNumTwo = function() { return i; }; } } console.log(printNumTwo()); // returns 2 console.log(i); // returns "i is not defined" - i is not defined because it was not declared in the global scope. - It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement.

constructor method

- is a special method for creating and initializing an object created with a class.

class keyword

- is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc. - In ES5, we usually define a constructor function and use the new keyword to instantiate an object. var SpaceShuttle = function(targetPlanet){ this.targetPlanet = targetPlanet; } var zeus = new SpaceShuttle('Jupiter'); - The class syntax simply replaces the constructor function creation: class SpaceShuttle { constructor(targetPlanet) { this.targetPlanet = targetPlanet; } } const zeus = new SpaceShuttle('Jupiter'); - the class keyword declares a new function, to which a constructor is added. - This constructor is invoked when new is called to create a new object.

Destructuring assignment

- is special syntax introduced in ES6, for neatly assigning values taken directly from an object. - Consider the following ES5 code: const user = { name: 'John Doe', age: 34 }; const name = user.name; // name = 'John Doe' const age = user.age; // age = 34 - Here's an equivalent assignment statement using the ES6 destructuring syntax: const { name, age } = user; // name = 'John Doe', age = 34 - the name and age variables will be created and assigned the values of their respective values from the user object. - You can see how much cleaner this is. - You can extract as many or few values from the object as you want.

default parameter

- kicks in when the argument is not specified (it is undefined)

apply() - ES5 code

- to compute the maximum value in an array

Use Arrow Functions to Write Concise Anonymous Functions

- we often don't need to name our functions, especially when passing a function as an argument to another function. - we create inline functions. - We don't need to name these functions because we do not reuse them anywhere else. - To achieve this, we often use the following syntax: const myFunc = function() { const myVar = "value"; return myVar; } - Instead, you can use arrow function syntax: - ex. const myFunc = () => { const myVar = "value"; return myVar; } - When there is no function body, and only a return value - arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. - This helps simplify smaller functions into one-line statements: const myFunc = () => "value"; - This code will still return value by default.

let (variable)

- when using let, a variable with the same name can only be declared once. - This enables Strict Mode, which catches common coding mistakes and "unsafe" actions. - ex. let camper = 'James'; let camper = 'David'; // throws an error

Declare a Read-Only Variable with the const Keyword

- you can also declare variables using the const keyword. - has all the awesome features that let has - ha the added bonus that variables declared using const are read-only. - They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned. - ex. "use strict"; const FAV_PET = "Cats"; FAV_PET = "Dogs"; // returns error - As you can see, trying to reassign a variable declared with const will throw an error. - You should always name variables you don't want to reassign using the const keyword - helps when you accidentally attempt to reassign a variable that is meant to stay constant. - A common practice when naming constants is to use all uppercase letters, with words separated by an underscore. - ex. const FAV_CAT = "Midnight"; - It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays).