원시값과 객체의 비교

윤영훈·2021년 6월 10일
0
post-thumbnail

자바스크립트에서는 데이터 타입을 크게 원시타입 (primitive type)과 객체타입 ( object/reference type)으로 구분할 수 있습니다.

데이터 타입을 원시타입과 객체타입으로 구분하는 이유는 뭘까요?

원시타입과 객체타입의 비교

원시 타입과 객체 타입은 크게 세가지 측면에서 다릅니다.

  • 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 (immutable value)입니다. 이에 비해, 객체는 변경 가능한 값 (mutable data) 입니다.

  • 원시 값을 변수에 할당하면 변수 (확보된 메모리 공간)에는 실제 값이 저장됩니다. 이에 비해 객체를 변수에 할당하면 변수에는 참조값이 저장됩니다.

  • 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달됩니다. 이를 '값에 의한 전달'(pass by value)라 합니다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됩니ㅏ다. 이를 '참조에 의한 전달' (pass by reference)라 합니다.

원시 값

원시 타입 (primitive type)의 값. 즉 원시 값은 변경 불가능한 값 (immutable value)입니다. 한번 생성된 원시값은 읽기 전용(read only)값으로서 변경할 수 없습니다.

"원시 값은 변경 불가능하다"라는 말은 원시값 자체를 변경할 수 없다는 것이지 변수 값을 변경 불가능하다는 말이 아닙니다.

원시값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 값을 변경하는 것이 아니라, 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시값을 가리킵니다.

이때 변수가 참조하던 메모리 공간의 주소가 바뀝니다. 값의 이러한 특성을 불변성이라 합니다.

값에 의한 전달 예시

var score = 80;
var copy = score;

console.log(score) // 80
console.log(copy) // 80

score = 100;

console.log(score) // 100
console.log(copy) // 80

예제 2)

var score = 80;

var copy = score;

console.log(score, copy); // 80 80
console.log(score === copy) // true

이때 score와 copy의 값이 80이라는 점에서는 동일하지만, score 변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다.

결국은 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

객체

객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있습니다. 또한 프로퍼티의 값에도 제약이 없습니다. 따라서, 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없습니다.

변경 가능한 값

원시값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근합니다. 하지만 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조값을 통해 실제 객체에 접근합니다.

객체는 변경 가능한 값이기 때문에 객체를 할당한 변수는 재할당없이 객체를 직접 변경할 수 있습니다.

즉, 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고, 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있습니다.

참조에 의한 전달 예시

두개의 식별자가 하나의 객체를 공유할 수 있다.

var person = {
  name: 'Lee'
};;

var copy = person;

console.log(copy === person); // true

copy.name= "Kim";
person.address = 'Seoul';

console.log(person); // { name: 'Kim', address: 'Seoul' }
console.log(copy); // { name: 'Kim', address: 'Seoul' }

0개의 댓글