ETC - 2021. 2. 19.

ECMAScript [ES6-11] 최신 문법 정리

안녕하세요 TriplexLab입니다.
오늘은 javascript ECMAScript [ES6-11] 최신 문법에 대해서 정리해보겠습니다.

👉Shorthand Property Names( 객체 초기자 )

/**
 * Shorthand Property Names
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer
 */

{
  const TripexLab1 = {
    name: 'Ellie',
    age: '18',
  };

  const name = 'Ellie';
  const age = '18';

  // 💩옛날 옛적에 사용했던 방법
  const TripexLab2 = {
    name: name,
    age: age,
  };

  // ✨ property에 키와 값이 동일하면 생략이 가능 합니다.
  const TripexLab3 = {
    name,
    age,
  };

  console.log(TripexLab1, TripexLab2, TripexLab3);
}

👉Destructuring Assignment ( 구조 분해 할당 )

/**
 * Destructuring Assignment
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 */

{
  // object
  const student = {
    name: 'TriplexLab',
    level: 1,
  };

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

  // ✨
  {
    const { name, level } = student; // object에 있는 키 네임을 중갈호안에 정의 해주고, student에 있는 키와 값은 각각의 name과 level에 맞에 할당이 됩니다.
    console.log(name, level);

    // 만약 다른 이름으로 선언하고 싶다면 다음과 깉이 하면 됩니다.
    const { name: YounHoSo, level: YounHoSoLevel } = student;
    console.log(YounHoSo, YounHoSoLevel);
  }

  // ✨
  // 배열에서도 동일하게 가능 합니다.
  {
    const animals = ['🐶', '🐱'];

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

👉Spread Syntax ( 전개 구문 )

/**
 * Spread Syntax
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
 */

{
  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  const arrayCopy = [...array]; // ...변수명 을 작성하면 간단하게 배열을 복사할수 있습니다.
  console.log(array, arrayCopy);

  // 새로운 아이템을 추가할때도 간단합니다.
  const arrayCopy2 = [...array, { key: 'key3' }];
  console.log(arrayCopy2);

  // array concatenation
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2]; // Spread연산을 통해서 병합이 가능합니다.
  console.log(fruits);

  // object merge
  /** Spread연산을 통해서 병합이 가능합니다.
   * 주의할점 키가 동일한 object를 병합한다면 제일 뒤에 있는 애가, 앞에 있는 애를 덮어씌기 합니다.
   * */
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
}

👉Default parameters ( 기본값 매개변수 )

/**
 * Default parameters
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters
 */

{
  // 💩
  {
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }

  // ✨ 함수 파라미터에 원하는 기본 값을 설정할수 있습니다.
  {
    function printMessage(message = 'default message') {
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }
}

👉Ternary Operator( 삼항 조건 연산자 )

/**
 * Ternary Operator
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
 */

{
  const isCat = true;
  // 💩
  {
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  }

  // ✨
  {
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');
  }
}

👉Template Literals

/**
 * Template Literals
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
 */

{
  const weather = '🌤';
  const temparature = '16°C';

  // 💩
  console.log('Today weather is ' + weather + ' and temparature is ' + temparature + '.');

  // ✨
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);
}

👉Optional Chaining (ES11)

/**
 * Optional Chaining (ES11)
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
 * 핫 트렌드, 코틀린, 스위트 같은 최신 언어에도 포함되어 있습니다.
 */
{
  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  const person2 = {
    name: 'Bob',
  };

  // 💩💩💩💩💩💩
  {
    function printManager(person) {
      console.log(person.job.manager.name);
    }
    printManager(person1);
    // printManager(person2);
  }

  // 💩💩💩
  {
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined
          : undefined
      );
    }
    printManager(person1);
    printManager(person2);
  }

  // 💩
  {
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);
  }

  // ✨ person에 job 있으면? manager 있으면? name을 출력해줘
  {
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }

    printManager(person1);
    printManager(person2);
  }
}

👉Nullish Coalescing Operator (ES11)

/**
 * Nullish Coalescing Operator (ES11)
 * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
 */
{
  {
    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName);
  }

  {
    const name = null;
    const userName = name || 'Guest';
    console.log(userName);
  }

  // 💩
  {
    const name = '';
    const userName = name || 'Guest';
    console.log(userName);

    const num = 0;
    const message = num || 'undefined';
    console.log(message);
  }

  // ✨
  {
    const name = '';
    const userName = name ?? 'Guest'; //name에 값이 있다면 name을 사용하고, name에 아무런 값이 없다면 Guest를 이용한다.
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined'; //num에 값이 있다면 num을 사용하고, num에 아무런 값이 없다면 undefined를 이용한다.
    console.log(message);
  }
}