[JavaScript]자바스크립트 네이티브

 

저번 포스팅에 이어서 'You Don't Know JS'교재를 이용한 자바스크립트 문법에 대해서 정리해보겠습니다. 💙

이번 포스팅으 3강 네이티브에 대한 내용입니다.

---

 

네이티브

내장 함수로 볼수 있으며, 특정 환경에 종속되지 않은, ECMAScript 명세의 내장 객체를 말합니다.

 

가장 많이 사용되는 네이티브로는 아래와 같이 있습니다.

• String()
• Number()
• Boolean()
• Array()
• Object()
• Function()
• RegExp()
• Date()
• Error()
• Symbol()

❗ 네이티브를 생성자로 사용 하면, type값은 Object(원시값을 감싼 객체 래퍼 로서)를 나타낸다.

var a = new String("abc");
type of a; // "Object" "String"이 아님.
a instanceOf String; //true String객체의 인스턴스

---

💻 3.1 내부 [[Class]]

 

'object'타입은 [[Class]]라는 내부 속성을 가진다.

이를 이용하여 내장 네이티브 생성자를 확인 할 수 있다.

 

❗ 직접접근 X, Object.prototype.toString()라는 메소드로 살펴볼 수 있다.

Object.prototype.toString.call([1, 2, 3]); //"[object Array]"

'object'타입 외, 원시값들도 위와 같은 방법으로 확인이 가능하다.

 

• null, undefined

Object.prototype.toString.call(null); // ["Object Null"]
Object.prototype.toString.call(undefined); // ["Object Undefined"]

•  문자열, 숫자 , boolean

이런 단순 원시값들을 해당 객체 래퍼로 자동박싱 과정을 거친다.

Object.prototype.toString.call("abc"); // ["Object String"]
Object.prototype.toString.call(42); // ["Object Number"]
Object.prototype.toString.call(true); // ["Object Boolean"]

---

💻 3.2 래퍼 박싱하기

 

원십값으로 속성이나 메소드를 사용하기 위해서는, "객체래퍼로 박싱하여 사용가능"

+ 자바스크립트는 엔진이 자동으로 박싱을 해줍니다.

var a ="abc";
a.length; //3
a.toUpperCase(); //"ABC"

❗ 수동으로 직접 객체 형태로 사용하면 오히려 프로그램이 더 느려질 수 있으니 주의

 

👉 객체 래퍼의 함정

 

❗ boolean 'fasle'값을 객체래퍼로 박싱후 결과를 보면, true이다.

이는 객체가 'truthy'이기 때문이다.

var a = new Boolean(false); 
if(!a){
	console.log("oops"); //실행 안됨.
}

직접 박싱은 지양하도록 하지만, 수동으로 박싱을 원하면, Object() 함수를 이용

---

💻 3.3 언박싱

 

valueOf() 메소드를 이용하여, 객체 래퍼로부터 원시값을 추출가능

var a = new String("abc");
a.valueOf(); //"abc"

 

---

💻 3.4 네이티브 , 나는 생성자다

 

👉 Array()

보통 Array()생성자는 인자들로 구성된 배열을 생성해주는데,

 

❗ 인자가 하나일 경우 해당 숫자 길이의 슬롯 자체가 없는 구멍난 배열을 생성해준다.

var a = new Array(3);
var b = [undefined, undefined, undefined];
var c =[];
c.length =3;

a; //[undefined X3]
b; //[undefined, undefined, undefined]
c; //[undefined X3]

✅ a,c 와 b의 차이점

a, c : 슬롯하나에 값이 빈 길이 3의 배열을 밀어넣음.

b : 3개의 슬롯에 각각 undefined로 채워진 배열

 

❗ 위 차이점은 map() 함수 에서도 다르게 적용된다.

var a = new Array(3);
var b = [undefined, undefined, undefined];

a.map((v, i)=> i);  //[undefined X3]
b.map((v, i)=> i); // [0, 1, 2]

a에는 슬롯이 없기 때문에, 순회할 원소가 없어 위와 같은 결과가 나온다.

+ length를 이용하여 루프를 반복하는 join()과 같은 메소드는 a, b동일한 결과가 나온다.

 

✅ 객체 래퍼를 이용하여 b와 같이 undefined로 채워진 배열만드는 방법

var a = Array.apply(null, {length: 3});

func.apply(thisArg, [argsArray]) :모든 함수에서 사용가능한 유틸리티로, 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.

 

❗ 위 방법들 처럼 빈슬롯 배열을 만드는일은 지양하는 것이 좋습니다.

 

 

👉 Object(), Function(), and RegExp()

 

위 네이티브도 일반적으로는 사용하지 않고, 선택사항입니다.

 

• Object() : 리터럴 형태로 한번에 속성정의가 가능하므로 생성자 필요성 ❌
• Function() : 동적으로 정의할 때만 유용 (매우 드문일)
• RegExp() : 동적으로 정의할 때만 유용, 리터럴 형식의 정의가 성능상의 이점(미리 컴파일 한 후 캐시)있기에 리터럴형식 지향

 

👉Date() and Error()

이 두가지는 리터럴 형식이 없어, 네이티브로서 유용

• Date()

var d = new Date();// 인자(날짜/시각) 없을 경우, 현재시간

• Error() : 실행 콘텍스트(함수 호출 스택, error객체 생성의 줄번호 등)를 포착하여 객체에 담는 것

function foo(x){
	if(!x){
    	throw new Error("X 누락");
    }
}

❗ 기본적으로 message, type등이 들어있 때도 있음. 하지만 toString()을 이용하여 에러를 확인하는 것을 추천

 

 

👉 Symbol()

Symbol()

객체가 아닌 단순 원시값으로, 반환되는 모든 심볼 값은 고유합니다.

심볼 값은 객체 프로퍼티(object properties)에 대한 식별자로 사용될 수 있습니다(심볼 데이터 형식의 유일한 목적)

 

+전용 프로퍼티는 아니지만, 대부분 전용/특별한 프로퍼티로 사용

 

 

❗ Symbol의 실제값을 보거나 접근 불가능

Symbol.create, Symbol.iterator로 정적 속성에 접근 가능

obj[Symbol.iterator] = function(){/*...*/}

 

❗ Symbol() 앞에 new를 붙이면, 에러가 나니 주의

 

 

👉네이티브 프로토타입

 

네이티브 생성자의 .prototype 객체를 이용하여 메소드에 접근가능하다.

ex. String.prototype.indexOf() (= String#indexOf)

 

• ex. String.prototype

모든 String객체(문자열 원시값 확장까지도)에 사용가능

프로토타입 위임으로 문자열 원시값도 사용가능

var a = "abc";
a.indexOf("c"); //3

 

• defalt값으로의 프로토타입

Function.prototype : 빈 함수

RegExp.prototype : 빈 정규식

Array.prototype : 빈 배열

 

이들을 이용하여 디폴트 값으로 사용한다면,

.prototype은 생성되어 내장된 상태이므로, 단 한번만 생성된다는 이점이있다.

 

❗ 이후 값을 변경될 디폴트에는 사용하지 않는것이 좋음

 

---

포스팅 마치겠습니다 :-D