원시값과 객체의 비교 : 값이 할당되고 복사되는 방식의 차이

원시값과 객체의 비교 : 값이 할당되고 복사되는 방식의 차이

 

자바스크립트의 데이터타입은 크게 원시타입과 객체타입으로 구분할 수 있다.

원시타입 : 숫자, 문자열, 불리언, undefined, null, 심벌 
객체타입 : 함수, 객체, 배열

 

이들은 크게 세 가지 측면에서 다르다.

• 변경 가능 여부
  원시 타입의 값은 변경 불가능한 값이고, 객체 타입의 값은 변경 가능한 값이다
• 변수에 할당 될 때
  원시 타입의 값은 변수에 실제 값이 저장되고, 객체 타입의 값은 변수에 메모리 주소가 저장된다.
• 다른 변수에 할당(복사)할 때
  원시값을 가진 변수는 원본의 값이 복사되어 전달되고, 객체값을 가진 변수는 원본의 참조값이 복사된다.
  

 

원시값(1) - 변경 불가능한 값

원시타입의 값은 변경 불가능immutable한 값이다.

원시값 자체는 변경 불가능하지만 변수는 언제든지 재할당을 통해 변경할 수 있다. 재할당으로 변수를 변경할 수 있지만 새로운 메모리 공간에 데이터가 저장되는 것이지 원시값이 바뀌는 것은 아니다. 

 

원시값(2) - 문자열

문자열은 0개 이상의 문자로 이루어진 집합이다. 문자열은 유사배열객체여서 배열과 비슷한 속성을 지닌다.

인덱스 프로퍼티 / length 프로퍼티 / for문의 사용이 가능하다. 

하지만 문자열도 원시값에 해당되기 때문에 데이터 변경은 불가능하다. 변수에 재할당은 가능하다

 

원시값(3) - 값을 복사한다

이미지참고 : https://hyeok999.github.io/2019/10/09/javascript-preview-10/

let score = 80;
let copy = score;

console.log(score);	// 80
console.log(copy);	// 80

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

 

copy가 score의 값을 복사했다. score의 값을 100으로 바꿨을 때 copy의 값은 바뀌지 않는다. 

copy는 score의 80이라는 값을 복사해 새로운 메모리 주소에 저장한 것이다. copy와 score는 80이라는 값은 같지만 메모리주소는 같지 않기 때문에 전혀 다른 값이 된다. 그렇기에 score가 값을 변경해도 copy에는 영향을 주지 않는다.

 

 

 

객체값(1) - 변경 가능한 값

객체는 프로퍼티의 개수가 정해져 있지 않으며 동적으로 추가, 삭제가 가능하다.

객체 타입의 값은 변경 가능한mutable 값이다.

이미지참고 : https://velog.io/@niyu

원시값은 변경 불가능한 값이므로 재할당을 통해 메모리에 원시값을 새롭게 생성해야 하지만 객체는 메모리에 저장된 객체를 직접 수정할 수 있다. 객체를 변경할 때마다 원시값처럼 재할당을 해야 한다면, 메모리가 비효율적으로 소비되고, 성능도 나빠질 수 있기 때문에 객체는 변경 가능한 값으로 설계되었다. 단점이 있다면, 여러개의 변수가 하나의 객체를 공유할 수 있다는 것이다. 

 

 

객체값(2) - 참조를 복사한다

이미지참고 : https://velog.io/@niyu

여러개의 변수가 하나의 객체를 공유할 때의 문제점이 발생할 수 있다. 원본 person의 값을 복사해 copy를 만들었다. 두 변수는 똑같은 객체를 참조하고 있다. 이 경우 person과 copy는 메모리는 다르지만 동일한 참조값(하나의 객체를 공유)을 가지고 있다. 어느 한쪽에서 객체를 변경하게 되면 서로 영향을 받을 수 있다. 

 

 

 

DeepDive - 원시값과 객체의 비교

책을 사길 정말 잘했다는 생각이 든다. 다른 블로그처럼 더 멋있게 정리하고 싶은 욕망이 들기도 하지만 지금 내가 가장 집중해야 하는 것에 집중하자. 공부가 먼저고 기록은 부차적인 것이라 생각한다. 시간이 많지 않기 때문에, 집중해야 하는 부분에 더 시간을 쏟아야 한다는 말이다. 어차피 한번 읽고 끝낼 책도 아니다! 분명 다음번에 또 이 포스트를 보게 될 것이다. 그 때 더 추가해서 정리하자.