[JavaScript] 자바스크립트 ES6에 대해 더 깊게 알아보자

[JavaScript] ES6 문법을 알아보자 (ECMAScript 2015)

일전에 이런 포스트를 작정했습니다만 ECMAScript 2015만 정리했고, 내용도 교육용 사이트인 W3schools에서 대표적인 문법만 추려놓은 거라 빠진 부분이 많았죠.

 

그래서 이번엔 이 책을 읽으면서 몰랐던 부분을 정리하고자 합니다... (아니 몰랐던 부분은 왜 이렇게 매번 튀어나오는 거지?)

 

객체 관련(5장)

1. 계산된 속성 이름(computed property name) 추가

// ES5
var info = {};
info["job"] = "freelancer"

// ES6
const info = {
    ["job"]: "freelancer"
};

객체에서 이름이 변수인 속성을 추가할 때, ES5에서는 먼저 객체를 만들고 속성을 추가해야 했으나 ES6에서는 객체 정의 시 같이 정의가 가능하다.

 

 

 

2. 단축 속성(shorthand property)

// ES5
var name = "doringri", age = 10;
var info = {
    name: name,
    age: age
};

// ES6
const name = "doringri", age = 10;
const info = {
    name,
    age
};

사실상 이 포스팅의 계기가 된 문법......

속성의 이름을 생략하면 변수명이 속성의 이름이 된다.

 

 

 

3. 객체의 프로토타입 get, set

프로토타입(prototype)에 대한 선수지식이 필요함.

 

자바스크립트에서 클래스가 추가된 것은 ES6부터이다.

그럼 그 전까지는 어떻게 객체를 만들 수 있었을까?

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다.

클래스 없이도 프로토타입을 이용해서 객체를 생성할 수 있는 것이다.

 

자바스크립트의 모든 객체는 부모 객체와 연결되어 있으며, 이 부모 객체를 프로토타입 객체라고 한다.

console.dir()로 객체 구조를 출력해 보면 [[Prototype]] 이라는 숨겨진 속성이 보일 것이다.

__proto__ 를 통해 프로토타입에 접근이 가능하다.

 

어디에 쓰일까? 보통 아래 코드로 최적화에 응용된다,

// prototype 최적화 전
function Obj() {
    this.greet = function () {
        console.log("hi");
    }
}

const obj = Obj();


// prototype 최적화 후
const proto = {
    greet: () => console.log("hi")
};

const obj = Object.create(proto);

최적화 전엔 객체를 만들 때마다 greet 메서드를 중복 생성하고, 메모리를 차지하는 문제가 있었지만 최적화 후에 해결된다.

 

참고로 ES6에 나온 클래스도 이와 같은 원리로 자동 최적화된다. 메서드가 각 객체마다 중복 생성되지 않고 프로토타입에 한 번만 정의되는 것이다.

 

 

프로토타입 객체는 __proto__를 통해 동적으로 변경이 가능하기 때문에, 객체의 상속을 구현할 수 있다.

그러나 이제 다른 방법을 이용한다. (getPrototypeOf, setPrototypeOf)

const proto = {
    greet: () => console.log("hi")
};

const proto2 = {
    greet: () => console.log("hello")
};

const obj = Object.create(proto);
obj.greet();    // hi

Object.setPrototypeOf(obj, proto2);
obj.greet();    // hello

 

이런 방법이 있긴 하지만 사실 객체를 만든 후 프로토타입을 변경하는 것은 성능상 좋지는 않다...고 한다.

권장되는 방법은 create로 객체를 만들 때 프로토타입을 한 번 정의한 후 바꾸지 않는 것이다.