1. 원시타입(Primitive)
- 아래 코드 처럼 변수에 "값" 자체를 변수에 할당하여서 변수를 초기화한다.
var str = "kong";
2. Wrapper 객체
- 아래 코드 처럼 변수에 "값" 자체를 할당하지 않고 객체 생성자 함수를 사용하여 변수를 초기화한다.
var strWrap = new String('kong');
그러면 여기서 한가지 내용을 더 알려드릴게요.
JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다.
위에 말처럼 자바스크립트에서는 원시 값은 객체가 아니니깐 어떠한 메서드(객체 내부에 선언된 함수)를 가지지 않는다라고 합니다.
아래 코드처럼 한번 실행해보겠습니다.
str.length;
str.charAt(0);
strWrap.length;
strWrap.charAt(0);
- 여기서 length 라는 프로퍼티(객체내부에 선언된 변수, 함수 등등 말한다.)는 문자열의 길이를 반환한다.
charAt() 라는 함수는 각 문자열의 첫버째, 두번째, 세번째 등등 각각 위치에 있는 문자를 반환한다.
위 두개의 코드를 실행하게된다면 아래처럼 나올것입니다.
str.length
결과 : 4
str.charAt(0);
결과 : "k"
strWrap.length
결과 : 4
strWrap.charAt(0);
결과 : "k"
typeof str // str 타입은 "string"
"string"
typeof strWrap // strWrap 타입 "객체"
"object"
- 여기서!!! 한가지 의문인게 자바스크립트에서는 원시값은 객체가 아니면서 메서드를 가지지 않는다고 하는데
변수 strWrap 은 생성자 함수로 객체 를 생성해서 문자열을 할당 한 것이고 변수 str 은 원시 값 자체 즉, 문자열을 할당 한 것입니다.
그러면... 변수 str 은 객체가 아니면서 어떠한 메서드를 가지고 있지 않은데 어떻게 length 와 charAt() 를 객체 접근자(.) 이용하여 사용할 수 있으며 자바스크립트에서는 어떠한 경고,오류 메세지가 나오지 않는것인가??
3. 오토박싱 (Auto-Boxing)
- 자바스크립트에서 원시타입(변수)에서 프로퍼티나 메서드를 객체 접근자(.)를 이용하여 사용하려할때 해당 원시타입(변수)를 임시 Wrapper 객체로 바꾼 뒤 프로퍼티나 메서드에 접근 한다.
이러한 과정을 오토박싱(Auto-Boxing) 이라 한다.
- 이때 중요한것은 해당 원시타입이 프로퍼티나 메서드에 접근할때 임시 Wrapper 객체를 바꾼 다음 프로퍼티나 메서드를 사용한 다음에는 임시 Wrapper 객체를 지워 버려서 해당 원시타입(변수)에는 어떠한 영향도 미치지 않아서 자바스크립트에서 어떠한 경고,오류 메세지가 나오지 않는다.
- 아래 예시코드를 확인해보겠습니다.
변수이름.프로퍼티이름(key) = "woojeong"(value);
해당 코드는 객체의 프로퍼티를 추가할 수 있다.var str = "kong";
str.firstName = "woojeong"; // 오토박싱 과정 발생
str.firstName; // 이전에 만들어진 Wrapper 객체는 지워진 상태
결과 : undefined
- 원시 값에서 프로퍼티 접근할때 임시 Wrapper 객체를 만들어서 접근가능
- 해당 프로퍼티를 사용이 끝난후 임시 Wrapper 객체가 지워짐
- 그래서 str.firstName 의 결과가 undefined 가 나옴.
정리하자면 오토박싱과정에서 임시 Wrapper 객체는 말그대로 임시 여서 프로퍼티나 메서드 사용 끝나면 해당 임시 Wrapper 객체는 지워지므로 동일한 프로퍼티에 접근할때는 이전에 값은 이미 지원진 상태 입니다.
- 오토박싱 과정에서 임시 Wrapper 객체는 원시값 타입에 따라 객체 타입이 달라진다.
var str = "string";
str.constructor === String;
결과 : true
var num = 123;
num.constructor === Number;
결과 : true
- 각 원시값을 할당한 변수에서 객체 접근자(.)를 사용하여 constructor(생성자를 반환) 프로퍼티에 접근할때 임시 Wrapper 객체가 만들어지고 해당 constructor 프로퍼티는 이미 객체가 만들어진 상태이므로 해당 객체가 어떤 생성자로 만들어진 객체인것을 확인할 수 있다.
- 코드 결과
* 변수를 초기화 할때 각 원시값 타입에 맞춰서 Wrapper 객채가 생성되는것을 볼 수 있다.
자바스크립트에서 오토박싱과정으로 인해 원시값이 프로퍼티나 메서드를 접근할때 임시 Wrapper 객체가 만들어지고 프로퍼티, 메서드 사용이 끝나면 임시 Wrapper 객체는 지워진다.
그리고 만들어진 Wrapper 객체는 변수에 할당된 원시값 타입별로 달라진다.
이상으로 혹시 내용에 문제가 있으면 언제든지 지적해주세요.
참조 사이트
https://developer.mozilla.org/ko/docs/Glossary/Primitive
https://velog.io/@jakeseo_me/자바스크립트-개발자라면-알아야-할-33가지-개념-2-자바스크립트의-원시-타입Primitive-Type-번역
