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

원시 값과 객체의 비교

11.1 원시 값

• 변경 불가능한 값으로 원시 값 자체를 변경할 수 없다.

• 한 번 생성된 원시 값은 변경할 수 없다.

• 변수에 할당된 원시 값을 변경할 수 없다는 것이지, 상수가 아닌 이상 재할당이 안된다는 것은 아니다.

• 상수(const)는 값을 재할당할 수 없다.

  const a = 0;
  a = 2; // X
  a = ''; // X

• 하지만 객체는 재할당할 수 있다.

  const a = {};
  a.name = 'Leona';
  
  console.log(a); // {name: 'Leona'}

• 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 이전 메모리 공간이 아닌 새로운 메모리공간을 확보하고 새로운 메모리 공간의 주소를 참조한다.
  

• 원시 값이 변경 가능한 값이라면 예측이 힘들어 상태 추적하기 어려움

• 변경 불가능한 값이라는 것은 신뢰성이 보장된 데이터라는 의미

11.1.2 문자열과 불변성

• 문자열은 0개 이상 문자 배열을 의미(빈 문자도 문자열에 포함된다)
• 메모리 크기는 유동적으로 결정된다.
  
• 유사 배열 객체라 프로퍼티로 접근 가능

  const a = 'string';
  console.log(a[0], a.length); // 's', 6

• 문자열도 변경 불가능한 원시 값이다.

11.1.3 값에 의한 전달

• 어떤 변수에 다른 변수를 할당하면 그 변수의 값이 복사되어 할당된다.

• 복사해서 할당된 값은 새로운 메모리 공간에 적재되기 때문에 값이 아닌 값이 있는 메모리 주소를 전달한다고 봐야 한다.

• 전혀 다른 메모리 주소이기 때문에 서로 영향을 줄 수 없다.

  const a = 0;
  const b = a;
  
  console.log(a, b); // 0, 0

  
  Quiz 로그는 어떻게 찍힐까요~?

  let a = 100;
  const b = a;
  
  console.log(a, b); // 100, 100
  
  a = 200;
  
  console.log(a, b); // ???
  console.log(a === b); /// ???

11.2 객체

• 변경 가능한 값
• 프로퍼티 개수라던지 정해진 제약이 없어 동적으로 프로퍼티를 추가하고 삭제할 수 있다.
• 크기에 따라 원시 값 보다 많은 메모리를 소비할 수 있다.
• 객체 변수는 참조 값을 기억하기 때문에 재할당 하더라도 값이 바뀌지 참조 값이 바뀌지 않는다.
  
• 원시 값과 달리 크기가 일정하지 않고, 프로퍼티 값이 객체일 수도 있어서 복사해서 재할당하는 비용이 많이 든다. 좀더 효율적으로 운용하기 위해 변경 가능한 값인 것이다.

  얕은 복사와 깊은 복사
  얕은 복사는 객체 한 단계만 복사, 깊은 복사는 중첩되어있는 객체까지 모두 복사한다.
  얕든 깊든 원본을 복사하지만 원본과는 전혀 다른 객체다. 아무튼 메모리 주소가 다르니 전혀 다른 객체인 것
  스프레드 문법은 1단계 객체만 깊은 복사를 하므로 얕은 복사(?)
  참조: https://velog.io/@yukyung/Spread-Operator%EB%8A%94-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%9D%BC%EA%B9%8C-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%9D%BC%EA%B9%8C

11.2.2 참조에 의한 전달

• 객체 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달되는 것을 말한다.

• 원본과 사본은 메모리 주소는 다르지만 같은 참조 값을 갖는다.
  

• 식별자는 다른데 같은 객체를 바라보고 있기 때문에 프로퍼티를 추가, 삭제하면 서로 영향을 줄 수 있다.

  값에 의한 전달과 참조에 의한 전달 차이는 원시 값을 전달하냐, 참조 값을 전달하냐 차이인데, 사실상 자바스크립트에서 참조에 의한 전달은 없는 셈 쳐야 한단다. 변수에 저장되어 있는 값을 바라보기 때문

  Quiz true? false?

  const person1 = {
   name: 'Leona',
  }
  
  const person2 = {
   name: 'Leona',
  }
  
  console.log(person1 === person2); // ???
  console.log(person1.name === person2.name); // ???