[모던 자바스크립트 Deep Dive] 11장

11장 원시 값과 객체의 비교

11.1 원시 값

• 원시 타입 : 변경 불가능한 값
• 객체 타입 : 변경 가능한 값
• 원시 값 변수할당 : 실제 값이 저장
• 객체 값 변수할당 : 참조 값이 저장

11.1.1 변경 불가능한 값

• 원시 값은 읽기전용 값으로서 변경할 수 없다.

• 변경이 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.

  // const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다.
  const o = {};
  
  // const 키워드를 사용해 선언한 변수에 할당한 원시값(상수)은 변경할 수 없다.
  // 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
  o.a = 1;
  console.log(o); // {a: 1}

• 변수의 값을 바꾼다 -> 참조하던 메모리 공간의 주소를 변경한다.

11.1.2 문자열과 불변성

• 숫자는 값이 다르더라도 메모리 공간을 동일하게 차지하나, 문자열은 크기에 따라 공간이 다르다

  // 문자열은 0개 이상의 문자들로 이뤄진 집합이다.
  var str1 = '';      // 0개의 문자로 이뤄진 문자열(빈 문자열)
  var str2 = 'Hello'; // 5개의 문자로 이뤄진 문자열

  var str = 'Hello';
  str = 'world';

• Hello와 world 둘다 메모리 공간을 차지한다.

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

• 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. > 데이터 신뢰성 보장

• 변수에 새로운 문자열을 재할당 하는것은 가능 > 변경이 아닌 새로운 문자열을 할당하는 것이기 때문

11.1.3 값에 의한 전달

• 값에 의한 전달

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

• 값은 복사되어 다른 메모리 공간에 저장된 별개의 값이다.

  var score = 80;
  
  // copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
  var copy = score;
  
  console.log(score, copy); // 80  80
  console.log(score === copy); // true

• score 값을 변경해도 copy 변수에 값에 영향을 주지 않는다.

  var score = 80;
  
  // copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
  var copy = score;
  
  console.log(score, copy);    // 80  80
  console.log(score === copy); // true
  
  // score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
  // 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.
  score = 100;
  
  console.log(score, copy);    // 100  80
  console.log(score === copy); // false

• 두 변수 중 어느 하나의 변수에 값을 재 할당하는 시점이든 결국 서로 간섭할 수 없다.

11.2 객체

• 프로퍼티의 개수가 동적이다. 제약이 없다. 메모리 공간의 크기를 사전에 정해둘 수없다.
• 객체는 원시 값과 다른 방식으로 동작하도록 설계되어 있다.

11.2.1 변경 가능한 값

• 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.
• 재할당 없이 프로퍼티를 동적으로 추가,갱신,삭제 할 수 있다.
• 비용이 많이 들어 메모리 사용 효율성과 성능을 위해 변경 가능한 값으로 설계됨.
• 여러개의 식별자가 하나의 객체를 공유할 수 있다.

11.2.2 참조에 의한 전달

• 식별자가 하나의 객체를 공유

  var person = {
    name: 'Lee'
  };
  
  // 참조값을 복사(얕은 복사)
  var copy = person;

• 객체를 가르키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조값이 복사되어 전달된다. > 참조에 의한 전달.

• person과 사본 copy가 저장된 메모리는 다르지만 동일한 객체를 가르킨다. > 객체를 변경할 경우에 서로 영향을 주고 받는다.

  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); // ① falseconsole.log(person1.name === person2.name); // ② true

• person1과 person2 가르키는 객체는 같지만, 변수의 참조값(할당한 메모리 값)은 다르기 때문에 false

• person1과 person2가 가르키는 객체가 같고 해당 객체내의 같은 프로퍼티 값을 가르키기 떄문에 true