원시 값과 객체의 비교

• 원시 값은 변경 불가능한 값(immutable)이고 객체(참조)는 변경가능한 값(mutable)이다.

• 원시값을 변수에 할당하면 실제 값이 저장된다. 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.

원시 값

변경 불가능한 값

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위한 이름

값 : 변수에 저장된 데이터, 표현식이 평가되어 생성된 결과

• 변경 불가능하다는 말은 원시 값 자체를 변경할 수 없다는 뜻, 변수는 언제든지 재할당을 통해 변수 값을 변경(교체) 가능하다.

• 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 값을 변경할 수 있는 방법이 없다

문자열과 불변성

var str = 'string';


console.log(str[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.
console.log(str.length); // 6
console.log(str.toUpperCase()); // STRING

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
// 하지만 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
str[0] = 'S';

console.log(str); // string

• 자바 스크립트의 문자열은 원시타입이며 변경 불가능하다.
• 문자열은 유사 배열 객체이면서 이터러블 이므로 배열과 유사하게 각 문자에 접근할 수 있다
• 하지만 문자열은 원시값이므로 변경 불가능하다. 에러가 발생하지 않는것을 주의하자.

값에 의한 전달

var score = 80;
var copy = score;

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

score = 100;

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

score와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다. score의 변수의 값을 변경해도 copy 변수 값에는 어떠한 영향도 주지않는다.(재할당)

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

객체

변경 가능한 값

var person = {
  name: 'Lee'
};

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

// 프로퍼티 동적 생성
person.address = 'Seoul';

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

객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다.

얕은 복사, 깊은 복사

const v = 1;

// "깊은 복사"라고 부르기도 한다.
const c1 = v;
console.log(c1 === v); // true

const o = { x: 1 };

// "얕은 복사"라고 부르기도 한다.
const c2 = o;
console.log(c2 === o); // true

얕은 복사 : 한 단계까지만 복사하는 것
깊은 복사 : 재귀적으로 원시값까지 전부 복사하는것, a의 값이 바뀌어도 b의 값은 바뀌지 않는다

참조에 의한 전달

var person = {
  name: 'Lee'
};

// 참조값을 복사(얕은 복사). copy와 person은 동일한 참조값을 갖는다.
var copy = person;

// copy와 person은 동일한 객체를 참조한다.
console.log(copy === person); // true

// copy를 통해 객체를 변경한다.
copy.name = 'Kim';

// person을 통해 객체를 변경한다.
person.address = 'Seoul';

// copy와 person은 동일한 객체를 가리킨다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.
console.log(person); // {name: "Kim", address: "Seoul"}
console.log(copy);   // {name: "Kim", address: "Seoul"}

두 개의 식별자가 하나의 객체를 공유한다. 따라서 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다 -> 얕은 복사

var person1 = {
  name: 'Lee'
};

var person2 = {
  name: 'Lee'
};

console.log(person1 === person2); // false
console.log(person1.name === person2.name); // true