[모던 자바스크립트 Deep dive] Study - 11장 원시값과 객체의 비교

n-u·2022년 4월 22일

deepdive js

모던 자바스크립트 DEEP DIVE study

목록 보기

10/28

11. 원시 값과 객체의 비교

데이터 타입에 크게 원시타입 객체타입으로 구분할 수 있다.

정리하자면

원시타입의 값 : 변경 불가능한 값

변수에 할당하면 변수(확보된 메모리 공간)에 실제 값이 저장

값에 의한 전달 : 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달

객체(참조)타입의 값 : 변경 가능한 값

객체를 변수에 할당하면 변수(확보된 메모리 공간)에 참조 값이 저장

참조에 의한 전달 : 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달

11.1 원시 값

11.1.1 변경 불가능한 값

원시 값은 변경 불가능한 값(immutable value)

읽기 전용 값, 변경할 수 없다.

데이터의 신뢰성을 보장한다.

"원시 값은 변경 불가능하다" : 원시값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것은 아니다.

※ 참고) 상수 const !== 변경 불가능한 값

상수는 재할당이 금지된 변수이다. 하지만 변경 불가능한 값으로 동일시 하기에는 어려움이 있다.

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

*const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.

값의 할당

새로운 원시값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시값을 변경하는 것이 아닌, 새로운 메모리 공간을 확보하고 재할당한 원시값을 저장한 후, 변수를 새롭게 재할당된 값의 메모리 주소를 가르키는 것이다.

덮어 씌우기가 아닌 새로운 메모리 공간에 값을 저장한 후 메모리 주소를 변경하는 것

=> 값의 불변성

변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경
불변성은 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.

11.1.2 문자열과 불변성

문자열은

0개 이상의 문자로 이루워진 집합

1개의 문자는 2바이트의 메모리 공간에 저장

원시타입이며 변경 불가능(문자열이 생성된 이후에는 변경할 수 없음을 의미)
var str = 'Hello';
str = 'world;;
이 예시에서는 world가 할당될때 Hello를 수정하는 것이 아닌 새로운 문자열'world'의 메모리를 생성하고 식별자 str은 이것의 가르킨다.
메모리 상에는 'Hello'와 'world'둘다 있게 된다.
var str = 'string';
//변경이 안되어 있다.
//인덱스0번의 값을 재 할당해 보겠다.
str[0] = 'S';
console.log(str); // string
//문자열은 원시 값이므로 변경을 할 수 없고, 이때 에러가 나지 않는다.

유사배열객체이다.
유사객체 배열: 마치 배열처럼 인덱스 프로퍼티 값에 접근할 수 있고, length프로퍼티를 갖는 객체를 말한다.
var str - 'string';
console.log(str[0]); //s
//문자열은 유사배열임으로 비열과 유사하게 인덱스를 사용해 문자에 접근 가능
console.log(str.length); //6
//length도 가능
console.log(str.toUppercase()); //STRING

11.1.3 값에 의한 전달

변수에 원시 값을 갖는 변수를 할당하게 되면,
할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다.
단, 다른 메모리 공간에 저장된 별개의 값이다.

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

변수 값을 변경한다면

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

다른 메모리 공간에 저장된 별개의 값이라서 score를 변경하여도 copy의 값에 어떠한 영향도 주지 않는다.

엄격하게 표현하자면,
변수에는 값이 전달되는 것이 아니라 메모리 주소가 전될되기 때문에 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

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

11.2 객체

11.2.1 변경 가능한 값

변경 가능한 값(mutable value)

재할당 없이 객체를 직접 변경 가능
(프로퍼티를 동적 추가, 자체 삭제, 프로퍼티 값 갱신 가능)
var person = {
  name : 'Lee'
};
//프로퍼티 값 갱신
person.name = 'Kim';
//프로퍼티 동적 생성
person.address = 'Seoul';
console.log(person); //{name : "Kim", address : "Seoul";}
여러 개의 식별자가 하나의 객체를 공유할 수 있다.

할당한 변수가 기억하는 메모리의 주소를 통해 공간에 접근하여 참조값(reference value)에 접근한다.

참조값 : 생성된 객체가 저장된 메모리 공간의 주소, 그 자체

변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근한다.
따라서 "변수는 객체를 참고 하고 있다" 또는 "변수는 객체를 가리키고 있다""라고 표현한다.

객체는 크기가 매우 클 수도 있고, 원시 값처럼 크키가 일정하지 않고, 프로퍼티 값이 객체일 수도 있어 복사하여 생성하는데 많은 비용이 든다. 즉 메모리 효율적 소비가 어렵고 성능이 나빠지는 단점이 있다.
원시값과 다르게 여러개의 식별자가 하나의 객체를 공유할 수 있다.

11.2.2 참조에 의한 전달

객체를 가르키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전단된다.
var person = {
  name : "Lee"
};
//참조 값을 복사(얕은 복사)
var copy = person;

위 그림처럼 객체를 가르키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조값(메모리 주소)이 복사되어 전달된다.
이것을 "참조에 의한 전달"이라고 한다.

person과 copy는 저장된 메모리 주소는 다르지만 동일한 참조값을 갖고 있어 두개의 식별자가 하나의 객체를 공유하는 형태가 된다.
원본과 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.

퀴즈

var person1 = {
name : 'lee'
};
var person2 = {
name : 'lee'
};
console.log(person1 === person2);
console.log(person1.name === person2.name);
객체를 할당한 변수는 참조값을 가진다.
원시값을 할당한 변수는 원시값을 가진다.
따라서 ===연산자는
객체 할당한 변수 비교 : 참조값을 비교
원시값을 할당한 변수 비교 : 원시값 비교

console.log(person1 === person2); 의 값은 false이다.
person1과 person2는 객체를 할당받은 변수임으로 참조값을 가진다.
그렇다면 참조값의 메모리 주소는 다르기 때문에 똑같아 보여도 false가 나온다.
console.log(person1.name === person2.name) 의 값은 true이다.
person1.name과 person2.name은 원시값을 할당받는다. 값으로 평가될 수 있는 표현식이다.
두 표현식 모두 원시값 'Lee'로 평가되어 true가 된다.

5일차를 마치며

챌린지 분량을 바꾼 후 공부하는 것임에도 뭔가 양이 버겁다고 느꼈다.. 사실 내용이 말장난하는 느낌이 들어다. "값에 의한 전달"과 "참조의 의한 전달"이 계속해서 헷갈려 이해가 정말 안되었다. 헷갈린 내용을 잘 요약했는지는, 친절히 책에는 적혀 있지만 핵심만이라도 간결하게 정리하고자 했는지는 잘 모르겠다. 그리고 이미지 몇개는 직접 피그마로 그려서 예시 이미지를 만들려고 하니 오늘 유독 시간이 많이 걸린 것 같다.
오늘 요약하며 걸린 시간은 2시간 15분 정도 걸렸다;;;; ~~이미지 만드느라 시간을 다 썼나?~~ 다음에는 너무 오래 걸리지 않고 간결하게 정리 할 수 있도록 해야 겠다.

Reference