ECMAScrpit 6 - Baisc Syntax

ECMAScrpit 6 - Baisc Syntax

1. Variable Declarations

   1. Let

        1. The `let` statement declares a block scope local variable, optionally initializing it to a value.
        2. Redeclaring the same variable within the same function or block scope raises a `SyntaxError`.

   2. Const

        1. Constants are block-scoped, much like variables defined using the `let` statement. The value of a constant cannot change through reassignment, and it can't be redeclared.
        2. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

2. Template literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

1. Expression interpolation
2. Nesting templates
    * Within a backticked template it is simple to allow inner backticks simply by using them inside a placeholder `${ }` within the template.
3. Tagged templates

1. Objects initialized

Values of object properties can either contain primitive data types or other objects.

1. Creating objects
    1. An empty object with no properties can be created like
    2.  the advantage of the literal or initializer notation is, that you are able to quickly create objects with properties inside the curly braces `key: value`
2. Accessing properties
    1. object.property
    2. object['property']
3. Property definitions
4. Method definitions
    * In ECMAScript 2015, a shorthand notation is available, so that the keyword "function" is no longer necessary.
5. Computed property names
6. Spread properties

1. For Loop

   1. For ... in - Use For iterates Object

        1. A `for...in` loop only iterates over enumerable, non-Symbol properties.
        2. `for...in` should not be used to iterate over an Array where the index order is important.
        3. Given that `for...in` is built for iterating object properties, not recommended for use with arrays, and options like `Array.prototype.forEach()` and `for...of` exist

   2. For ... of

        1. The `for...of` statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.
        2. Differnect
            1. The `for...in` statement iterates over the enumerable properties of an object, in an arbitrary order.
            2. The `for...of` statement iterates over data that the iterable object defines to be iterated over.

   3. forEach

        1. `forEach()` executes the provided callback once for each element present in the array in ascending order.
      

2. destructuring assignment

   The `destructuring assignment` syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

   1. Array destructuring

        1. Swapping variables
            * [a, b] = [b, a]
        2. Parsing an array returned from a function
        3. Assigning the rest of an array to a variable
        4. Unpacking values from a regular expression match

   2. Object destructuring

        1. Assignment without declaration - (parentheses)

3. Function
   Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function.

   1. The function expression (function expression) - anonymous function/IIFE(Immediately Invokable Function Expression)

   2. name {

       statements

      }

       2. The `arrow function` expression (=>)
           1. An `arrow function` expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
       

        (param1, param2, …, paramN) => { statements } 
        (param1, param2, …, paramN) => expression
        // equivalent to: => { return expression; }
      
        // Parentheses are optional when there's only one parameter name:
        (singleParam) => { statements }
        singleParam => { statements }
      
        // The parameter list for a function with no parameters should be written with a pair of parentheses.
        () => { statements }

      
      2. An arrow function does not have its own `this`. The this value of the enclosing lexical context is used
      3. Arrow functions `cannot be used as constructors` and will throw an error when used with new
      4. Arrow functions do not have a prototype property.
       
        3. The `rest parameter` syntax allows us to represent an indefinite number of arguments as an 
      1. rest parameters are only the ones that haven't been given a separate name (i.e. formally defined in function expression), while the arguments object contains all arguments passed to the function;
      2. the `arguments` object is not a real array, while rest parameters are Array instances, meaning methods like sort, map, forEach or pop can be applied on it directly;

4. Symbol

   1. The Symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class but is incomplete as a constructor because it does not support the syntax "new Symbol()".

Reference

1. Destructuring Assignment In JavaScript

2. ES6 In Depth: Arrow functions

3. 「每日一题」JS 中的 Symbol 是什么？