모던 자바스크립트 핵심 가이드 #2

Spread operator (...)

ES6 (ES2015)에서 지원되기 시작한 연산자

String and spread

ES6 이전에는 split 메서드 사용해야만 했다고 합니다.

const str = 'hello';
const strArr = str.split('');

console.log(strArr);

ES6 부터는 split 필요없이 spread 연산자로도 배열생성 가능해졌다고 합니다.

const str = 'hello';
const strArr = [...str];

console.log(strArr);

결과:

['h', 'e', 'l', 'l', 'o']

Array rest and spread elements

const arr = [1, 2, 3, 4, 5];
cosnt [first, ...rest] = arr;

console.log(first);
console.log(rest);

1
[2, 3, 4, 5]

Object rest and spread properties

ES9 (ES2018) 에서 지원되기 시작했다고 합니다.

cosnt obj = {
  name: 'kim',
  age: 100
};

const obj2 = { ...obj };

출처:
https://v8.dev/features/object-rest-spread

ES6부터 지원되는 객체 문법

객체 프로퍼티 줄임식 표현 생성

ES6 이전

const name = 'kim';
const age = 100;

// 프로퍼티 줄임식 생성이 지원되지 않습니다.-
const obj = {
	name: name,
    age: age
};

ES6

const name = 'kim';
const age = 100;

const obj = {
	name,
    age
};

Concise method syntax

ES6이전

const obj = {
  speakName: function () {
  }
};

ES6

const obj = {
  speakName() { 
  }
};

Computed Property

변수에 할당된 값(boolean, number, string, null, undefined 가능)
이 할당된 값을 프로퍼티 키로 쓰고 싶을때 사용하는 문법입니다.

ES6 이전

const name = 'myName";
const obj = {};

obj[name] = 'kim';

ES6

const name = 'myName';
const obj = {
  [name]: 'kim'
};

객체 리터럴 생성과 동시에 계산된 프로퍼티를 사용하여 프로퍼티 생성 가능합니다.

Symbol

Symbol은 ES6 부터 지원되는 원시 데이터 타입이라고 합니다.

사용법은 아래와 같으며 같은 값을 가지고 있어도 각각의 값이 고유성을 가지게 되어 같은 값이 될 수 없다고 합니다. 고유성을 부여할때 사용하는 데이터 타입이라고 이해했습니다.
열거하는게 가능하지도 않기 때문에 Object 클래스의 static 메서드 Object.getOwnPropertySymbols()를 사용해야한다고 합니다.

const a = Symbol('a');
const b = Symbol('a');

console.log(a == b);
console.log(a === b);

false
false

객체 내에 같은 프로퍼티 키값이 필요한데 구별을 해줘야하는 경우 Symbol타입으로 프로퍼티 키값을 생성하여 값이 같아보이더라도 고유성을 부여해 구별해줄 수 있다고 합니다.

const office = {
  [Symbol('front-end')]: 'park',
  [Symbol('front-end')]: 'jin',
  [Symbol('back-end')]: 'kim',
};

const symbols = Object.getOwnPropertySymbols(office);
console.log(symbols);

[Symbol(front-end), Symbol(front-end), Symbol(back-end)]

const office = {
  [Symbol('front-end')]: 'park',
  [Symbol('front-end')]: 'jin',
  [Symbol('back-end')]: 'kim',
};

const symbols = Object.getOwnPropertySymbols(office);
const names = symbols.map(symbol => office[symbol]);
console.log(names);

['park', 'jin', 'kim']

Class

프로토타입 상속을 통한 Syntactic Sugar 라고 합니다.
실제로 자바스크립트 내부적으로 클래스 상속 기능이 구현되어있는 건 아니라고 합니다.

class Duck {
  constructor(name) {
    this.name = name;
  }
  
  quack() {
    console.log('quack!');
  }
}

const firstDuck = new Duck('first');
const secondDuck = new Duck('second');

firstDuck.quack();
secondDuck.quack();

위 클래스의 원래 모습인 자바스크립트 프로토타입 상속을 직접적으로 구현할때는 아래와 같다고 합니다.

function Duck(name) {
  this.name = name;
}
Duck.prototype.quack = function () {
  console.log('quack!');
}

const firstDuck = new Duck('first');
const secondDuck = new Duck('second');
firstDuck.quack();
secondDuck.quack();