ES6

• Var
• Let
• Block Scope "this"
• Const
• Hoisting
• Arrow Functions
• Default Parameters
• Object Literals
• Rest Operator
• Spread Operator
• For Of Loop
• Template Literals
• Destructuring

Block Scope and "let"

1. The var statement

• 1_var.js

  var name = 'MCA';
  console.log(name);
  
  Output: 'MCA'
  

2. The let statement

• 2_let.js

  let name = 'MCA';
  console.log(name);
  
  Output: 'MCA'
  

3. Block scope Error

• 3_blockscope_error.js

  'let' use block scope, the variable just exists in the "if" block.

  if(true){
      let age = 40;
  }
  console.log(age);
  
  Output: ReferenceError: name is not defined.
  

4. Block Scope

• 4_blockscope.js

  age = 33;
  if(true){
      let age = 40;
  }
  console.log(age);
  
  Output: 33
  

5. Block Scope

• 5_blockscope.js

  let age = 33;
  if(true){
      let age = 40;
      console.log(age);
  }
  console.log(age);
  
  Output: 40
          33
  

6. Block Scope

• 6_blockscope.js

  let age = 33;
  if(true){
      let age = 40;
      console.log(age);
  }
  console.log(age);
  age = 29;
  console.log(age);
  
  Output: 40
          33
          29
  

• With "let" be sure the variable you use inside of a block stay inside a block.

"const"

7. Const is a diferent thing.

• 7_const.js

  const age = 33;
  console.log(age);
  
  Output: 33
  

8. If i set a value to age constant it gives a erros. It is a constant and may not be changed.

• 8_const_error.js

  const age = 38;
  age = 33;
  console.log(age);
  
  Output: TypeError: Assignment to constant variable.
  

9. Emphasis that it is a constant with uppercase.

• 9_constant.js

  const AGE = 38;
  console.log(AGE);
  
  Output: 38
  

10. Constant Array

• 10_constant_array.js

  const AGES = [27,33,38];
  console.log(AGES);
  
  Output: [27,33,38]
  

11. Constant Array Push

• 11_constant_array_push.js

  const AGES = [27,33,38];
  console.log(AGES);
  AGES.push(40);
  console.log(AGES);
  
  Output: [27,33,38]
          [27,33,38,40]
  

12. Constant Object

• 12_constant_obj.js

  const OBJ = {
      age: 33
  };
  console.log(OBJ);
  OBJ.age = 40;
  console.log(OBJ);
  
  Output: { age: 33 }
          { age: 40 }
  

Hoisting with "let" and "const"

13. Hoisting var

• 13_hoisting_var.js

  age = 33;
  console.log(age);
  var age;
  
  Output: 33
  

14. Hoisting let error

• 14_hoisting_let_error.js

    age = 33;
    console.log(age);
    let age;
  
    Output: ReferenceError: Cannot access 'age' before initialization at Object.
  

15. Hoisting let

• We have to declare it before initialize.

• 14_hoisting_let.js

  let age;
  age = 33;
  console.log(age);
  
  Output: 33
  

16. Hoisting let function

• 16_hoisting_let_function.js

    function doSmth(){
        age = 33;
    }
  
    let age;
    doSmth();
    console.log(age);
  
    Output: 33
  

  • You have to declare things before act using then.

Fat Arrow Functions

17. Normal Function

• 17_normal_function.js

  function fn(){
      console.log('Hello!');
  }
  
  fn();
  
  Output: 'Hello!'
  

18. Arrow Function

• 18_arrow_function.js

  var fn = () => {
      console.log('Hello!');
  }
  
  fn();
  
  Output: 'Hello!'
  

19. Arrow Function Shorter

• 19_arrow_function_shorter.js

  var fn = () => console.log('Hello!');
  
  fn();
  
  Output: 'Hello!'
  

20. Arrow Function Much Shorter

• 20_arrow_function_much_shorter.js

  var fn = () => 'Hello!';
  
  console.log(fn());
  
  Output: 'Hello!'
  

21. It has effect as the same as example before.

• 21_effect_as_the_same_as_example_before.js

  function fn(){
      return 'Hello!';
  }
  
  console.log(fn());
  
  Output: 'Hello!'
  

22. Arrow Function Multiply

• 22_arrow_function_multiply.js

  var fn = () => {
      let a = 2;
      let b = 3;
      return a * b;
  };
  
  console.log(fn());
  
  Output: 6
  

23. Arrow Function Parameters

• 23_arrow_function_parameters.js

  var fn = (a,b) => {
      return a * b;
  };
  
  console.log(fn(2,3));
  
  Output: 6
  

24. Arrow Function Parameters One Line

• 24_arrow_function_parameters_one_line.js

  var fn = (a,b) => a * b;
  
  console.log(fn(2,3));
  
  Output: 6
  

25. Arrow Function Parameters One Argument

• 25_arrow_function_parameters_one_argument.js

  var fn = (a) => a * 2;
  
  console.log(fn(2));
  
  * If you pass a second argument, will be ignored. 
  
  console.log(fn(2,3));
  
  Output: 4
          4
  

26. Arrow Function Parameters One Argument

• 26_arrow_function_parameters_one_argument.js

• When we have just one argument we can leave the paranteses

  var fn = a => a * 2;
  
  console.log(fn(2));
  
  Output: 4
  

27. Arrow Function SetTimeOut

• 27_arrow_function_settimeout.js

  SetTimeOut(() => console.log('Hello!',1000));
  
  Output: 'Hello!' after 1 second.
  

Fat Arrow Functions & "this"

28. Normal Function & "this"

• 28_normal_function_this.js

  function fn(){
      console.log(this);
  }
  fn();
  
  Output Terminal: <ref *1> Object [global]
  Output Console Browser: Window {0: global,..}
  

29. Arrow Function & "this"

• 29_arrow_function_this.js

  var fn = () => console.log(this);
  fn();
  
  Output Terminal: {}
  Output Console Browser: Window {0: global,..}
  Here "this" refers to global scope.
  

30. Normal Function This Button

• 30_normal_function_this_button.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Normal Function This Button</title>
  </head>
  <body>
      <button>Test</button>
  </body>
  </html>
  <script>
      var button = document.querySelector('button');
  
      function fn(){
          console.log(this);
      }
      
      button.addEventListener('click',fn);
  
      // Output: <button>Test</button> 
      // Here "this" refers to button scope.
  </script>
  

31. Arrow Function This Button

• 31_arrow_function_this_button.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Arrow Function This Button</title>
  </head>
  <body>
      <button>Test</button>
  </body>
  </html>
  <script>
      var button = document.querySelector('button');    
      var fn = () => console.log(this);
      button.addEventListener('click',fn);
      
      /*
      * Output: <button>Test</button>
      * Here "this" refers to global scope.
      */
  </script>
  

• "this" are handleed diferent dependes the context.

• The Fat Arrow Functions you wont´t need bind, apply or call all these workaround uses with ES5 to get "this" to the right context.

• Just keeps the context no mather how or where you call this function.

Default Parameters

32. Normal Parameters

• 32_normal_parameters.js

  function isEqualTo(number,compare){
      return number == compare;
  }
  console.log(isEqualTo(10,10));
  
  Output: true
  

33. Default Paramenters False

• 33_default_paramenters_false.js

  function isEqualTo(number,compare = 0){
      return number == compare;
  }
  console.log(isEqualTo(10));
  
  Output: false
  

34. Default Paramenters True

• 34_default_paramenters_true.js

  function isEqualTo(number,compare = 10){
      return number == compare;
  }
  console.log(isEqualTo(10));
  
  Output: true
  

35. Default Paramenters Two

• 35_default_paramenters_both.js

  function isEqualTo(number = 10,compare = 10){
      return number == compare;
  }
  console.log(isEqualTo());
  
  Output: true
  

36. Default Paramenters One

• 36_default_paramenters_one.js

  function isEqualTo(number = 10,compare){
      return number == compare;
  }
  console.log(isEqualTo(11));
  
  Output: false
  

37. Default Paramenters One Debug

• 37_default_paramenters_one_debug.js

  function isEqualTo(number = 10,compare){
      console.log(number);
      console.log(compare);
      return number == compare;
  }
  console.log(isEqualTo(11));
  
  Output: 11
          undefined
          false
  

38. Default Paramenters Skip One

• 38_default_paramenters_skip_one.js

  function isEqualTo(number,compare = 10){
      console.log(number);
      console.log(compare);
      return number == compare;
  }
  console.log(isEqualTo(11));
  
  Output: 11
          10
          false
  

39. Default Paramenters Calculation

• 39_default_paramenters_calculation.js

  function isEqualTo(number,compare = 10 / 2){
      console.log(number);
      console.log(compare);
      return number == compare;
  }
  console.log(isEqualTo(11));
  
  Output: 11
          5
          false
  

40. Default Paramenters The Same

• 40_default_paramenters_the_same.js

  function isEqualTo(number,compare = number){
      console.log(number);
      console.log(compare);
      return number == compare;
  }
  console.log(isEqualTo(11));
  
  Output: 11
          11
          true
  

41. Default Paramenters Declared Outside

• 41_default_paramenters_declared_outside.js

  let a = 100;
  function isEqualTo(number,compare = a){
      console.log(number);
      console.log(compare);
      return number == compare;
  }
  console.log(isEqualTo(11));
  
  Output: 11
          11
          true
  

42. Default Paramenters inverted

• 42_default_paramenters_inverted.js

  function isEqualTo(number = compare,compare = 10){
      console.log(number);
      console.log(compare);
      return number == compare;
  }
  console.log(isEqualTo());
  
  Output: ReferenceError: Cannot access 'compare' before initialization at isEqualTo
  

  • The error is because the compare only will be created in the second step, in first step this not exists yet.

Object Literal Extensions

43. Object Literal

• 43_object_literal.js

  let obj = {
      name: 'MCA',
      age: 33
  };
  
  console.log(obj);
  
  Output: { name: 'MCA', age: 33 }
  

44. Object Literal External Assigned

• 44_object_literal_external_assigned.js

  let name = 'MCA';
  let age = 33;
  
  let obj = {
      name,
      age
  };
  
  console.log(obj);
  
  Output: { name: 'MCA', age: 33 }
  

  • The object will take the values from the surrounding variables. We not specify values to initialize the object. It automatic look if has variables declared before the declaration object that matches the propertie names.

45. Object Literal Not Assigned

• 45_object_literal_not_assigned.js

  let obj = {
      name,
      age
  };
  
  console.log(obj);
  
  Output: ReferenceError: name is not defined at Object.
  

  • The object properties need to be initialized.

46. Object Literal External Assigned Override

• 46_object_literal_external_assigned_override.js

  let name = 'MCA';
  let age = 33;
  
  let obj = {
      name: 'DIGITAL',
      age
  };
  
  console.log(obj);
  
  Output: { name: 'DIGITAL', age: 33 }
  

  • The object properties will be override.

47. Object Literal Function Propertie

• 47_object_literal_function_propertie.js

  let name = 'MCA';
  let age = 33;
  
  let obj = {
      name: 'DIGITAL',
      age,
      greet(){
          console.log(this.name + ', ' + this.age);
      }
  };
  
  obj.greet();
  
  Output: DIGITAL, 33
  

48. Object Literal Propertie String

• 48_object_literal_propertie_string.js

  let name = 'MCA';
  let age = 33;
  
  let obj = {
      "name": 'DIGITAL',
      age,
      "greet"(){
          console.log(this.name + ', ' + this.age);
      },
      "greet me"(){
          console.log(this.name + ', ' + this.age);
      }
  };
  
  obj["greet"]();
  obj["greet me"]();
  
  Output: DIGITAL, 33
  

49. Object Literal Propertie String Dinamic Error

• 49_object_literal_propertie_string_dinamic_error.js

  let name = 'MCA';
  let age = 33;
  
  let ageField = "age";
  
  let obj = {
      "name": 'DIGITAL',
      [ageField],
      "greet me"(){
          console.log(this.name + ', ' + this.age);
      }
  };
  
  obj["greet me"]();
  
  Output: SyntaxError: Unexpected token ','
  

50. Object Literal Propertie String Dinamic

• 50_object_literal_propertie_string_dinamic.js

  let name = 'MCA';
  let age = 33;
  
  let ageField = "age";
  
  let obj = {
      "name": 'DIGITAL',
      [ageField]: 40,
      "greet me"(){
          console.log(this.name + ', ' + this.age);
      }
  };
  
  obj["greet me"]();
  console.log(obj.age);
  console.log(obj[ageField]);
  console.log(obj["age"]);
  
  Output: DIGITAL, 40
          40
          40
          40
  

The Rest Operator

• Rest operators return a array when passed as parameters.

51. The Array Parameter

• 51_the_array_parameter.js

  function sumUp(toAdd){
      let result = 0;
      for(let i=0; i<toAdd.length; i++){
          result += toAdd[i];
      }
      return result;
  }
  
  let numbers = [1,2,3,4,5];
  console.log(sumUp(numbers));
  
  Output: 15
  

52. The Rest Operator

• 52_the_rest_operator.js

  function sumUp(...toAdd){
      console.log(toAdd);
      let result = 0;
      for(let i=0; i<toAdd.length; i++){
          result += toAdd[i];
      }
      return result;
  }
  
  console.log(sumUp(100,10,20));
  
  Output: 130
  

53. The Rest Operator with String

• 53_the_rest_operator_with_string.js

  function sumUp(...toAdd){
      console.log(toAdd);
      let result = 0;
      for(let i=0; i<toAdd.length; i++){
          result += toAdd[i];
      }
      return result;
  }
  
  console.log(sumUp(100,10,"20"));
  
  Output: "11020"
  

The Spread Operator

• Spread operator does the oposite of Rest Operator.

54. The Spread Operator

• 54_the_spread_operator.js

  let numbers = [1,2,3,4,5];
  
  console.log(...numbers);
  console.log(Math.max(numbers));
  console.log(Math.max(...numbers));
  
  Output: 1 2 3 4 5   
          NaN         
          5           
  

The For-of-Loop

55. The For-of-Loop

• 55_the_for_of_loop.js

  let testResults = [1.23,1.10,4.1];
  
  for(testResult of testResults){
      console.log(testResult);
  }
  
  Output: 1.23
          1.1
          4.1
  

Template Literals

56. Template Literals

• 56_template_literals.js

  let name = 'MCA';
  let description = `
      Like this
  `;
  
  console.log(name);
  console.log(description);
  
  Output: MCA
          Like this
  

57. Template Literals Variables

• 57_template_literals_variables.js

  let name = 'MCA',
      date = new Date(),
      year = date.getFullYear(),
      month = date.getMonth(),
      day = date.getDate();
  
  let description = `
      Hello, \${name} we are in \${day+'/'+month+'/'+year}
      Hello, ${name} we are in ${day+'/'+month+'/'+year}
  `;
  
  console.log(description);
  
  Output: Hello, ${name} we are in ${day+'/'+month+'/'+year}
          Hello, MCA we are in 23/2/2021
  

Destructuring - Arrays

58. Normal Array

• 58_normal_array.js

  let numbers = [1,2,3];
  let a = numbers[0];
  let b = numbers[1];
  
  console.log(numbers);
  console.log(a);
  console.log(b);
  
  Output: [ 1, 2, 3 ] 
          1 
          2 
  

59. Destructuring Array

• 59_destructuring_array.js

  let numbers = [1,2,3];
  let [a,b] = numbers;
  
  console.log(a);
  console.log(b);
  console.log(numbers);
  
  Output: 1 
          2 
          [ 1, 2, 3 ] 
  

60. Destructuring Array Undefined

• 60_destructuring_array_undefined.js

  let numbers = [1,2,3];
  let [a,b,c,d] = numbers;
  
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  console.log(numbers);
  
  Output: 1 
          2 
          3
          undefined
          [ 1, 2, 3 ] 
  

61. Destructuring Array Rest

• 61_destructuring_array_rest.js

  let numbers = [1,2,3];
  let [a,...b] = numbers;
  
  console.log(a);
  console.log(b);
  console.log(numbers);
  
  Output: 1
          [ 2, 3 ]
          [ 1, 2, 3 ]
  

62. Destructuring Array Rest Error

• 62_destructuring_array_rest_error.js

  let numbers = [1,2,3];
  let [a,...b,c] = numbers;
  
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(numbers);
  
  Output: let [a,...b,c] = numbers;
                 ^^^^
          SyntaxError: Rest element must be last element.
  

63. Destructuring Array Default

• 63_destructuring_array_default.js

  • A mix of Default Values And Destructuring.

    let numbers = [1,2,"3"]; let [a=0,b,c,d='Default'] = numbers;

    console.log(a); console.log(b); console.log(c); console.log(d); console.log(numbers);

    Output: 1 2 "3" "Default" [ 1, 2, 3 ]

64. Swap Variables

• 64_swap_variables.js

  let a = 5;
  let b = 10;
  let c = a;
  
  console.log("a: ",a);
  console.log("b: ",b);
  
  a = b; 
  b = c;
  
  console.log("a: ",a);
  console.log("b: ",b);
  
  Output: a:  5 
          b:  10
          a:  10
          b:  5 
  

65. Destructuring Swap Variables

• 65_destructuring_swap_variables.js

  let a = 5;
  let b = 10;
  
  console.log("a: ",a);
  console.log("b: ",b);
  
  [b,a] = [a,b];
  
  console.log("a: ",a);
  console.log("b: ",b);
  
  Output: a:  5 
          b:  10
          a:  10
          b:  5 
  

66. Destructuring Array Spaces

• 66_destructuring_array_spaces.js

  let numbers = [1,2,3];
  let [a, ,c] = numbers;
  
  console.log(a,b);
  
  Output: 1 3
  

67. Destructuring Create Variables

• 67_destructuring_create_variables.js

  let [a,b] = [1,2,3];
  console.log(a,b);
  
  Output: 1 2
  

Destructuring - Objects

68. Destructuring - Objects

• 68_destructuring_objects.js

  let obj = {
      name: 'MCA',
      age: 33
  };
  
  let {name,age} = obj;
  
  console.log(name);
  console.log(age);
  
  Output: MCA
          33
  

69. Destructuring - Objects Function

• 69_destructuring_objects_function.js

  let obj = {
      name: 'MCA',
      age: 33,
      greet: function(){
          console.log('Hello there!');
      }
  };
  
  let {name,greet} = obj;
  
  greet();
  
  Output: "Hello there!"
  

70. Destructuring - Objects Function Alias

• 70_destructuring_objects_function_alias.js

  let obj = {
      name: 'MCA',
      age: 33,
      greet: function(){
          console.log('Hello there!');
      }
  };
  
  let {name,greet: hello} = obj;
  
  hello();
  greet();
  

  • If will try call greet() it will give a error.

  • Outside object just exists hello() function.

    Output: "Hello there!" ReferenceError: greet is not defined.

https://kangax.github.io/compat-table/es6/

• ES6 Compatibility Table

jsbin

• Test javascript.

Academind

• ES6 JavaScript Tutorial for Beginners - Getting Started
• https://www.youtube.com/watch?v=IEf1KAcK6A8