원시 자료형 (primitive data types)
string,number,bigint,boolean,undefined,symbol,null
- 이름표가 있는 사물함에 '하나의 정보(데이터) 값'을 넣는다.
- 값을 복사하기 때문에 복사한 값을 변경해도 원본은 변경되지 않는다.
- 값 자체(메모리)상의 변경은 불가능(immutable)하지만 변수에 다른 데이터를 할당할 수는 있다.
참고 | 원시 자료형의 데이터를 재할당하는 과정
참고 자료형 (reference data type)
배열[],객체{},함수function(){}
- 변수에 할당할 때 값이 아닌 주소를 저장.
- 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 메모리의 힙(heap) 영역을 사용한다.
- 주소를 저장하기 때문에 변수를 복사하고 값을 변경하면, 원본(같은 주소를 바라보고 있기 때문에)도 변경된다.
=== (strict equality)를 사용해 주소값이 같은지 확인할 수 있다.
[] === [] // false이제 위의 예시같은 빈 배열과 빈 배열이 다르다는 사실을 쉽게 이해할 수 있다. ===은 주소값까지 비교하기 때문에 주소값이 다른 두개의 배열이라는 사실을 알 수 있다.
참조 자료형의 복사
let arr1 = [1, 2, 3]
let arr2 = arr1
arr1 === arr2
// true위 예제는 arr1를 arr2에 복사하면서 주소값을 공유하고 있다.
arr1.push(4)
console.log(arr2)
// [1, 2, 3, 4]arr1에 push(4)하면 같은 주소를 참조하고 있는 arr2 역시 변경된 배열을 확인할 수 있다.
원시 자료형을 재할당하면?
arr2 = "not array, string"
console.log(arr1)
// [1, 2, 3, 4]arr2에 원시 자료형을 재할당하면 주소를 담았던 공간에 값이 담기며, arr1은 영향을 받지 않고 배열을 그대로 출력한다.
값에 의한 호출 (Call by value)
값에 의한 호출 방식은 함수의 인자로 어떤 변수를 넘길 때 해당 변수가 가지고 있는 값을 그대로 복사하여 넘겨주는 방식.
let word = 'Hello!'
function replaceWord (str) {
str = 'Yello!'
return str
}
replaceWord(word)
console.log(word) // 'Hello!'word 변수에 담긴 'Hello!' 문자열 값을 str 매개변수의 전달인자로 넘길 때, 값 자체가 복사되어 할당된다. 즉, 함수 내의 str을 수정하더라도 word 변수에는 전혀 영향을 주지 않는다.
참조에 의한 호출 (Call by reference)
참조에 의한 호출 방식은 변수가 가리키고 있는 메모리 공간의 주소를 넘기는 방식.
let array = []
function addStringToArray (arr) {
arr.push('Hello')
return arr
}
addStringToArray(array)
console.log(array) // ['Hello']빈 array를 addStringToArray의 매개변수 arr의 전달인자로 넘길 때, array의 주소값이 할당됩니다. 같은 주소를 갖고 있기 때문에 함수 내부에서 배열을 수정할 수 있습니다.
출처
원시 자료형과 참조 자료형 | 코드스테이츠
변하지 않는 상태를 유지하는 방법, 불변성(Immutable)
XD