일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- npx
- Recoil
- Redux
- react
- 웹크롤링
- 반응형웹
- 웹팩
- javascript animation
- sequelize
- docker
- 정규표현식
- 회고
- CDN
- go
- 성능최적화
- Modal
- component
- styled-component
- graphql
- typescript
- express
- AWS
- scrapping
- 포트포워딩
- cicd
- socket.io
- route
- Today
- Total
프로그래밍 공부하기
Wrapper Object 본문
1. Access Property of Primitive Type
JS은 객체(Object) 값(Reference Type)과 그렇지 않은 값(Primiteve Type)으로 나뉜다. 여기서 객체란 key-value로 구성된 프로퍼티들의 정렬되지 않은 집합이라 말할 수 있으며, 이때 value가 함수라면 해당 프로퍼티는 메서드라 부른다.
// primitive Type의 메서드 사용
'abc'.toUpperCase(); // 'ABC'
1 .toString(); // '1'
// primitive Type의 프로퍼티 접근
'123'.length; // 3
1 .x; // undefined
그런데 JS에선 Primitive Type도 메서드를 사용하거나 프로퍼티에 접근가능하다 이것이 가능한 이유는 Primiteve Type의 프로퍼티에 접근하려 할 때 Wrapper Object라는 임시 객체가 생성되어, 생성된 임시 객체의 프로퍼티에 접근하게 되기 때문이다.
2. Life Cycle
const str = 'abc'; // 1
str.toUpperCase(); // 2
// 3
위 코드는 다음과 같은 과정을 거친다.
- 문자열 str을 만든다. 이 때 문자열은 Primitive Type이다.
- str에 대해 toUpperCase()라는 프로퍼티에 접근한다.
1) new String('abc'); 을 호출한 것과 동일한 임시 객체가 생성된다.
2) 생성된 객체의 toUpperCase() 메서드를 호출하여 리턴 값을 받는다. - 프로퍼티 참조가 끝난다.
1) 새로 생성된 임시 객체는 메모리에서 회수된다.
- 정확히는 임시 객체를 생성하고 삭제하는 것처럼 보인다. 혹은 동작한다 이다.
JS 구현체에 따라서 회수가 아닌, 재사용이 될 수도 있기 때문이다.
문자열 뿐만 아니라, 숫자, 불리언의 프로퍼티에 접근할 때도 이와 같은 과정을 거친다.
3. 특징
var s = 'ihl';
s.x = 4; // s에 x프라퍼티를 생성했으나, 참조가 끝나면 바로 임시객체가 해제된다.
var x = s.x; // 따라서 s.x === undefined가 된다.
Wrapper 객체를 통해 접근한 프로퍼티는 읽기 전용이다. Wrapper 객체는 임시 객체이므로, 프로퍼티를 생성하거나 수정해도 참조가 끝나면 객체가 해제되기 때문이다.
4. Create Primitive Value By Wrapper Object
const str = new String('abc'); // Wrapper Object로 생성
str.x = 0;
var x = str.x; // Wrapper Object가 유지되므로 x = 0 이 된다.
str.length = 4;
console.log(str.length); // 원래 존재하던 프로퍼티는 수정되지 않으므로 3이다.
new String('abc') 처럼 명시적으로 Wrapper 객체를 생성할 수 있다. 생성된 Wrapper 객체는 필요에 따라 Primiteve Type으로 변환되므로, Primiteve Type과 똑같이 동작한다. 단, Wrapper 객체가 유지되므로 프로퍼티를 새롭게 추가하고 유지할 수 있다. 그러나, 원래 존재하는 프로퍼티의 경우는 수정되지 않는다.
// Wrapper Object인 str
const str = new String('abc');
// 일치 연산자와 동치 연산자
str === 'abc'; // false
str == 'abc'; // true
// typeof 연산자
typeof str; // 'object'
typeof 'abc'; // 'string'
일치 연산자(===)는 기본 타입과 Wrapper 객체를 다르게 취급한다. 반면, 동치 연산자(==)는 기본 타입과 Wrapper 객체를 동일하게 취급한다. typeof 연산자는 기본 타입과 Wrapper 객체를 다르게 취급한다.
5. null & undefined
null.toString(); // Type Error : Cannot read properties of null
undefined.toString(); // Type Error : Cannot read properties of undefined
null과 undefined의 경우 Wrapper 객체가 없으므로 프로퍼티 접근 시 Type Error가 발생한다.
원시값의 메서드 : https://ko.javascript.info/primitives-methods
자바스크립트 완벽 가이드 : https://book.naver.com/bookdb/book_detail.naver?bid=10338797
'Web > [JS] Common' 카테고리의 다른 글
Symbol Type (0) | 2022.02.06 |
---|---|
Generator Function - function* (0) | 2021.11.11 |
Compile in V8 (0) | 2021.10.23 |
This Binding 유형 (0) | 2021.10.19 |
Call By Value? Call By Reference? (0) | 2021.09.04 |