TIL 123. Javascript의 call by value vs call by reference

자바스크립트가 "call by value"인지 "call by reference"인지 설명해달라는 질문을 받았다. 집에 돌아와서 찾아보는데, 문득 "call by value"와 "call by reference"를 정의하는 이유부터가 궁금했다.

call by value와 call by reference을 정의하는 이유

"call by value"와 "call by reference"는 프로그래밍 언어에서 함수 호출 방식을 설명하는 두 가지 주요 접근 방식인데, 이러한 용어는 변수 또는 매개변수가 함수로 전달될 때 어떻게 동작하는지를 나타내고 이 두 가지 접근 방식은 언어의 설계와 구현에 영향을 미치며, 프로그래머가 코드를 이해하고 작성할 때 중요한 역할을 한다고 한다.

그럼 call by value와 call by reference가 뭐야?

Call by Value (값에 의한 호출)

정의

함수에 전달되는 변수나 값이 실제로 값 자체를 복사해서 전달된다.

특징

함수 내에서 매개변수 값이 변경되어도 호출자의 변수는 변경되지 않는다.

예시

function updateNumber(num) {
  num = num + 1;
}

let x = 5;
updateNumber(x);
console.log(x); // 출력: 5 (변경되지 않음)

Call by Reference (참조에 의한 호출)

정의

함수에 전달되는 변수나 값이 해당 값이 저장된 메모리의 주소(참조)를 전달한다.

특징

함수 내에서 매개변수 값을 변경하면 호출자의 변수도 변경될 수 있다.

예시

function updateArray(arr) {
  arr.push(4);
}

let myArray = [1, 2, 3];
updateArray(myArray);
console.log(myArray); // 출력: [1, 2, 3, 4] (변경됨)

그럼 자바스크립트는 둘 다?

결론만 말하면 자바스크립트에 call by reference는 없다.

const call = (obj) => {
  obj.a = 2;
};

let b = { a: 1 };
console.log(b); // {a:1}
call(b);
console.log(b); // {a: 2}

위 예시를 보면 마치 call by reference에 의해 원본이 바뀐 것처럼 보인다.

하지만 아래 예시를 보면 아니라는 걸 알 수 있다.

const call = (obj) => {
  obj = { a: 2 };
};

let b = { a: 1 };
console.log(b); // {a:1}
call(b);
console.log(b); // {a:1}

두 예시 모두 객체를 조작하는 코드지만 call by value였다면 원본에 영향이 미쳤기 때문에 첫번째 예시가 설명되지 않고 두번째 예시에선 원본에 영향을 미치지 않았기 때문에 call by reference로도 설명이 되지 않는다.

즉, JavaScript는 "값에 의한 호출" (call by value)을 따른다. 그러나 JavaScript에서는 값이 객체나 배열과 같은 참조 타입인 경우에도 해당 값의 참조(reference)가 전달되므로, 이로 인해 "참조에 의한 호출"과 유사한 동작이 나타나는데 이러한 특징은 "call by sharing"이라는 용어로 표현되기도 한다.