[JavaScript] 원시값와 참조값

요약

• 자바스크립트에는 총 7가지의 데이터 타입이 있고, 원시타입과 참조(객체)타입으로 나뉜다.
• 원시값은 변경 불가능한 값이고, 원시값을 복사하여 전달하면 '값에 의한 전달'이라 한다.
• 참조값은 변경이 가능한 값이고, 참조값을 복사하여 전달하면 '참조에 의한 복사'라 한다.

자바스크립트 데이터 타입

• 원시타입(Primitive Type) : String, Number, Boolean, Null, Undefined, Symbol

• 참조(객체) 타입(Reference Type) : Array, Object, Function
  

원시값(Immutable Value)

원시값은 값의 변경이 불가능한 값으로, 변수에 원시 값을 할당하면 변수에 실제 데이터의 값이 저장된다. 또한 원시값을 저장한 변수에 새로운 값을 재할당하게 되면 새 메모리 공간에 값을 새로 저장한다.

let a = 1;
console.log(a); // 1

a = 2; // 재할당 -> 앞에 할당한 값 1은 여전히 다른 공간에 존재

또한, 원시값을 복사하여 전달도 가능하며 이는 '값에 의한 전달'이라고 한다.
복사하여 전달한 값 또한 재할당처럼 새 메모리 공간에 저장하기 때문에 복사한 값에 값을 재할당을 하여도 기존 변수에 영향을 주지 않는다.

let b = a; // a에 담긴 원시값을 b에 복사하여 전달 -> 값에 의한 전달
console.log(b) // 2 -> a = b

b = 3;
console.log(a == b) // false -> a=2, b=3

참조값 (Mutable Value)

참조값은 값의 변경이 가능하다. 변수에 값을 할당할 때 값이 아닌 주소를 저장하기 때문에 참조값은 저장된 주소 안에 있는 값을 복사해 가져오는 것으로 이를 '참조에 의한 복사'라 하며, 변수의 값을 재할당 할 경우 참조값은 변경된다.
또한, 참조값은 값이 아닌 주소를 저장하기 때문에 값이 같다고 해서 무조건 true가 나오지 않는다.

let person  = {
	name: '홍길동',
    age: 20,
}
person.name = '신짱구';

let name = {
	name: '신짱구',
    age: 20
}

let copy = person

console.log(person.name === name.name) // name의 값은 '신짱구'로 동일하게 true
console.log(person === name) // 저장된 주소 자체가 다르므로 서로 다른 객체이기 때문에 false
console.log(person === copy) // copy라는 변수에 person의 주소를 복사하여 전달했기 때문에 person의 값을 참조한 copy와 person은 같은 객체로 true