javaScript ES6

ES6 Variables

Compare Scopes of the var and let Keywords - FCC

            
  var x = 'global';
  let y = 'global';

  console.log(this.x); // "global"
  console.log(this.y); // undefined
            
          

If you are unfamiliar with let, check out this challenge.

When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function.

The 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.

Example:

          
  var numArray = [];
  for (var i = 0; i < 3; i++) {
    numArray.push(i);
  }
  console.log(numArray);
  console.log(i);
          
        

Here the console will display the values [0, 1, 2] and 3.

With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similar to the following:

          
  var numArray = [];
  var i;
  for (i = 0; i < 3; i++) {
    numArray.push(i);
  }
  console.log(numArray);
  console.log(i);
          
        

Here the console will display the values [0, 1, 2] and 3.

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.

          
  var printNumTwo;
  for (var i = 0; i < 3; i++) {
    if (i === 2) {
      printNumTwo = function() {
        return i;
      };
    }
  }
console.log(printNumTwo());
          
        

Here the console will display the value 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:

          
  let printNumTwo;
  for (let i = 0; i < 3; i++) {
    if (i === 2) {
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  console.log(i);
          
        

Here the console will display the value 2, and an error that 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.

Mutate an Array Declared with const - FCC

The const declaration has many use cases in modern JavaScript.

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.

However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the const declaration only prevents reassignment of the variable identifier.

            
  const s = [5, 6, 7];
  s = [1, 2, 3];
  s[2] = 45;
  console.log(s);
            
        

s = [1, 2, 3] will result in an error.

The console.log will display the value [5, 6, 45].

As you can see, you can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.

Prevent Object Mutation

As seen in the previous challenge, const declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze to prevent data mutation.

Any attempt at changing the object will be rejected, with an error thrown if the script is running in strict mode.

            
  let obj = {
    name:"FreeCodeCamp",
    review:"Awesome"
    };

  Object.freeze(obj);
  obj.review = "bad";
  obj.newProp = "Test";

  console.log(obj); 
            
        

The obj.review and obj.newProp assignments will result in errors, because our editor runs in strict mode by default, and the console will display the value { name: "FreeCodeCamp", review: "Awesome" }.

Arrow Functions

            
    param => expression
            
          

            
    (param1, paramN) => expression
            
          

            
    param => {
      let a = 1;
      return a + param;
    }
            
          

            
    (param1, paramN) => {
      let a = 1;
      return a + param1 + paramN;
    }
            
          

            
    params => ({foo: "a"}) // returning the object {foo: "a"}
            
          

            
    (a, b, ...r) => expression
            
          

            
    (a=400, b=20, c) => expression
            
          

            
    ([a, b] = [10, 20]) => a + b;  // result is 30
    ({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30
            
          

Use Arrow Functions to Write Concise Anonymous Functions

In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, 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;
  }
          
        

ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax:

          
  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 the string value by default.

Classes

Symbols

Template Literals

...spread operator and rest operator

Destructuring

Import Export Modules

Proxies

Map data structure & Map Object