[JS Deep Dive] 11장 -원시값과 객체의 비교

 

 

 

 

 

 

 

 

자바스크립트에서 는 크게 원시타입과 객체타입으로 구분할 수 있다는 것을 포스팅했었다.

https://khw063011.tistory.com/89

[JS Deep Dive] 6장 - 데이터타입

 

그렇다면 이걸 구분하는 기준이 무엇일까?

총 세가지 차원에서 다르다고 말할 수 있겠다! 

=> 변경 가능 여부, 메모리공간에 저장되는 값, 전달되는 값 

 

	원시타입값	객체타입값
변경가능 여부	변경불가능	변경가능
메모리공간에 저장되는 값	실제값 저장	참조값 저장
전달되는 값	원시값이 복사되어 잔달	참조값이 복사되어 잔달

---

 

1. 변경가능 여부

 

⏭️ 원시타입값은 변경불가능한 값으로 한번 생성이 되면 읽기전용 값으로서 변경할 수 없다. 

그렇지만 우리는 이때 원시값과 변수를 헷갈려서는 안된다. 

 

원시 값 자체를 변경할 수 없다는 것이지
변수 값은 변경할 수 있다. 

 

 

우리가 변경 불가능하다고 하는 것은 변수가 아니라 값에 대한 진술이다. 

 

우리는 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간의 자체 혹은 메모리 공간을 식별하기 위한 값이었고

값은 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과를 말하는 것이었다. 

따라서 상수와 달리 변수는 언제든지 재할당을 통해 변수값을 변경할 수 있다는 것이었고 상수는 변수 값을 변경할 수 없다는 것이었다.

 

따라서 우리는 상수와 변수, 원시값을 헷갈려선 안된다!!!!

 

✔️  상수는 재할당이 금지 
✔️  원시값은 변경불가능한 "값" 
✔️  변수는 재할당이 가능, "값" 은 변경가능

 

이미지 출처: https://velog.io/@tngustkdehs/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-11.-%EC%9B%90%EC%8B%9C-%EA%B0%92%EA%B3%BC-%EA%B0%9D%EC%B2%B4%EC%9D%98-%EB%B9%84%EA%B5%90

 

 

그림으로 이해해자.

원시값을 할당한 변수에 새로운 원시값을 재할당하면

메모리 공간에 저장되어 있는 재할당 이전의 원시값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시값을 저장한 후 변수는 새롭게 재할당한 원시값을 가리킨다.

이때 변수가 참조하던 메모리공간의 "주소" 가 바뀌는 것이라고 했었다. 

 

여기서도 80 - > 100 이라는 값이 변경된게 아니라 100이라는 새로운 공간이 생기고 이 공간을 가리키는 것을 볼 수 있다ㅣ \

 

---

2. 문자열과 불변성

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

따라서 문자열이 생성이 되면 변경할 수 없다. 

 

var str = "Hello";
str = "hihilong";

// 이렇게 두번째 문을 실행을 시키면 새로운 문자열 "hihilong" 을 가리키도록 변경이 되었다.

 

이렇게 str 을 한번 할당하고 str -> 기존의 값을 변경하는 것이 아니라 새롭게 할당을 해주면 str 이 변경이 된다!

이것은 기존 문자열을 변경하는 것이 아니라 새로운 문자열을 새롭게 할당하는 것이기 때문이다.

 

 

3. 객체 타입의 변경가능한 값

=>?>  객체를 할당한 변수를 참조하려면 메모리에 저장되어 있는 참조값을 통해 실제 객체에 접근해야한다. 

원시값을 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 원시값에 접근을 한다는 것이다.

즉 원시값을 할당한 변수는 원시 값 자체를 값으로 가진다.

 

하지만~! 객체를 할당하면 

할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 "참조값" 에 접근할 수 있다.

 

참조값 !!!!

이것은 생성된 객체가 저장된 메모리 공간의 주소 그 자체이다 

 

 

4. 참조에 의한 전달

이미지 출처: https://devowen.com/481

 

객체를 가리키는 변수 원본을 다른 변수 사본 에 할당하면 원본의 참조값이 복사되어 전달되는데

이것을 참조에 의한 전달이라고 한다.

 

var person = {
	name: "hihilong",
};

var copy = person;

 

 

이렇게 되면 원본 person 과 사본 copy 는 동일한 참조값을 가지게 된다.

즉 원본 person 과 사본 copy 는 동일한 객체를 가리킨다는 것이다.

 

=> 두개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 

따라서 ~ 원본이나 사본 중에 어느 한쪽에서 객체를 변경하면 서로 영향을 받는다. 

 

자바스크립트에서는 이 용어를 <공유에 의한 전달 > 이라고 한다.