민규의 개발블로그
자바스크립트 네이티브 본문

자바스크립트에는 네이티브라는 내장 함수(객체)가 있다.
가장 많이 쓰는 것들은 아래와 같다.
- String( )
- Number( )
- Boolean( )
- Array( )
- Object( )
- Function( )
- RegExp( )
- Date( )
- Error( )
- Symbol( ) -ES6에서 추가됨
이들은 생성자처럼 사용할 수 있지만 실제로 생성되는 결과물은 객체 래퍼다.
var a = new String("abc"); | |
typeof a // "object" |
내부 [[Class]]
typeof가 'object'인 값 등에는 [[Class]]라는 내부 프로퍼티가 추가로 붙는다. 이 프로퍼티는 직접 접근할 수 없고 Object.prototype.toString( )라는 메서드에 값을 넣어 호출함으로써 존재를 볼 수 있다.
ex) Object.prototype.toString.call([1,2,3]) // "[object Array]"
원시 값에는 null과 undefined는 "Null", "Undefined"와 같이 나타나고 그 밖의 문자열, 숫자, 불리언 같은 값들은
박싱 과정을 거친다.
ex) Object.prototype.toString.call(123) // "[object Number]"
원시 값에는 프로퍼티나 메서드가 없으므로 .length로 접근하려면 원시 값을 객체 래퍼로 감싸줘야 하는데 자바스크립트에서는 알아서 래핑 해준다.
함정
Boolean값인 false를 래핑하면 Boolean 이므로 아래와 같은 결과가 난다.
var a = new Boolean(false); | |
if(!a){ | |
console.log("hi") // 실행 ㄴㄴ | |
} |
언박싱의 경우 valueOf( ) 메서드로 추출한다.
var a = new Boolean(false); | |
a.valueOf(); // false |
배열, 객체, 함수, 정규식은 리터럴 형태로 생성하는 것이 일반적이지만 네이티브로 생성할 수도 있다.(비추)
배열 같은 경우에 아래와 같이 다르게 나타날 수도 있다.
왜 그런가 하니 join( )은 슬롯이 있다는 가정하에 length만큼 루프를 반복하지만 map( ) 함수는 그렇지 않다.
a.map( )은 함수가 순회활 원소가 없고 b는 undefined로 채워진 것을 순회한다.
var a = new Array(3); // 빈 배열 3개 만든다. | |
var b = [undefined, undefined, undefined] | |
a.join("-") // "--" | |
b.join("-") // "--" | |
a.map((v,i)=>i); // [undefined x 3] | |
b.map((v,i)=>i); // [0,1,2] |
빈 슬롯 말고 undefined 값 원소로 채워진 배열 생성법
해석은 (객체 바인딩 this) 부족하지만 apply( ) 함수에 첫 번째 인자 this에 null을 세팅 두 번째 인자는 인자의 배열에 { length:3 }(이는 펼쳐질 것)
따라서 0에서 length 직전까지 루프를 순회할 것이다.
var a = Array.apply(null,{length:3}) | |
a // [undefined, undefined, undefined] |
다른 것들에 비해 Date( )와 Error( )는 리터럴 형식이 없으므로 유용하다.
date 객체 값은 new Date( )로 생성한다. 날짜/시각을 인자로 받는다.
Error( ) 생성자는 앞에 new가 있든 없든 결과는 같다.
주 용도는 현재의 실행 스택 콘테스트를 포착하여 객체에 담는 것이다.
보통 throw 연산자와 함께 사용한다.
네이티브 프로토타입
내장 네이티브 생성자는 각자의 .prototype 객체를 가진다 ex) Array.prototype, String.prototype 등
프로토타입 위임 덕분에 원시 값도 기본적으로. prototype 객체에 정의된 메서드에 접근할 수 있다.
각 프로토타입마다 자신의 타입에 적합한 기능이 구현되어 있다.
네이티브 프로토타입을 변경할 수도 있지만 이는 바람직하지 못하다.
'Javascript' 카테고리의 다른 글
자바스크립트 문법 (0) | 2020.11.19 |
---|---|
자바스크립트 강제변환-2 (0) | 2020.11.17 |
자바스크립트 강제변환-1 (0) | 2020.11.16 |
자바스크립트 값 (0) | 2020.11.12 |
JavaScript 타입 (0) | 2020.11.11 |