💡 ES6(2015) useful latest grammers

✍️ Shorthand property names

MDN's Object initializer (객체 초기자)

  const something = {
    name: 'juhwan', // object는 항상 key와 value로 이루어진다.
    age: '20',
  };

  const name = 'juhwan';
  const age = '20';

  // 💩
  const something2 = {
    name: name,
    age: age,
  };

  // ✨
  const something3 = {
    name,
    age,
  };

  console.log(something1, something2, something3);

✍️ Destructuring Assignment

MDN's Destructuring Assignment (구조 분해 할당)

  // object
  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);
  }

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

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

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

✍️ Spread Syntax

MDN's 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' }];

  // object가 가리키고 있는 변수는 실제로 담고 있는 것이 아니라
  // 들어있는 메모리의 주소를 가리킨다.
  // 그러므로 원래의 오브젝트를 변환하면 모두에게 적용된다.
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

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

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

  // object merge
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  // key가 동일하다면 뒤의 object가 앞의 object를 덮어 씌운다.
  const dog = { ...dog1, ...dog2 };
  console.log(dog);

✍️ Default parameters

MDN's 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(); // default 값을 반환한다.
  }

✍️ Ternary Operator

MDN's Ternary 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

MDN's 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(2020) useful latest grammers

✍️ Optional Chaining

MDN's Optional Chaining

const person1 = {
  name: 'Ellie',
  job: { // obj 안에 obj
    title: 'S/W Engineer',
    manager: {
      name: 'Bob',
    },
  },
};
const person2 = {
  name: 'Bob',
};

// 💩💩💩💩💩💩
{
  function printManager(person) {
    console.log(person.job.manager.name);
  }
  // 문제 없이 출력이 된다.
  printManager(person1); 
  // manager가 없기 때문에 type error가 뜬다.
  // 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) {
    // code가 중복돼서 좋지 않다.
    console.log(person.job && person.job.manager && person.job.manager.name);
  }
  printManager(person1);
  printManager(person2);
}

// ✨
// kotlin이나 swift같은 최신 언어에도 포함되어 있다.
{
  function printManager(person) {
    console.log(person.job?.manager?.name);
  }
  printManager(person1);
  printManager(person2);
}

✍️ Nullish Coalescing Operator

MDN's Nullish Coalescing Operator

// Logical OR operator
// false: false, '', 0, null, undefined
{
  const name = 'juhwan'; // true 이므로 name 할당
  const userName = name || 'Guest';
  console.log(userName);
}

{
  const name = null; // false 이므로 뒤의 guest 할당
  const userName = name || 'Guest';
  console.log(userName);
}

// 💩
{
  // bug! 문자열이 비어있거나 0인 경우에도 뒤의 값이 할당된다.
  // || 연산자는 false의 특지을 잘 알지 못하면 bug로 고생하게 된다.
  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);
}

출처
'드림코딩'님의 자바스크립트 최신 문법