Javascript - Primitive Type, Object Type

 

 

원시 타입과 객체 타입의 대표적 차이점

• 원시 타입의 값 === 원시값
  • 변경 불가능한 값
  • 변수에 할당하면 변수에 실제 값 저장
  • 값에 의한 전달(원시값을 갖는 변수를 다른 변수에 할당하면 원시값이 복사되어 전달)
• 객체 타입의 값 === 객체
  • 변경 가능한 값
  • 변수에 할당하면 변수에 참조 값 저장
  • 참조에 의한 전달(객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달)

 

 

원시값

원시값은 변경 불가능한 값 == 읽기 전용 값

• 변경 불가능하다.
  • 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 or 메모리 공간을 식별하기 위해 붙인 이름
  • 값: 변수에 저장된 데이터
  • 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술
  • 즉 원시값은 변경 불가능하다 == 원시값 자체를 변경할 수 없다 O, 변수 값을 변경할 수 없다 X

 

 

불변성

변수 값을 변경하기 위해 원시값을 재할당하면, 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경하는 것

• 불변성을 갖는 원시 값을 할당한 변수 값을 변경하는 유일한 방법: 재할당

var str = 'string';
str[0] = 'S';

console.log(str); // string

// 재할당으로는 값 변경 가능
var str = 'hello';
str = 'world';

console.log(str); // world

 

cf) 유사 배열 객체: 배열처럼 인덱스로 프로퍼티 값에 접근 가능, length 프로퍼티를 갖는 객체

 

 

값에 의한 전달

변수에 원시값을 갖는 변수를 할당하면, 할당받은 변수에는 할당되는 변수의 원시값이 복사되어 전달되는 것

var score = 80;
var copy = score;

score = 100;

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

한 변수에 원시값을 갖는 변수를 할당하면, 두 변수의 원시값은 서로 다른 메모리 공간에 저장된 별개의 값 -> 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없음

 

 

객체

객체 타입의 값 == 변경 가능한 값

• 변경 가능하다
  • 객체를 할당한 변수는 재할당없이 객체를 직접 변경할 수 있다.
  • 재할당없이 프로퍼티를 동적으로 추가, 값 갱신, 삭제 가능

var person = {
  name: "WI", 
};

// 프로퍼티 값 갱신
person.name = 'JIOH';

// 값 동적 추가
person.address = 'Seoul';

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

 

자바스크립트 객체가 변경가능한 값이어야 하는 이유 : 메모리의 효율적인 소비가 어렵고 성능이 나빠지는 것을 최소화하기 위해

• 객체를 원시값처럼 이전 값을 복사해서 새롭게 생성 -> 명확하고 신뢰성이 확보됨
• 하지만 객체는 크기가 매우 클 수 있고 원시값처럼 크기가 일정하지도 않고 프로퍼티 값이 객체일 수도 있어서 복사(deep copy)해서 생성하는 비용이 많이 듦
• 객체를 복사해 생성하는 비용을 절약해 성능을 향상시키기 위해 변경 가능한 값으로 설계

cf) 객체가 변경가능한 값이어서 오는 단점, 부작용: 여러 개의 식별자가 하나의 객체를 공유할 수 있음

 

 

참조에 의한 전달

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달되는 것

var person = {
  name: 'WI',
}

// 참조값을 복사, copy와 person이 동일한 객체를 참조
var copy = person;
console.log(copy === person); // true

// copy를 통해 객체의 name 프로퍼티를 변경
copy.name = 'JIOH';

// person을 통해 객체의 address 프로퍼티를 동적으로 생성
person.address = 'Seoul';

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

 

 

얕은 복사, 깊은 복사

• 얕은 복사(shallow copy): depth가 1까지만 복사하는 것. 객체의 중첩된 객체는 참조 값을 복사
• 깊은 복사(deep copy): depth가 2이상도 전부 복사하는 것. 객체의 중첩된 객체까지 원시값처럼 완전히 복사