[모던자바스크립트] 11. 원시값과 객체의 비교

1. 원시값 vs 객체

• 자바스크립트가 제공하는 데이터 타입에는 원시타입과 객체타입이 존재
• 원시타입과 객체타입의 3가지 차이점
  1. 원시값은 변경불가능한 값, 객체는 변경 가능한 값
  2. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장
     객체를 변수에 할당하면 변수에는 참조 값이 저장
  3. 원시 값을 갖는 변수는 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달 : 값에 의한 전달
     객체를 가리키는 변수를 다른 변수에 할당하면 참조 값이 복사되어 전달 : 참조에 의한 전달

✅ 원시 값

✔️ 변경 불가능한 값

• 변경 불가능한 값 (읽기 전용값)
  • 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체
  • 값 : 변수에 저장된 데이터
  • 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술
• "원시 값은 변경 불가능하다"
  = 원시 값 자체를 변경할 수 없다.
  = 변수 값을 변경할 수 없다는 뜻이 아님
• 특징
  • 변수는 언제든지 재할당을 통해 변수 값을 변경(엄밀히 말하면 교체)할 수 있음
  • 원시 값의 특성은 데이터의 신뢰성을 보장
  • 원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없음
    • 원시 값을 재할당하여 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다 => 불변성
  • 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없음
    • 만약 변경할 수 있다면 상태 변경을 추적하기가 어려움

✔️ 문자열과 불변성

• 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근
  • 유사 배열 객체 : 마치 배열처럼 인덱스로 프로퍼티 값에 접근, length 프로퍼티를 갖는 객체

var str = 'string';
str[0] = 'S'; // 문자열은 원시 값으로 변경할 수 없음, 문자열은 읽기 전용 값

console.log(str); // string : 값이 변하지 않음

✔️ 값에 의한 전달

• 값에 의한 전달 : 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시값이 복사되어 전달됨

var score = 80;
var copy = score;

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

score = 100;

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

• score과 copy 변수는 숫자 값 80을 갖는다는 점에서는 동일하지만, score변수와 copy변수의 값 80은 다른 메모리에 저장된 별개의 값
• score변수의 값을 변경해도 copy변수의 값에는 어떠한 영향도 주지 않음
• 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없음

✔️ 변경 가능한 값

• 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값
• 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조값에 접근할 수 있음
  • 참조 값 : 생성된 객체가 저장된 메모리 공간의 주소, 그 자체

var person = {
	name : 'Lee'
};

console.log(person); // {name : 'Lee'}

• person변수는 객체 {name:'Lee'}를 가리키고(참조하고) 있음
• 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있음
• 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고, 프로퍼티 값을 갱신할 수도 있고, 프로퍼티 자체를 삭제할 수도 있음
• 부작용 : 여러 개의 식별자가 하나의 객체를 공유할 수 있음
  • 얕은 복사 : 객체에 중첩되어 있는 객체의 경우 참조 값을 복사
  • 깊은 복사 : 중첩되어 있는 객체까지 모두 복사하여 완전한 복사본 생성

✔️ 참조에 의한 전달

var person = {
	name : 'Lee'
};

var copy = person; // 참조 값을 복사한 것

• 위의 예제에서는 copy와 person은 다른 변수지만 같은 객체를 가리키고 있음
• 한쪽에서 객체를 수정하면 다른 쪽에도 영향을 주고받음

정리

• '값에 의한 전달'과 '참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서는 동일하지만 식별자가 기억하는 메모리 공간, 즉 변수에 저장되어 있는 값이 원시 값이냐 참조 값이냐의 차이
• 자바스크립트에서는 '참조에 의한 전달'은 존재하지 않고 '값에 의한 전달'만이 존재한다고 할 수 있음

var person1 = {
	name : 'Lee'
};

var person2 = {
	name : 'Lee'
};

console.log(person1 === person2); // false : person1과 person2의 참조값은 다름
console.log(person1.name === person2.name); // true : 원시 값 'Lee'로 평가됨