자바스크립트 핵심컨샙33 #2. Primitive Types(원시 자료형)

김동욱·2021년 6월 28일
0

자바스크립트

목록 보기
2/25

Primitive Types(원시 자료형)

객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type) 또는 원시 자료형 이라고 합니다.

또한 객체가 아니면서도 메서드도 가지지 않는 데이터입니다. 원시 자료형이 아닌 다른 모든 데이터 타입들은 객체입니다.

원시값에는 7종류

  • string,
  • number,
  • bigint,
  • boolean,
  • undefined,
  • symbol,
  • null
    가 있습니다.(위 원시값의 기본 내용은 간단하니 넘어가겠습니다.)

원시값의 불변함

원시값의 특징중 하나는 '불변함'이 있습니다.

var bar = "baz";
console.log(bar);        // baz

bar.toUpperCase();
console.log(bar);        // baz

var foo = [];
console.log(foo);        // []

foo.push("plugh");
console.log(foo);        // ["plugh"]

bar = bar.toUpperCase(); // BAZ

bar에 문자열 메소드인 toUpperCase를 사용해서 대문자로 바꾸려고했지만 변화하지않습니다.
하지만 foo배열에 push를 사용하여 plugh를 넣었더니 변화가 되었습니다.

이처럼 원시값은 값은 객체와 달리 '변화'시킬 수 없습니다.
foo는 배열 즉 원시값이 아니기때문에 변할 수 있습니다.

하지만 bar = bar.toUpperCase() 은 BAZ가 출력되는데
이것은 값을 '재할당' 즉 교체를 했기때문에 가능한 일입니다.

🤔여기서 이상한 점은 객체가 아닌 원시값에서 어떻게 메서드를 사용할 수 있는걸까요???

재할당으로 원시값을 변화시킬수 있다고 하지만 메서드란 원래 객체에 할당된 함수인데 bar이라는 원시값에 toUpperCase메서드를 사용했습니다. 원래라면 이상한 일이지만 자바스크립트는 '유동적'인 언어임을 항상 아셔야합니다^^.

자바스크립트 제작자들은 원시값을 변화시키기위해 원시 래퍼 객체라는 것을 만들었습니다.

원시 래퍼 객체(object wrapper)

원시값이 메서드나 프로퍼티에 접근하려 하면 그 원시 타입에 맞는 추가 기능을 제공해주는 특수한 객체, "원시 래퍼 객체"를 생성합니다.
래퍼 객체 마다 제공하는 메서드 역시 다릅니다. 원시값을 사용하려하면 레퍼객체의 내부 프로세스로 인해 원시값을 가볍게 유지하면서 메서드를 호출할 수 있는 것입니다.

  • null과 undefined 를 제외하고, 모든 원시 값은 원시 값을 래핑한 객체를 갖습니다.
  • 래퍼 객체의 valueOf() 메서드는 원시 값을 반환합니다.
  • 하지만 원시값에 메서드를 추가할 수는 없습니다!

"원시 값 자체와, 원시값을 할당한 변수를 혼동하지 않는 것이 중요"합니다.
변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없습니다.🤗

다음은 조금 다른 예시입니다.

let foo = 5;
let foo2 = 2;

function addTwo(num) {
   num += 2;
}

function addTwo_v2(foo) {
   foo += 2;
}

foo2++;
console.log(foo2);  // 7

addTwo(foo);
console.log(foo);   // 5

addTwo_v2(foo);
console.log(foo2);   // 3

foo2의 경우는 연산자라고 해서 이해는 합니다
하지만 addTwo, addTwo_v2 안에 있는 연산자를 사용했는데 foo값이 안 바뀌었습니다.

이러한 이유는 함수의 내부 스코프 안에서 연산되는 인수는 글로벌 영역에서 참조한 foo가 아닌 복사본이기 때문입니다.

함수안의 인수는 복사본이다.

  1. 함수의 본문 내 구문들을 실행하기 전에, JavaScript는 원래 전달된 인수(원시 값)를 복사해 로컬 복사본을 생성합니다.
  2. 이러한 복사본은 함수의 스코프 내에서만 존재하며, 함수 정의 내에 지정한 식별자를 통해 접근가능합니다.(즉 인수로 전달된 num는 글로벌 영역의 foo가 아니라 addTwo 안의 지역변수에 복사된 foo가 됩니다.)
  3. 원시 값에 직접 작업하지 않으므로, 원본을 건드리지 않고 복사본 가져와 계속 작업을 하기때문에 글로벌 영역의 원시값은 변하지않습니다.

만약 새로운 값을 얻고싶으면
함수안에 'foo = num' 이렇게 직접 값을 재할당을 해야합니다.


Primitive Types(원시 자료형)

은 불변한다는 지식을 얻고 포스팅을 마무리하겠습니다~

profile
안녕하세요. 부산에서 근무하고 있는 프론트엔드 개발자 김동욱입니다. 영어 공부 겸 개발 공부를 위해서 글을 작성하고있습니다.

0개의 댓글