[JS ES6]-[9] primitive(원시)/reference(참조) 핵심만 이해하기

안녕하세요

이번 글에서는 자바스크립트에서의  primitive(원시)/reference(참조) data type 핵심만 알려드리겠습니다.

 

썸네일

1. primitive data type(원시타입)

숫자(Number), 문자열(String), 불리언(Bollean), null, undefiend, Symbol

 

원시 타입은 변수 간에 독립적으로 저장합니다.

즉, 한 변수의 값을 변경하더라도 다른 변수의 값은 영향을 받지 않습니다.

 

 

2. reference data type(참조타입)

객체, 배열, 함수

 

참조타입은 값이 저장되는 메모리 공간의 주소를 가리킵니다.

원시타입처럼 변수를 독립적으로 저장하지 않고,

자료가 어디 있는지 레퍼런스(참조)를 저장합니다.

 

var number= [10];

여기서 number는 [10]을 저장하지 않습니다.

[10]이 저장된 위치를 가리키는 레퍼런스가 저장되어 있습니다.

한마디로 변수가 저장된 게 아니라 “[10] 이 저기 저장되어 있다”는 정보만 담고 있습니다.

 

 

그래서 reference data type 중 하나인, 배열을 복사하면 이상한 일이 일어납니다.

var number1= [10];
var number2 = number1;

number2[0] = 15;

console.log(number1);  //15
console.log(number2);  //15

number2의 값만 바꿨지만 number1도 값이 같이 바뀝니다.

 

 

number1과 number2는 같은 메모리 공간의 주소를 가리켜서,

그래서 number2의 참조를 바꾸면 number1의 참조도 바뀌어 버립니다.

그래서 15, 15가 출력되고요.

 

 

참조타입은 이렇게 등호를 써서 복사하면,

값이 하나만 바뀌어도 2개가 바뀔 수 있기에 추적이 힘들어집니다.

그래서 등호대신 Spread Operator(전개 연산자), 혹은 다른 복사방법 등을 이용하는 게 좋습니다.