Web/모던 자바스크립트 Deep Dive

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

동띵 2023. 8. 28. 15:58

원시 값


변경 불가능한 값

  • 원시 값은 변경 불가능한 값 ⇒ 한번 생성된 원시 값은 **읽기 전용** 값으로서 변경할 수 X
  • 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값 저장 후 그 메모리 공간을 참조함 ⇒ 불변성 (immutability)
    • 불면성 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값 변경할 수 있는 방법 X

문자열의 불변성

  • 원시 값을 저장하려면 확보해야 하는 메모리 공간의 크기 결정해야 됨
    • 숫자 값은 크기와 상관없이 무조건 8바이트 필요
    • 문자열은 문자 개수 * 2바이트
  • 문자열은 유사 배열 객체여서 인덱스로 접근 가능하지만, 읽기 전용이므로 인덱스로 접근하여 값을 변경하는 것은 불가능
    • 그러나 변수에 새로운 문자열을 재할당하는 것은 가능

값에 의한 전달

  • 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달
    • 같은 수를 갖게 되지만, **다른 메모리 공간에 저장된 별개의 값**이므로 어느 하나의 값을 변경해도 다른 하나의 값에 영향 X
      • 값을 복사하여 메모리 주소를 전달하는 방식 (할당 시점에 두 변수가 기억하는 메모리 주소가 다름)
      • 할당되는 변수의 메모리 주소를 그대로 전달하는 방식 (할당 시점에 두 변수가 기억하는 메모리 주소가 같고, 어느 한쪽의 변수에 재할당이 이뤄졌을 때 새로운 메모리 공간에 재할당된 값을 저장함)

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

객체


  • 객체는 프로퍼티 개수가 정해져 있지 않고, 동적으로 추가 삭제가 가능하여 **확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 X**

변경 가능한 값

  • 객체는 변경 가능한 값
  • 원시 값을 할당한 변수는 원시 값 자체를 값으로 갖지만, 객체를 할당한 변수가 기억하는 **메모리 주소**를 통해 **메모리 공간에 접근**하면 **참조 값에 접근 가능** ⇒ 참조 값을 통해 실제 객체에 접근
    • 참조 값 : 생성된 객체가 저장된 메모리 공간의 주소
  • 객체를 할당한 변수는 재할당 없이 객체를 직접 변경, 동적으로 추가, 갱신, 삭제 가능
    • 재할당하지 않았으므로 객체를 할당한 변수의 참조 값 변경되지 X
  • 원시 값과 다르게 **여러 개의 식별자가 하나의 객체 공유** 가능하다는 단점이 있음
  • 객체의 얕은 복사 : 중첩된 객체의 경우 참조 값을 복사함 (ex. spread 연산자를 사용해 할당)
    • 객체 수정 시 다른 값에 영향을 미침
    const o = {x:{y:1}};
    const c1 = {...o};
    
    console.log(c1 === o) // false
    console.log(c1.x === o.x) // true
    
  • 객체의 깊은 복사 : 중첩된 객체라도 모두 복사하여 원시 값처럼 완전한 복사본을 만듦 (ex. lodash의 cloneDeep)
    • 객체 수정하더라도 서로 영향을 미치지 X
    const o = {x:{y:1}};
    const _ = require('lodash');
    const c2 = _.cloneDeep(o);
    
    console.log(c1 === o) // false
    console.log(c1.x === o.x) // false
    

참조에 의한 전달

  • 객체를 가리키는 변수를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**됨 ⇒ 참조에 의한 전달
  • 변수 2개가 저장된 메모리 주소는 각각 다르지만 동일한 참조 값을 가짐 ⇒ **모두 동일한 객체를 가리켜** 하나의 객체의 프로퍼티 값이 변경되면 서로 영향을 주고받음