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

cool_kim·2021년 7월 9일
0

Javascript

목록 보기
2/7
post-thumbnail

네이티브

: 특정 환경(브라우저 등의 클라이언트 프로그램)에 종속되지 않은 ECMAScript 명세의 내장 객체

네이티브 종류

  • String()
  • Number()
  • Boolean()
  • Array()
  • Object()
  • Function()
  • RegExp()
  • Date()
  • Error()
  • Symbol() - ES6에서 추가됨
var a = new String("abc");
typeof a; // "object"
a instance of String; // true
Object.prototype.toString.call(a); //"[object String]" 

3.1 내부 [[Class]]

: typeof가 'object'인 값에 붙는 내부 프로퍼티

  • 이 프로퍼티는 직접 접근할 수 없고 Object.prototype.toString()라는 메서드에 값을 넣어 호출함으로써 존재를 알 수 있음
Object.prototype.toString.call( [1,2,3] ); //"[object String]"
Object.prototype.toString.call( /regex-literal/i ); //"[object RegExp]"

✔️ 내부 [[class]]값이 배열은 "Array", 정규식은 "RegExp"
✔️ 대부분 내부 [[Class]]는 해당 값과 관련된 내장 네이티브 생성자를 가리키지만, 그렇지 않을 때도 있음
✔️ null과 undefined도 내부 [[Class]]값 있음

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

📍 하지만 문자열, 숫자, 불리언 같은 단순 원시 값은 자동 '박싱 과정'을 거쳐 내부 [[Class]] 값 표시



3.2 래퍼 박싱하기

자바스크립트는 원시 값을 알아서 박싱(라핑)하므로 원시 값에 .length나 .toString()으로 접근 할 수 있음.

✔️원시 값을 사용하는게 좋지만 객체 래퍼를 사용해야 한다면 boolean값은 수동 박싱해야함
✔️수동으로 원시 값을 박싱하기 위해서는 Object()함수를 이용

var a = new Boolean( false ); // false가 아닌 falsy가 됨.
if(!a) {
	console.log( "Oops" );  // 실행 되지 않음
}

var a = "abc";
var b = new String( a );
var c = Object( a );

typeof a; //"string"
typeof b; //"object"
typeof c; //"object"

b instanceof String; //true
c instanceof String; //true

//수동 박싱
Object.prototype.toString.call( b ); //"[object String]"
Object.prototype.toString.call( c ); //"[object String]"



3.3 언박싱

객체 래퍼 원시 값은 valueOf() 메소드로 추출

  • 암시적인 언박싱 일어남



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

Array()

: 배열의 크기를 미리 정함

var a = new Array(3);
a.length; //3
a; // [ undefined x 3 ]

→ 슬롯 자체가 존재하지 않아 배열 슬롯에 undefined값을 밀어 넣은 것

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

a; //[ undefined x 3 ]
b; //[ undefined, undefined, undefined ]
c; //[ undefined x 3 ]

🙁 map() : a에 슬롯이 없기 때문에 함수가 순회할 원소가 없다.
🙁 join() : 슬롯이 있다는 가정하에 length만큼 루프를 반목한다.

📍 빈 슬롯 말고 진짜 undefined 값 원소로 채워진 배열 생성하기

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

📌 apply()는 모든 함수에서 사용 가능, 첫번째 인자는 객체 바인딩 두번째 인자는 인자의 배열로 이안에 포함된 원소들이 펼쳐져 함수의 인자로 전달됨
1. 0에서 length 직전까지 루프 순회
2. 인덱스 별로 객체에서 키를 가져옴
3. 함수 내부에서 배열 객체 인자를 arr라고 명명한다면 프로퍼티는 arr[0], arr[1], arr[2]로 접근
4. 세 프로퍼티 모두 { length : 3 } 객체에는 존재하지 않기 때문에 모두 undefined를 반환
5. 결국 빈슬롯이 아닌, undefined로 채워진 배열 탄생


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

: 어떤 분명한 의도가 아니라면 사용하지 않는 편이 좋음

  • Object() : 사실상 사용할 일이 없음, 리터럴 형태로 한 번에 여러 프로퍼티를 지정할 수 있는데 굳이 한 번에 하나씩 일일이 프로퍼티를 지정하는 벙법으로 돌아갈 필요 없음
  • Function() : 함수의 인자나 내용을 동적으로 정의해야 하는 매우 드문 경우에 한해 유용
  • RegExp() : 정규 표현식 패텅을 동적으로 정의할 경우 의미 있는 유틸리티

Date() and Error()

: 리터럴 형식이 없기 떄문에 다른 네이티브에 비해 유용

  1. Date()

    • new Date()로 생성
    • 날짜/시각을 인자로 받음
    • 유닉스 타임스탬프 값을 얻는 용도로 가장 많이 쓰임
    • data객체의 인스턴스로부터 getTime()을 호출 → Data.now() 가 더 쉬움
  2. Error()

    • 앞에 new가 있든 없든 결과가 같음
    • 현재의 실행 스택 콘텍스트(Execution Stack Context)를 포착하여 객체에 담는 용도
    • 실행 스택 콘택스트는 함수 호출 스택, error 객체가 만들어진 줄 번호 등 디버깅에 도움 될 만한 정보들을 담고 있음
    • error객체는 보통 throw 연산자와 함께 쓰임

Symbol()

: ES6에서 처음 선보인, 새로운 원시 값 타입
: 충돌 염려 없이 객체 프로퍼티로 사용 가능한, 특별한 '유일 값'

📍 심벌 정의하기

var mysym = Symbol( "my own symbol" );
mysym; //Symbol(my own symbol);
mysym.toString(); //"Symbol(my own symbol)"
typeof mysym; //"symbol"

vat a = {};
a[mysym] = "foobar";

object.getOwnPropertySymbols( a ); //[ Symbol(my own symbol) ]
  • private 속성은 아니지만 본래의 사용 목적에 맞게 대부분 전용 혹은 특별한 속성으로 사용

네이티브 프로토타입

: 해당 객체의 하위 타입별로 고유한 로직이 담겨 있음

  • String#indexOf() : 문자열에서 특정 문자의 위치를 검색
  • Stirng#charAt() : 문자열에서 특정 위치의 문자를 반환
  • Stirng#substr(), String#substring(), String#slice() : 문자열의 일부를 새로운 문자열로 추출
  • Stirng#tpUpperCase(), String#toLowerCase() : 대문자/소문자로 변환된 새로운 문자열 생성
  • String#trim() : 앞/뒤의 공란이 제거된 새로운 문자열 생성

✔️ 프로토타입 위임 덕분에 모든 문자열이 이 메소드를 같이 쓸 수 있음

  • Function.prototype : 함수
  • RegExp.prototype : 정규표현식
  • Array.prototype : 배열
typeof Function.prototype; //"function"
Function.prototype(); //빈 함수

RegExp.prototype.toStirng(); // 빈 정규표현식
"abc".match( RegExp.prototype ); // [""]

Array.isArray( Array.prototype ); //true
Array.prototype.push( 1,2,3 ); // 3
Arrat.prototype; // [1,2,3]

Array.prototype.length = 0; // 배열 비우기

📌 프로토타입은 모두 디폴트 값이다

  • 프로토타입으로 디폴트 값을 세팅하면 단 한 번만 생성된다.
profile
FE developer

0개의 댓글