꾸준히 합시다
call by value, call by reference in JS 본문
call by value와 call by reference 모두 변수나 객체 등이 함수의 인자(arguments)로 들어와 매개변수(parameter)로 전달될 때 어떤 방식으로 전달될지를 결정하는 방식이다.
parameter (매개변수) vs arguments (인자)
우선 parameter(매개변수)와 arguments(인자)에 대해 짚고 넘어가면 parameter는 formal parameter(형식 매개변수)로 인식하면 되고, arguments는 actual parameter(실인자)로 받아들이면 된다.
간단하게 예제로 살펴보자.
const a = 1;
const func = function (b) { // parameter, formal parameter, 매개변수, 형식 매개변수
// code...
};
func(a); // arguments, actual parameter, 인자, 실인자
parameter, formal parameter, 매개변수, 형식 매개변수는 b가 되는 것이고, 실제로 넘어가는 값인 arguments, actual parameter, 인자, 실인자는 1이 되는 것이다.
parameter는 함수 선언부에 정의되고, arguments는 함수 호출부에서 사용된다.
Call by Value (값에 의한 호출)
call by value는 값에 의한 호출이라고도 하는데 복사된 값을 인자로 넘겨서 매개변수로 전달한다는 의미이다. 인자로 들어온 변수가 원시형 타입(Primitive type)의 데이터인 경우 call by value 방식으로 전달된다. caller가 인자를 복사해서 넘겨주었으므로 호출된 함수 내에서 해당 인자에 변형이 일어나도 기존의 변수는 영향을 받지 않는다.
const a = 1;
const func = function (b) { // callee
b = b + 1;
console.log(b); // 2
};
func(a); // caller
console.log(a); // 1
Call by Reference (참조에 의한 호출)
call by reference은 참조에 의한 호출인데, 실제 데이터가 존재하는 주소를 가리키는 주소 값을 인자로 넘겨서 매개변수로 전달한다는 의미이다. 객체(ex. obj, array, function 등)는 call by reference 방식으로 전달된다. 아래 예제처럼 caller가 인자를 주소 값만을 복사했기 때문에 callee에서 해당 인자를 변경하면 caller는 영향을 받게 된다.
const a = {};
const func = function (b) { // callee
b.a = 1;
};
func(a); // caller
console.log(a.a); // 1
Call by Reference in JS
위 예시를 보면 자바스크립트에서도 call by reference 방식 사용이 가능한 것처럼 보이지만 엄밀히 말하면 자바스크립트는 완전한 call by reference의 개념을 가지고 있진 않다.
포인터나 call by reference 개념을 가진 C, C++와는 대조적으로 자바스크립트는 객체의 프로퍼티 값이 아닌 객체 자체의 변경은 허용하지 않는다. 아래 예시를 살펴보자.
function foo (obj2) {
obj2 = 10;
console.log(obj2); // 10
}
const obj1 = { a: 5, b: 8 };
foo(obj1);
console.log(obj1); // C, C++에서는 10이 출력되지만 JS는 { a: 5, b: 8 } 출력된다
완전한 call by reference 개념을 가진 C, C++ 언어의 경우에는 obj1과 obj2이 완전한 주소 값 참조로 연결되어 있지만 자바스크립트에서는 주소 값의 복사본을 만들어서 넘기기 때문에 함수 내에서 매개변수가 재할당되었다면 obj2는 더 이상 obj1에 영향을 줄 수 없다.
이처럼 자바스크립트의 call by reference는 C나 C++ 언어에서 보여지는 완전한 call by reference와 차이가 있기 때문에 call by sharing이라는 용어를 사용하기도 한다.
'자바스크립트 기초' 카테고리의 다른 글
Array.prototype.sort() 특정 기준으로 정렬하기 + Sequelize ORM (0) | 2022.07.21 |
---|---|
var, let, const의 차이점 (0) | 2022.06.06 |
변수: 선언, 초기화, 할당 (0) | 2022.06.01 |
스코프와 호이스팅 Scope and Hoisting (0) | 2021.12.03 |
삼항 연산자 (0) | 2021.07.17 |