[TIL] 자바스크립트에서의 Call by value & Call by reference

이 글은 제로초님의 강의 영상을 바탕으로 정리된 글입니다.
출처: https://www.youtube.com/watch?v=-w-oJp6OVd4

• call by value(값에 의한 호출): 인자로 받은 값을 복사하여 처리, 원본 데이터 값에 영향을 주지 않는다.

function a(arg) {
  arg = 10;
  console.log(arg);
}

let num = 5;
a(num); // 출력값: 10
console.log(num); // 출력값: 5
/* 
함수 스코프를 벗어나 전역에서 변수를 출력했기 때문에 
함수 내부 변동사항과는 상관없이 원본 데이터 값을 출력하게 됨
*/

• call by reference(참조에 의한 호출): 인자로 받은 값의 주소를 참조하여 원본 데이터 값에 직접 영향을 준다.

⚠️ 주의: 자바스크립트에는 call by reference가 없다. 그렇다면 아래와 같이 객체의 속성을 수정할 때는 call by reference가 아닐까?

// 예제 1.
function b(arg) {
  arg.a = 10;
  console.log(arg.a);
}

let obj = {a: 5, b: 10};
b(obj); // 출력값: 10;
console.log(obj.a); // 출력값: 10;
/* 
함수의 인자로 객체를 넘겨주게 되면 객체의 원본 주소값을 그대로 참조하기 때문에 
함수 내부에서 데이터가 변하게 되면 원본 객체 데이터의 값이 변하게 되어 
함수 스코프를 벗어나서 출력해도 변동된 데이터로 출력됨 
*/

// 예제 2.
function b(arg) {
  arg = 12;
  console.log(arg);
}

let obj = {a: 10};
b(obj); // 출력값: 12;
console.log(obj); // 출력값: {a: 10}

예제 1번은 인자로 받은 객체의 속성에 변화를 주고 있지만 예제 2번은 인자로 받은 객체 자체의 값을 바꾸고 있다. 1번에서 객체의 속성에 대한 변화는 적용이 되었지만 객체 자체의 값을 바꿀 때는 원본 객체의 값이 변하지 않았다. 따라서 이 또한 call by value이다.

결론: 인자로 받은 객체의 속성 값에 변화를 줄 때는 참조관계가 성립되지만 객체의 값 자체를 바꾸게 되면 원본 객체와의 참조 관계가 끊기게 된다. 따라서 이는 c++언어에 존재하는 call by reference와는 동일한 개념이 아니다. 자바스크립트에는 call by value개념만 존재한다.