자바스크립트

자바스크립트 오브젝트 프로퍼티의 순서

오브젝트 프로퍼티의 순서 자바스크립트 오브젝트 프로퍼티에 순서가 있다. 자바스크립트는 이를 이용해 배열을 구현한다. 배열은 사실 length 속성을 가진 객체이다. 객체 프로퍼티 정렬 규칙 객체의 프로퍼티는 아래의 우선순위를 갖고 정렬된다. 1: 숫자 오름차순으로 정렬된다. 2: 문자열 생성된 순서대로 정렬된다. 3: 심볼 생성된 순서대로 정렬된다. const obj = { 2: "b", 3: "c", 1: "a", }; obj["test3"] = "test3"; obj["test1"] = "test1"; obj["test5"] = "test5"; obj[Symbol.for("test")] = "test symbol"; obj[0] = "zero"; console.log(obj); // {0: '..

Object.prototype.valueOf() 란?

Object.prototype.valueOf() 란? Object 에서는 기본 동작으로 this 를 Object 형태로 변환해 반환한다. 기본 정의를 오버라이드하여 쓰는 경우가 많다. 보통은 자바스크립트에서 오브젝트를 primitive value 로 변환하기 위해 사용하는 메서드이다. 직접 호출하는 경우는 드물고 보통은 자동으로 호출된다. const o = {}; const str = "test string"; console.log(Object.prototype.valueOf.call(o)); // {} console.log(Object.prototype.valueOf.call(str)); // String {'test string'} console.log(new Object(str)); ..

자바스크립트의 Symbol.toPrimitive 란?

Symbol.toPrimitive 란? 잘 알려진 심볼 중 하나이다. 강제 타입변환 시에 타입변환 힌트를 받아들이고, 어떤 원시 타입을 반환할지에 대한 메서드를 정의할 수 있다. 객체를 primitive value 로 변경하는 강력한 방법을 제공한다. JS 에서는 다양한 경우에 값을 강제로 변환한다. ex) +object 인 경우 숫자로 강제 변환한다. String(object) 인 경우엔 문자열로 변환한다. 내부적으로 hint 라는 인자를 받게 된다. number, string, default 중 하나를 받아 선호하는 타입이 무엇인지 체크할 수 있다. 모든 타입 변환 알고리즘에서 우선순위를 갖는다. toString() 이나 valueOf() 보다 앞선 우선순위를 갖는다. toString() 은 해당 타..

데이터 프로퍼티 (data property)와 접근자 프로퍼티 (accessor property) 란?

프로퍼티의 종류 프로퍼티의 종류는 데이터 프로퍼티(Data property) 와 접근자 프로퍼티(Accessor property) 가 있다. 접근자 프로퍼티 (Accessor property) 란? Descriptor 에서 정의하는 아래 함수들을 말한다. get (getter 함수) set (setter 함수) 데이터 프로퍼티 (Data property) 란? value 로 표현되는 모든 프로퍼티를 말한다.

자바스크립트의 Descriptor 란? (feat. Object.defineProperty())

Descriptor 속성들 Object.defineProperty 의 3번째 파라미터에 들어가는 내용이다. 객체의 프로퍼티는 descriptor 를 갖는다. 우리는 보통 객체 프로퍼티의 key 와 value 만 설정해주기 때문에 descriptor 를 직접 볼 일은 많지 않다. descriptor 에는 아래의 옵셔널 속성이 존재한다. value: 프로퍼티 값 writable: 프로퍼티의 수정 가능 여부 enumerable: 프로퍼티의 열거(iterate) 가능 여부 configurable: 프로퍼티의 삭제 혹은 수정 가능 여부 (writable 보다 더 엄격한 버전) Object.defineProperty(obj, prop, descriptor); configurable 프로퍼티의 속성을 변경할 수 있는..

웹 개발자를 위한 자바스크립트의 모든 것 4장 클래스

자바스크립트 클래스 ES6 가 나오기 이전에는 프로토타입을 이용해 클래스처럼 구현하는 것이 가능했다. ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 클래스를 구현하는 것이 가능해졌다. 클래스 기본 문법 살펴보기 class Color { constructor(r = 0, g = 0, b = 0) { this.r = r; this.g = g; this.b = b; } get rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`; } set rgb(value) { // TODO ... } toString() { return this.rgb; } static fromCSS(css) { // TODO ... } } let c = new Color(30, 144..

자바스크립트의 splice() 함수에 대해 설명해보세요.

splice() 메서드란? Array.prototype.splice() 와 같이 내장 객체인 Array 의 프로토타입에 존재한다. 원본 배열을 변화시키는 함수이다. 원소를 제거(remove) 하거나, 대체(replace) 하거나, 추가(add) 할 수 있다. 원본 배열을 변화시키는 점이 싫다면, slice() 를 이용하는 것이 좋다. const months = ["Jan", "March", "April", "June"]; months.splice(1, 0, "Feb"); // inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, "M..

DOM 엘리먼트에 Array Prototype 내장 함수 이용하는 방법

DOM 엘리먼트에 Array 내장 함수를 이용하는 방법 a b c 위와 같이 HTML 에 3 개의 div 가 있을 때, 모든 div 를 잡아서 내용이 b 인것만 남기고 싶다고 해보자. const divs = document.querySelectorAll("div"); divs.filter((e) => e.textContent === "b"); // Uncaught TypeError: divs.filter is not a function" 위와 같이 filter 메서드를 사용하면 편할 것 같은데, 바로 사용이 되지는 않는다. const divs = document.querySelectorAll("div"); const filtered = Array.prototype.filter.call( divs, (e)..

Symbol.species 심볼과 용례

Symbol.species 란? Symbol 오브젝트에서 기본으로 제공하는 Well-known symbol 중 하나이다. 파생된 오브젝트를 만들기 위해 생성자에서 이용하는 Function-valued 프로퍼티를 명시한다. @@species 접근자 프로퍼티는 서브 클래스에서 이를 이용해 기본 생성자를 오버라이드 할 수 있게 해준다. 예제 코드 @@species 오버라이드 해보기 class SubArray extends Array {} const subArray = new SubArray(1, 2, 3).map((e) => e * 2); console.log(subArray instanceof SubArray); // true console.log(subArray instanceof Array); // tr..

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

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

웹 개발자를 위한 자바스크립트의 모든 것 3장 새로운 함수 기능

화살표 함수와 this, super, 그 외 화살표 함수 화살표 함수는 ES6 에서 새로 도입되었다. 쉼표 연산자 (Comma Operator) 를 사용하여 map 반환하기 MDN - Comma Operator handlers = handlers.map((handler) => (unregister(handler), register(handler))); 쉼표로 이어진 값을 평가하고 가장 마지막 값을 반환한다. map 의 본문을 간략화하고 싶을 때 사용할 수 있다. 이런식으로 사용하는 것을 추천한다기보다는 간혹 이런식으로 작성된 코드를 볼 수 있어서 알아두면 좋다. 화살표 함수의 this this 를 갖지 않는다. 대신 바로 바깥 스코프의 this 를 가진다. 화살표 함수는 new 키워드로 생성할 수 없지만..

오브젝트 리터럴 ('{}') 이 new Object() 보다 빠른 이유

오브젝트 생성, {} 와 new Object() 의 퍼포먼스 차이 console.time("new Object"); for (var i = 0; i < 200000; i++) { var arr = new Object(); } console.timeEnd("new Object"); console.time("object literal"); for (var i = 0; i < 200000; i++) { var arr = {}; } console.timeEnd("object literal"); 두 오브젝트 생성의 퍼포먼스를 콘솔로 찍어보면, 오브젝트 리터럴({}) 형태가 더 성능이 좋게 나온다. 그 이유는 constructor 함수 호출에 있다. new 키워드는 얼핏 보면, 단순히 객체를 생성하는 것 같지만 실..