javascript-22: ES6와 ES11 유용한 문법 & 사용법

ES6 , ES11 문법 및 사용법

1. ES6

1.Shorthand property names

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

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

💩
  const ellie2 = {
    name: name,
    age: age,
  };

✨
  const ellie3 = {
    name,
    age,
  };

  console.log(ellie1, ellie2, ellie3);

2.Destructuring Assignment

  const student = {
    name: 'Anna',
    level: 1,
  };

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

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

    const { name: studentName, level: studentLevel } = student;
    console.log(studentName, studentLevel);

3.array

const animals = ['🐶', '😽'];

💩
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);

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

4.Spread Syntax

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

4-1 array copy

  const arrayCopy = [...array];
  console.log(array, arrayCopy);
    
  const arrayCopy2 = [...array, { key: 'key3' }];  //새로운 key 추가
  obj1.key = 'newKey';  //원래의 key를 바꿔버리면 복제한 다른key들까지 같이 바뀜
  console.log(array, arrayCopy, arrayCopy2);

4-2 object copy

  const obj3 = { ...obj1 };
  console.log(obj3);

4-3 array concatenation

  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

4-4 object merge

  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);

5.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();

6.Ternary Operator

  const isCat = true;

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

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

7.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}.`);
}

ES11

1. Optional Chaining (ES11)

  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);

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

2.Nullish Coalescing Operator (ES11)

• Logical OR operator
• false: false, ‘’, 0, null, undefined

    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';
    console.log(userName);

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