[JS] ES6+ 문법 정리

📚 ES6

📌 Shorthand property names

const name = 'haesa';
const age = '22';
  
// 💩
const haesa1 = {
  name: name,
  age: age,
};

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

오브젝트를 만들 때 key와 value의 이름이 같다면 하나로 축약해서 작성할 수 있다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

 

 

 

 

 

📌 Destructuring Assignment

Object

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

// 💩
const name = student.name;
const level = student.level;

// ✨
const { name, level } = student;
const { name: studentName, level: studentLevel } = student;

오브젝트의 프로퍼티를 각각 변수에 할당할 때 동일한 이름의 key를 중괄호 안에 넣고, 오브젝트를 할당해주면 각 key에 맞는 value들이 변수에 할당된다.

{}안에 변수 이름이 오브젝트의 key로 존재하지 않는다면 undefine이 할당된다.

만약 key가 아닌 다른 이름으로 할당하고 싶다면 콜론(:) 뒤에 변경하고자 하는 이름을 작성하면 된다.

 

 

ex)

name에는 name이라는 key가 가지고 있는 value가, 즉 'Anna'가 할당되고 level에는 1이 할당된다.

 

 

 

Array

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

// 💩
const first = animals[0];
const second = animals[1];

// ✨
const [first, second] = animals;

배열도 마찬가지로 대괄호 안에 변수를 넣고 배열을 할당해주면 각 인덱스 순서에 맞게 배열의 요소들이 변수에 할당된다.

 

ex) first에는 animals[0]가 second에는 animals[1]가 할당된다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

 

 

 

 

📌 Spread Syntax

Object

// object copy
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const obj3 = { ...obj1 };

// object merge
const dog1 = { dog: '🐕' };
const dog2 = { dog: '🐶' };
const dog = { ...dog1, ...dog2 };

오브젝트의 값들을 하나씩 꺼내서 새로운 오브젝트를 생성할 수 있다.

또한 Spread Syntax를 연달아 사용하면 여러 오브젝트의 병합도 가능하다.

이때 key가 동일한 오브젝트를 병합하게 되면 제일 뒤에 있는 요소가 앞의 요소를 덮어 씌우게 된다.

 

 

 

Array

// array copy
const array = [obj1, obj2];
const arrayCopy = [...array];
const arrayCopy2 = [...array, { key: 'key3' }];

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

배열안의 요소를 하나씩 꺼내서 새로운 배열을 만들 수 있다.

이때 배열의 요소가 오브젝트인 경우 오브젝트의 참조값을 복사해온다.

오브젝트와 마찬가지로 Spread Syntax를 연달아 사용하면 배열의 병합도 가능하다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

 

 

 

 

 

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

함수에 인자값이 주어지지 않았을 때 기본값이 할당된다.

더 정확히 말하자면 전달된 인자의 값이 undefined이면 파라미터에 default 값이 할당된다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

 

 

 

 

 

📌 Ternary Operator

const isCat = true;

// 💩
let component;
if (isCat) {
  component = '😸';
} else {
  component = '🐶';
}

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

참과 거짓에 따라 각기 다른 연산을 수행하고자 할 때 사용할 수 있다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

 

 

 

 

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

백틱을 사용하면 문자열과 변수를 한 번에 표현할 수 있다.

변수를 작성할 때는 ${}을 사용하면 된다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

 

 

 

 

 

📚 ES11

📌 Optional Chaining

const person1 = {
  name: 'Haesa',
  job: {
    title: 'S/W Engineer',
    manager: {
      name: 'Sara',
    },
  },
};
  
const person2 = {
  name: 'Sara',
};

 

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

person1에는 job이 있지만, person2에는 job이 없기 때문에 printManager에 person2를 전달하면 에러가 발생한다.

위 함수처럼 프로퍼티에 조건 없이 그냥 접근하는 것은 좋지 않다.

 

 

 

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

그렇다면 위에서 정리한 Ternery Operator를 사용하면 어떨까?

Ternery Operator를 중첩해서 작성할 수 있겠지만 가독성이 떨어진다.

 

 

 

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

Optional Chaining은 위 코드들의 문제점을 한 번에 해결해준다.

person.job이 있으면 manager에 접근, manager가 있으면 name에 접근해준다.

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

 

 

 

 

 

📌 Nullish Coalescing Operator

// Logical OR operator
// falsy: false, '', 0, null, undefined

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

값이 무언가 제대로 할당되지 않았을 때를 대비해서 기본값을 설정해주기 위해 || Operator를 사용할 수 있다.

 

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

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

그런데 위처럼 변수에 ''과 0이 할당되었음에도 불구하고 이들을 false로 평가해서 기본값으로 설정되는 경우가 발생할 수 있다.

 

 

 

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

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

Nullish Coalescing Operator를 사용하면 위 예제들보다 더 명확하게 작성할 수 있다.

?? operator 앞의 데이터가 null이거나 undefined라면 ?? operator 뒤의 코드가 실행된다.

 

ex)

name이 있다면 name을 쓰고, 없다면 'Guest'

num이 있다면 num을 쓰고, 없다면 'undefined'

 

🔗 MDN 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator