ES6 (2015) ~ ES11(2020) 핵심정리

gistfile1.js

//Shorthend property names
//변수명과 키값이 같은 경우 생략이 가능하다.
const name = 'Sori';
const age = '32';

const sori = {
  name: name,
  age: age
};

const sori2 = {name,age};

//Destructuring assignment
{
  const student = {
    name: 'anna',
    level: 1
  };  

  //before
  {
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  }

  //after
  {
    const {name,level} = student;
    console.log(name, level);

    //변수명 변경
    const {name: studentName, level: studentLevel } = student;
    console.log(studentName,studentLevel);
  }

  // array의 경우
  const animals = ['개','고양이'];
  //before
  {
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  }

  //after
  {
    const [first, second] = animals;
    console.log(first, second);
  }
}

//Spread Syntax

{
  const obj1 = { key: 'key1'};
  const obj2 = { key: 'key2'};
  const array = [ obj1, obj2];
  
  //array copy
  const arrayCopy = [...array];
  console.log(array, arrayCopy);
  
  const arrayCopy2 = [...array, {key: 'key3'}];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);
  
  //object copy 
  const obj3 = {...obj1};
  console.log(obj3);
  
  //array concatenation
  const fruits1 = ['peach','berry'];
  const fruits2 = ['banana','kewii'];
  const fruits3 = [...fruits1,...fruits2];
  console.log(fruits);
  
  //object merge
  const dog1 = { dog1: 'dog'};
  const dog2 = { dog2: '소효맹'};
  const dog = { ...dog1, ...dog2};
  console.log(dog);
}


//Default parameters
{
  //before
  {
    function printMessage(message){
        if(message == null) {
          message = 'default message';
        }
      console.log(message);
    }
    
    printMessage('hello');
    printMessage();
  }
  
  //after
  {
    //초기값을 지정할 수 있다.
    function printMessage(message = 'default message') {
      console.log(message);
    }
    
    printMessage('hello');
    printMessage();
  }
}

//Ternary Operator
{
  const isCat = true;
  //before
  {
    let component;
    if(isCat) {
      component = 'cat';
    } else {
      component = 'dog';
    }
    console.log(component);
  }
  
  //after
  {
    const component = isCat ? 'cat' : 'dog';
    console.log(component);
    console.log(isCat ? 'cat' : 'dog');
  }
}

//Template Literals
{
  const weather = 'hot';
  const temparature = '27';
  
  //before
  console.loog(
    'Todaky weather is ' + weather + 'and temparature is ' + temparature + '.'
    );
  
  //after
   console.log(`Today weather is ${weather} and temparature is ${temparature}.`);
}

/*
ES11
*/

//Optional Chaining
{
  const person1 = {
    name: 'sori',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'joy',
      },
    },
  };
  const person2 = {
    name: 'joy',
  };
  
  //before
  {
    function printManger(person){
      console.log(person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);//error 발생
  }
  
  {
    function printManager(person) {
      console.log(
        person.job
        ? person.job.manager
        ?person.job.manager.name
        :undefined
        :undefined
      );
    }
    printManger(person);
    printManager(person2);
  }
  
  {
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2):
  }
  
  //after
  {
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }
    printManager(person1);
    printManager(person2);
  }
  
}

//Nullish Coalescing Operator
{
  {
    const name = 'sori';
    const userName = name || 'guest';//name이 빈값이거나 0이어도 'guest'로 지정된다.
    consoel.log(userName);
    
    const name = '';
    const userName = name || undefined;//name이 빈값이거나 0이어도 'guest'로 지정된다.
    consoel.log(userName);
  }
  
  //after
  {
    const name = '';
    const userName = name ?? 'guest';
    consoel.log(userName);
  }
}