자바스크립트/모던 자바스크립트

자바스크립트 클래스 1 - 기본 개념

자바스크립트 클래스 ES6 가 나오기 이전에는 프로토타입 체이닝을 이용해 객체를 객체지향의 상속과 비슷한 구현이 가능했다. new function() 을 이용했다. function 키워드가 클래스 생성자 역할까지 하려다보니 이 때 function 에 쓸데없는 것들이 많이 추가됐다. 결국 function 키워드는 화살표 함수의 등장으로 이제는 쓸 필요가 없다. (제너레이터 빼고) ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 컴퓨터 프로그래밍에서의 클래스 를 구현하는 것이 가능해졌다. 여전히 프로토타입도 이용하지만, 단순히 프로토타입만을 이용해서는 불가능하고 클래스로는 가능한 것들이 생겼다. 컴퓨터 프로그래밍에서의 클래스란? 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메..

ES6 이후에 새롭게 정의된 Object 편의 정적 메서드들

새롭게 추가된 Object 객체의 정적 메서드가 중요한 이유 현재 자바스크립트 표준을 정하는 ECMA 위원회의 의중이 가장 많이 반영된 메서드들이다. ECMA 위원회는 과거에 자바스크립트가 저지른 실수를 바로잡으려 한다. 그러나 하위 호환성을 완벽하게 유지해야 한다는 숙제가 있다. 그래서 ECMA 위원회는 기존의 것을 없애기보다 Object 쪽에 새로운 메서드들을 추가하며 그들의 현재 의중을 반영하고 있다. Object.assign() Object.assign(target, ...source); target 객체에 source 객체의 속성을 덮어씌운다. 마지막에 온 source 객체의 속성이 가장 나중에 덮어씌워지므로 승리한다. Object.assign() 은 엔진 내부에 있는 C 함수로 퍼포먼스가 매우..

모던 자바스크립트, 메서드 정의 문법과 super, [[HomeObject]]

메서드 정의와 super, [[HomeObject]] 메서드 정의 문법은 function 키워드 없이 객체 내에서 메서드를 선언하는 것이다. [[HomeObject]] 에 접근할 수 있도록 해준다. super 에 접근이 가능하다. const obj = { functionProperty: function() { // 함수 프로퍼티 문법 (function 키워드 사용) } method() { // 메서드 정의 (function 키워드와 ':' 이 없음) }, }; super 접근 예제코드 정말 메서드 문법에서만 super 에 접근 가능한지 확인해보자. 메서드 문법을 사용하지 않는 경우 const obj1 = { name: "Joe", toString: function () { return su..

모던 자바스크립트, 단축 속성 (shorthand properties)

단축 속성 (shorthand properties) 단축 속성 (shorthand properties) 은 프로퍼티의 키와 값이 동일할 때 키만 적어도 같은 이름의 변수 값을 값 영역으로 끌어온다. 예제 function getMinMax(nums) { const min = Math.min(...nums); const max = Math.max(...nums); return { min, max }; } getMinMax([1, 2, 3]); // {min: 1, max: 3}

모던 자바스크립트, 계산된 속성 이름 (computed property name)

계산된 속성 이름 (computed property name) 계산된 속성 이름 (computed property name) 은 표현식의 결과를 프로퍼티의 이름으로 쓸 수 있게 해준다. 예제1: 기본 사용법 const name = "answer"; const obj = { [name]: 100, }; console.log(obj); 예제2: 작동 순서 파악하기 let counter = 0; const obj = { [counter++]: counter++, [counter++]: counter++, }; console.log(obj); // {"0": 1, "2": 3} 인터프리터에 의해 해석되는 시점에 왼쪽에서 오른쪽으로 위에서 아래로 식이 하나씩 평가된다. let counter = 0; const g..

모던 자바스크립트, 프로토타입 얻기 설정하기 (getPrototypeOf, setPrototypeOf)

객체 프로토타입 얻기와 설정하기 Object.getPrototypeOf(o) 를 통해 객체의 프로토타입을 얻을 수 있다. ES5의 obj.__proto__ 와 같다. Object.setPrototypeOf(obj, proto) 를 통해 객체의 프로토타입을 설정할 수 있다. ES5의 obj.__proto__ = proto 와 같다. ES5 예제 소스코드 const proto = { greet() { console.log(`proto greet, name = ${this.name}`); }, }; const obj = Object.create(proto); console.log(obj.__proto__); // {greet: ƒ} obj.name = "Joe"; obj.greet(); // proto gre..

모던 자바스크립트, 심볼 (Symbol)

Symbol 이란? ES2015 에서 추가된 7번째 타입으로 원시 데이터 타입(primitive data type)이다. 전까지는 Boolean, null, undefined, Number, String, Object 가 있었다. 익명의 오브젝트 프로퍼티를 만드는데 이용된다. 이름 충돌이 없는 유일한 객체 프로퍼티를 만든다. 프로퍼티를 의도치 않은 노출로부터 보호한다. 자바스크립트 빌트인 객체에 이미 많이 쓰이고 있다. 이는 심볼을 이용해 빌트인 객체를 확장해서 쓰라는 의도도 있다. Symbol 추가가 갖는 의의 왜 굳이 고유한 객체의 키값이 필요할까? 문자열로 하면 안되는 걸까? 자바스크립트 언어 스펙을 정하는 사람들은 새로운 속성이나 메서드를 추가할 때 "다른 개발자들이 이미 쓰고있는 이름은 아닐까?..