자바스크립트(JavaScript) ES6, ES11 문법 간단 정리

1. Shorthand property names

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

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

// key와 value의 이름이 같을 경우 object를 다음과 같이 초기화 할 수 있다.
const ellie2 = {
  name, // name: name
  age, // age: age
};

 

---

2. Destructuring assignment

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

{
  // const name = student.name;
  // const level = student.level;
  const { name, level } = student;
  
  console.log(name, level); // Anna 1
  
  // key의 이름을 변경하면서 value를 할당해 줄 수 있다.
  const { name: studentName, level: studentLevel } = student;
  console.log(studentName, studentLevel); // Anna 1
}

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

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

---

3. Spread syntax

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

  // array copy
  const arrayCopy = [...array];
  
  // 배열을 복사하면서 배열의 마지막 인덱스에 새로운 원소를 추가
  const arrayCopy2 = [...array, { key: 'key3' }];
  
  // *매우중요
  // Spread Syntax는 배열의 참조값을 가져오는 것이기 때문에
  // obj1의 key를 변경하면 array를 참조하고있는
  // arrayCopy와 arrayCopy2 모두 변경된 값이 나온다.
  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: '🐶' };
  
  // object의 key가 동일하면 2번째있는 object의 key가 덮어씌운다.
  const dog = { ...dog1, ...dog2 };
  console.log(dog); // {dog: "🐶"}
}

---

4. Default parameters

// 함수를 정의할 때 파라미터에 기본값을 정해줄 수 있다.
function printMessage(message = 'default message') {
  console.log(message);
}

printMessage('hello'); // hello
printMessage(); // defalut message

---

5. Ternary Operator

const isCat = true;

// 삼항 연산자
const component = isCat ? '😸' : '🐶';
console.log(component);
console.log(isCat ? '😸' : '🐶');

// ES6 이전 자바스크립트에 삼항 연산자가 없었다니...

---

6. Template Literals

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

// 백틱(`)으로 감싸서 ${variable} 이렇게 사용한다.
console.log(`Today weather is ${weather} and temparature is ${temparature}.`);

// 템플릿 리터럴 안에서 백틱 사용법은 \(백슬러쉬)를 사용한다.
// console.log(`\`` === "`")
// true

// 뉴라인(\n)을 쓸 필요 없음
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

---

7. Optional chaining (ES11)

// object
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); // Bob
printManager(person2); // undefined

---

8. Nullish Coalescing Operator (ES11)

{
  // Logical OR operator
  // false: false, '', 0, null, undefined
  {
    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName); // Ellie
  }

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

  // 💩
  // name이랑 num에 값이 있어도 '', 0은 false로 취급되기 때문에
  // Guest와 undefined가 출력됨
  {
    const name = '';
    const userName = name || 'Guest';
    console.log(userName); // Guest

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

  // ✨
  {
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName); // 

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

 

출처 : github.com/dream-ellie/learn-javascript/tree/master/notes/es6-11,

www.youtube.com/watch?v=36HrZHzPeuY&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=23