[JavaScript] 모던 JS Deep Dive 11장

ubin·2023년 10월 9일

JavaScript

목록 보기
13/21
post-thumbnail

11.0 원시 값과 객체의 비교

  • 원시 값 Primitive type
    • 변경 불가능한 값 (immutable value)
    • 값에 의한 전달(pass by value) : 변수 할당시 원본의 원시 값이 복사되어 전달
  • 객체(참조) Object/Reference type
    • 변경 가능한 값 (mutable value)
    • 참조에 의한 전달(pass by reference) : 변수 할당시 원본의 참조 값이 복사되어 전달

11.1 원시 값

변경 불가능한 값으로, 한 번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없는 값

변경 불가능한 값

  • 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름
  • 은 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과
  • 변수는 언제든지 재할당을 통해 변수 값을 변경(교체)할 수 있음
  • 상수는 재할당이 금지된 변수
  • const 키워드로 선언한 변수에 할당한 객체는 변경할 수 있음
  • 데이터의 신뢰성 보장
  • 불변성: 새로운 원시 값을 재할당시 새로운 메모리 공간 확보 후 해당하는 메모리 주소를 가리킴
  • 원시 값이 mutable하다면 상태 변경을 추척하기 어렵게 만듦
💬 변경 불가능하다는 것은 변수가 아니라 원시 값 자체를 변경할 수 없다는 것

문자열과 불변성

  • ECMAScript 사양에는 문자열과 숫자 외엔 정확히 규정된 크기는 없음
  • 숫자는 숫자 크기에 상관에 없이 무조건 8바이트
  • 문자열은 문자 하나마다 2바이트로 계산
  • 원시 값을 객체처럼 사용하면 원시 값을 감싸는 래퍼 객체로 자동 변환됨
  • 문자열은 원시 값이므로 변경할 수 없음 (에러 발생은 없음)
  • 새로운 문자열을 새롭게 할당하는 것은 가능
💬 문자열은 **유사 배열 객체**이면서 **이터러블**이므로 배열과 유사하게 각 문자에 접근 가능하다

값에 의한 전달

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

  • 복사되어 전달은 되지만, 다른 메모리 공간에 저장된 별개의 값이다.
  • 그러므로 할당되는 변수의 원시 값을 변경해도 할당받는 변수의 값엔 어떤 영향도 미치지 않음
var score = 10;
var copy = score; //score의 원시 값 10을 할당받음
score = 20;
console.log(score, copy); //20, 10 출력됨 
  • 엄격하게 말하자면 변수에는 값이 아니라 메모리 주소가 전달됨 → pass by sharing
  • 위 방식 외에도 할당 시점엔 두 변수가 기억하는 메모리 주소가 같다고 평가될 수 있음
💬 **결국** 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 **어느 한쪽에서 재할당을 통해 값을 변경해도 간섭할 수 없음**

11.2 객체

  • 원시 값처럼 확보해야 할 메모리 공간의 크기를 사전에 정할 수 없음
  • JS에서는 클래스 없이 객체 생성 가능 및 객체 생성 이후에 프로퍼티와 메서드를 추가할 수 있음 → 편리한데 객체지향보다 비효율적임
  • V8 JS 엔진에서는 동적 탐색 대신 히든 클래스 방식 사용

변경 가능한 값

객체는 변경 가능한 값이다

  • 변수에 객체를 할당하면 생성된 객체가 실제로 저장된 메모리 공간의 주소인 참조 값을 가짐
  • 객체를 할당한 변수 = ‘변수는 객체를 참조/가리키고 있다.’
var person = {
	name : 'Seo'
};

console.log(person); // person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근
  • 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있음
  • 재할당 없이 프로퍼티를 동적으로 추가, 삭제 및 갱신할 수 있음
  • 이때 객체를 할당한 변수의 참조 값은 변경되지 않음
  • 대신 구조적 단점인 메모리 효율이 떨어짐 → 여러 개의 식별자가 하나의 객체를 공유할 수 있음
💬 원시 값을 다른 변수에 할당하는 것을 **깊은 복사**, 객체를 다른 변수에 할당하는 것을 **얕은 복사**

참조에 의한 전달

변수에 할당시 원본의 참조 값이 복사되어 전달되는 것

  • 원본과 사본 두 개의 식별자가 하나의 객체를 공유하는 것
  • 따라서 원본과 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받음
💬 자바스크립트에는 ‘**값에 의한 전달**’만 존재하는데 식별자가 기억하는 메모리 공간 속 값이 원시 값이냐 참조 값인지로 구별할 수 있음
profile
프론트엔드 개발자가 되고싶은 코린이⌨️

0개의 댓글