프론트엔드/JavaScript

[Deepdive] 11장 원시값과 객체의 비교

반신욕좋아하는J 2022. 3. 28. 18:05
반응형

원시값과 객체?

자바스크립트에는 7가지 데이터 타입이 존재하는데 크게 원시타입객체 타입으로 구분할수있다.

  • 원시타입
    • 변경 불가능한 값 즉 읽기 전용 값 이다.
    • 변수에 실제값이 저장된다.
  • 객체타입
    • 변경 가능한 값
    • 변수에 참조값이 저장된다.

원시값

원시값같은경우는 변경불가능한 값이기때문에 변수값을 재할당하게되면 변수는 새로운 메모리 공간을 확보하고 재할당한 값을 저장한뒤 변수가 참조하던 메모리 공간의 주소를 변경한다. 이런 값의 특성을 불변성 이라고한다.

문자

원시값을 저장하려면 먼저 확보해야하는 메모리 크기를 결정해야되는데 원시 값인 문자열은 1개의 문자는 2바이트의 메모리 공간을 갖고 몇개의 문자로 이뤄진 문자열인지에 따라 메모리 공간이 결정된다.

자바스크립트의 문자열은 원시 타입이며 변경불가능하다

let str = "hi";
str = "hello";

위의 코드를보면 str변수에 hi 를 할당한뒤 hello 를 재할당했다.

문자열은 원시타입이기때문에 hi 와 hello 는 메모리에 모두 존재한다 . str 변수가 가르키는것이 변경된거다.

문자는 유사 배열 객체인 형태를 가지고있다.

유사배열이란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할수있고 length 프로퍼티를 갖는 객체를 말한다.

다만 문자열은 원시 값이므로 에러는 나지않지만 변경할수없다

여기서 변경재할당 을 잘 구별해야한다.

let str = "abc";
str[0] = "A";
// 해당 문자열을 변경하는것은 불가능하다.
console.log(str); // abc

str = "dce"
// 변수 값을 재할당 하는것은 가능하다.
console.log(str) // dce

값에 의한 전달

변수에 원시값을 갖는 변수를 할당하게되면 할당받는 변수 에는 할당되는 변수원시값이 복사되어 전달된다.

이같은 경우를 값에 의한 전달 이라고 한다.

이둘은 같은 메모리에 저장된 값을 바라보는것이 아닌 복사된 별개의 값을 갖게되는것이다.

객체

객체는 프로퍼티 개수가 정해져있지않고 동적으로 추가되고 삭제 할수있다.

프로퍼티 값에 제약도없어 메모리 공간의 크기를 사전에 정해 둘수 없다.

변경 가능한 값

원시값은 변경 불가능한 값이므로 원시 값을 가진 변수는 재할당 외에는 방법이 없다.

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

let person ={
    name : "jaehyun"
};
// 변수에 객체를 할당 

person.name = "kim";
// 프로퍼티 값 갱신 
Person.address = "Seoul";
// 프로퍼티 동적 생성

결국에 원시값을 갖는 변수의 값을 변경하려면 재할당을통해 메모리에 새로 생성해야한다.

객체는 재할당하지않고 변경 가능하기에 변수의 참조 값은 변경되지않는다 .

참조에 의한 전달

객체를 가르키는 참조값이 복사되어 전달되는것을 의미하는데 person 과 copy 의 변수 메모리 주소는 다르지만 모두 동일한 객체를 가르킨다 . 이것을 두개의 식별자가 하나의 객체를 공유한다 라고한다.

여기서 어느 한쪽의 객체를 변경하면 서로 영향을 주고받는다.

let person ={
    name : "jaehyun"
};
let copy = person;
// 참조값을 복사 
반응형