값과 참조 (Value & Reference)

 

 

자바스크립트는 데이터 타입에 따라서 전달되는 방식이 다릅니다.

 

값에 의한 전달 (passed by value)

Boolean, Null, Undefined, String, Number
(원시 타입)
-
데이터 타입이란

참조에 의한 전달 (passed by reference)

Array, Function, Object
(사실 전부 객체라고 할 수 있습니다)
-
배열 (array)
함수(function)
객체(object)

 

 

원시 타입의 전달 (복사)

변수들을 등호(=)를 사용하여 다른 변수에 할당할 때 새로운 변수에 값을 복사(copy)합니다.

let x = 7;
let y = 'seven';

let number = x;
let movie = y;

console.log(x, y, number, movie);
// 7, 'seven', 7, 'seven'

컴퓨터 메모리 상에 x와 number, y와 movie가 같은 값을 가지고 있지만 서로 분리되어 있습니다.

즉, 같은 값을 가진 변수를 바꾸더라도 다른 변수에는 아무런 영향이 없습니다.

 

 

---

 

객체의 전달 (참조)

원시 타입이 아닌 값이 할당된 변수들은 그 값으로 향하는 참조(reference)를 가지게 됩니다.

참조는 실제로 값을 가지고 있지 않고, 메모리에서 객체의 위치를 가리키고 있다는 말입니다.

만약에 아래의 코드가 실행된다면 메모리 내부에 배열을 만들고 변수 array는 배열의 주소가 됩니다.

let array = [];

 

만약에 push를 한다면 변수의 위치에 저장된 정보를 이용해서 메모리 안에 있는 배열에서 작업을 수행합니다.

변수의 값이 바뀌지 않고 메모리 안에 있는 배열에 값이 추가되는 것입니다.

let array = [];
array.push(7);

 

참조 할당

객체와 같은 참조타입의 값이 등호(=)를 이용해서 다른 변수로 복사될때, 그 값의 주소가 복사됩니다.

let array = [7];
let number = array;

 

값의 주소만 복사되므로 어느 변수에서 객체를 수정한다면 다른 변수도 변경됩니다.

let array = [7];
let number = array;
console.log(number);	// [7]

number.push('seven');
console.log(array);	// [7, 'seven']
console.log(number);	// [7, 'seven']

 

 

참조 재할당

이전의 참조를 대체하여 새로운 참조를 할당하면 자바스크립트 엔진은

가비지 컬렉션(garbage collection)을 동작하여 사용하지 않는 객체를 메모리로부터 안전하게 지웁니다.

let obj = {number: 7};
obj = {movie: 'seven'};

 

 

---

 

 

함수의 전달 (참조)

순수 함수 (Pure function)

함수로 원시 값을 전달할때 함수는 값을 복사하여 파라미터로 전달합니다. 등호(=) 연산자로 값을 복사하는 것과 같습니다.

함수가 원시 값을 파라미터로 이용하고 바깥 스코프에 영향을 주지 않는다면 반환되는 즉시 가비지 콜렉션 처리가 됩니다.

let number = 7;
let movie = 'seven';

function movieBuff(x, y) {
    return '나는 ' + x + '을 ' + y + '번 봤지'
}

let steven = movieBuff(movie, number)
// '나는 seven을 7번 봤지'

 

부수 효과 (Side effect)

함수가 객체를 받아서 파라미터로 전달한다면 주변 스코프에 영향을 줄 수 있습니다. 함수가 반환된 뒤에도 남아서

바깥 스코프에 원하지 않는 부작용을 줄 수 있습니다. 디버깅으로 찾아내기 힘듭니다.

let steven = ['seven', 7];

function movieBuff(x, y) {
    return '나는 ' + x + '을 ' + y + '번 봤지'
}

function liar(array) {
    array[1] = 1
}

let says = movieBuff(array[0], array[1])  // '나는 seven을 7번 봤지'

liar(steven)  // steven = ['seven', 1]
let says = movieBuff(array[0], array[1])  // '나는 seven을 1번 봤지'