[JavaScript] 최신 문법 정리 (ES6 이후)

자바스크립트의 혁명이라 할수 있는 ECMASript 2015(ES6) 이후 추가된 자바스크립트 최신 문법 중 자주 이용할 것 같은 기능들을 추려 정리해보는 시간이다.

연산자

지수 연산자

2**3 //8

• 곱셈 기호를 두 번 쓰면 제곱으로 처리된다.

Numeric separators

• 100000000000000과 과 같은 단위가 큰 숫자의 가독성을 높일 수 있게 언더바(_)로 단위를 구분할 수 있는 표현이 허용된다.
• ex) 1_000_000_000_000과 같이 천 단위로 끊어서 표기를 하는 것이 가능하기 때문에 0의 개수를 일일이 세어 볼 필요 없이 1000억이라는 숫자임을 조금 더 쉽게 알 수 있다.
• 구분자는 임의의 위치에 맘대로 삽입 가능하다.
• 그냥 구분자 표현하는 것일뿐 구분자가 있다고 해서 숫자가 달라지거나 그러지 않는다.

console.log(1_000_000_000 + 10_000); // 1000010000
console.log(1_00_00_00 + 10_0); // 1000100

Tagged Template Literal

• 함수의 실행을 템플릿 리터럴로 구현

const text = (...args) => console.log(args);
 
text`너의 정체가 도대체 뭐니?`; 
// [["너의 정체가 도대체 뭐니?", raw: ['너의 정체가 도대체 뭐니']]]
 
 
const a = '정체가';
const b = '뭐니?';
 
test`너의 ${a} 도대체 ${b}`; 
// [['너의 ', ' 도대체 ', ' ', raw: ['너의 ', ' 도대체 ', '']], '정체가', '뭐니?']

Shorthand property names

• 프로퍼티 이름과 value값의 변수이름과 동일할때는 하나로 생략 가능

const brie1 = {
  name: 'brie',
  age: '18',
};
const name = 'brie';
const age = '18';
 
 
// 💩
const brie2 = {
  name: name,
  age: age,
};
 
// ✨
const brie3 = {
  name,
  age,
};

let room = {
  number: 23,
  name: "hotel",
  toJSON() {
    return 9999;
  }
};
 
let meetup = {
  title: "Conference",
  room
};

Destructuring Assignment

• 구조분해 문법
• 객체, 배열안의 원소값들을 바깥 변수로 한번에 빼서 사용하기 위한 기법

// object
const student = {
  name: 'Anna',
  level: 1,
};
 
 
// 💩 
const name = student.name;
const level = student.level;
console.log(name, level); // Anna 1
 
// ✨
const { name, level } = student;
console.log(name, level); // Anna 1
 
const { name: studentName, level: studentLevel } = student;
console.log(studentName, studentLevel); // Anna 1

// 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

• 전개연산자
• 객체나 배열의 안의 요소들을 펼쳐 복사에 이용. 자기 자신 객체, 배열은 영향 안받음
• 함수의 아규먼트에 쓰이면, 나머지 연산자로 작용. 나머지 인자값들을 모아 배열로 생성

const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
 
// array copy
const arrayCopy = [...array];
console.log(arrayCopy); // [ { key: 'key1' }, { key: 'key2' } ] 
 
const arrayCopy2 = [...array, { key: 'key3' }];
obj1.key = 'newKey'; // array배열은 래퍼런스 값을 갖고있는 배열이다. 그래서 전개연산자로 복사하여도 
                     // 레퍼런스 변수는 복사로 취급하지만, 그걸 잇는 주소연결은 똑같다.
console.log(array); // [ { key: 'newKey' }, { key: 'key2' } ]
console.log(arrayCopy2); // [ { key: 'newKey' }, { key: 'key2' }, { key: 'key3' } ]
 
// object copy
const obj3 = { ...obj1 };
console.log(obj3); // { key: 'newKey' }
 
// array concatenation
const fruits1 = ['🍑', '🍓'];
const fruits2 = ['🍌', '🥝'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits); // [ '🍑', '🍓', '🍌', '🥝' ]
 
// object merge
const dog1 = { dog: '🐕' };
const dog2 = { dog: '🐶' };
const dog = { ...dog1, ...dog2 };
console.log(dog); // { dog: '🐶' }