자바스크립트/개념

전개 구문, 속성 스프레드 구문 (Spread Syntax) 이란?

전개 구문, 속성 스프레드 구문 (Spread Syntax) 이란? ... 이라는 표현을 통해, 오브젝트 내부의 요소들을 전개할 수 있다. iterable 한 오브젝트에 사용 가능하다. ex) string, array, {} 오브젝트 리터럴 ({}) 의 경우에는 enumerable 한 프로퍼티를 순회하는 형식이다. 생긴 건 Rest Syntax 와 흡사한데, 역할이 다르다. Rest Syntax 는 파라미터나 프로퍼티를 모으는 역할 이지만 Spread Syntax 는 오브젝트 내부의 요소들을 하나씩 늘어뜨리는 역할이다. 다른 객체의 속성이 모두 포함된 객체를 만들 때 유용하다. "불변" 방식으로 프로그래밍할 때 일반적이다. null 이나 undefined 가 뒤에 와도 에러를 내뱉지 않는다. 의도된 것이..

자바스크립트 Object.assign() 메서드란?

Object.assign() 이란? target 이 된 오브젝트에 source 오브젝트의 프로퍼티 내용을 덧씌우고 싶을 때 유용한 메서드이다. 단, enumerable own properties 만 복사되므로 유의해야 한다. 새로운 객체를 만드는 방식이 아닌, 기존의 객체를 수정하는 방식으로 불변 작업이 아니다. 예제 코드들 const defaultOptions = { title: "ABC", text: "default text", }; const customOptions = { text: "custom text", }; const finalOptions = Object.assign({}, defaultOptions, customOptions); console.log(finalOptions); // {t..

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

오브젝트 프로퍼티의 순서 자바스크립트 오브젝트 프로퍼티에 순서가 있다. 자바스크립트는 이를 이용해 배열을 구현한다. 배열은 사실 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 프로퍼티의 속성을 변경할 수 있는..

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

오브젝트 리터럴 ('{}') 이 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 키워드는 얼핏 보면, 단순히 객체를 생성하는 것 같지만 실..

Array.prototype.sort() 자세히 알아보기

자바스크립트 내부 배열 정렬 (Array.prototype.sort()) sort() 메서드는 in place 메서드이다. 입력값을 직접 변화시킨다. 입력 참조를 그대로 반환한다. 복사본을 만들지 않는다. 문자열을 넣으면 UTF-16 유니코드 값으로 정렬한다. 구현 방식은 자바스크립트 엔진에 따라 다르다. 예제 const months = ["March", "Jan", "Feb", "Dec"]; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expec..

자바스크립트 클래스 간단 정리

개요 클래스는 오브젝트를 만들기 위한 템플릿이다. 데이터와 데이터를 조작하는 코드를 하나로 추상화한다. JS 클래스는 프로토타입을 기반으로 빌드되었지만 ES5 의 클래스 같은 의미와는 다른 문법과 의미를 가진다. 클래스 정의 JS 의 &#39;특별한 함수&#39;이다. JS 에서는 모든 것이 오브젝트로 표현 가능하다는 점을 염두에 두자. 구조 클래스 문법에는 2가지 구성 요소가 있다. 클래스 선언 (Class Declaration) 클래스 표현식 (Class Expression) 클래스 선언 (Class Declaration) 알아보기 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 호이..

자바스크립트 호이스팅 매우 간단히 정리

정의 자바스크립트 호이스팅은 인터프리터가 코드 실행 전 함수, 변수, 클래스 선언 등을 스코프의 맨 위로 올리는 프로세스를 말한다. 호이스팅은 코드가 선언되기 전 함수가 안전하게 사용될 수 있게 한다. 변수와 클래스 선언 또한 호이스팅된다. 그래서 선언 전에도 참조될 수 있다. 그러나 그런식으로 코드를 작성하는 것은 권장하지 않고, 예상치 못한 에러를 낼 수 있다. 에러를 예방하고 싶다면, 자바스크립트는 선언만 호이스팅하고 초기화는 호이스팅하지 않는다는 것을 기억해야 한다. let, const 를 포함한 ECMAScript 2015 언어 명세 이전에는 호이스팅이 Javascript 의 실행 컨텍스트에서 동작방식을 표현하는 일반적인 방법이었다. 함수 호이스팅 예제 catName("Tiger"); funct..