Call by Value 와 Call by Reference

😀면접을 위한 CS지식을 정리하면 콜 바이 벨류(Call by Value)와 콜 바이 레퍼런스(Call by Reference)에 대해 정리하게 되었다.

"콜 바이 벨류(Call by Value)"와 "콜 바이 레퍼런스(Call by Reference)"는 함수가 인수를 전달할 때 사용되는 방식을 나타낸다.
하지만 두가지는 이름 처럼 값과 참조를 호출하는 차이를 가진다.

콜 바이 벨류(Call by Value)

콜바이벨류(Call by Value)는 함수가 인수로 전달받은 값을 복사하여 처리하는 방식이다.
이때, 전달된 값은 기본형, 즉 JS의 원시 타입(primitive type) 데이터인 경우에 해당하며, 변수가 가진 값을 복사하여 전달하므로 함수 내에서 값을 변경해도 원본 값은 변경되지 않는다. 따라서 값의 불변성(Immutability)을 유지하는 데에 용이하다.

function addOne(x) {
  x += 1;
  return x;
}

let num = 5;
console.log(addOne(num)); // 6
console.log(num); // 5

위 예시에서 num 변수가 가진 값을 addOne() 함수에 인수로 전달하면, x라는 새로운 변수에 값이 복사된다.
addOne() 함수 내에서 x 값을 변경해도 원본 num 값은 변경되지 않는다.

• 장점 : 복사하여 처리하기 때문에 안전하다. 원래의 값이 보존이 된다.

• 단점 : 복사를 하기 때문에 메모리가 사용량이 늘어난다.

콜 바이 레퍼런스(Call by Reference)

콜바이레퍼런스(Call by Reference)란 함수 호출 시 인수로 전달되는 변수의 참조 값을 함수 내부로 전달하는 방식이다.
이 방식에서는 함수 내에서 인자로 전달된 변수의 값을 변경하면, 호출한 쪽에서도 해당 변수의 값이 변경된다. 이는 인자로 전달되는 값이 변수의 주소이므로, 함수 내에서 변수의 값을 변경하면 해당 주소에 저장된 값이 변경되기 때문이다.

function addOne(arr) {
  arr.push(1);
  return arr;
}

let nums = [1, 2, 3];
let result = addOne(nums);
console.log(result); // 출력: [1, 2, 3, 1]
console.log(nums); // 출력: [1, 2, 3, 1] (원본 값도 함께 변경됨)

예시에서 addOne 함수에 nums 변수의 참조 값을 전달하면, arr 변수에도 nums 변수의 참조 값이 복사된다.
따라서, 함수 내부에서 arr 값을 변경하면 원본 nums 값도 함께 변경된다.

• 장점 : 복사하지 않고 직접 참조를 하기에 빠르다.

• 단점 : 직접 참조를 하기에 원래 값이 영향을 받는다.(리스크)

콜 바이 레퍼런스 단점의 보완

😀원래 값이 영향을 받는 단점을 보완하려면 어떻게 해야할까?

콜 바이 레퍼런스는 참조 타입을 전달하는 방식이다. 참조 타입의 경우 객체의 참조 값이 복사되므로, 객체 내부의 값이 변경되면 원본 객체도 함께 변경되는 문제가 발생한다. 그렇다면 우리는 원본의 불변성은 지킬 수 없게된다. 데이터의 원본이 수정되는 불상사가 발행하는 것이다.

이러한 문제점을 해결하려면 어떻게 해야할까?

이전에 포스팅한 얕은복사 깊은복사에서 깊은복사(deep copy)를 이용하는 방법이 있다.

깊은복사(deep copy)도 마찬가지로 객체를 복사하였을 때 원본에 영향을 주지않는 방식을 사용하고 있다.

• ⛔물론 단점의 보완을 위해 복사를 사용하게 되면 메모리를 소모하게 되고, 속도의 장점을 잃어버릴 수 있다.
  따라서 깊은 복사와 콜바이레퍼런스를 함께 사용할 때는 상황에 따라서 적절히 선택해야 할 것이다.

  원본변경을 해야하는 인수라면 그대로 동작시키고, 불변성을 지켜야 한다면 깊은복사를 이용해서 동작시킬 필요성이 생길 것이다.

아래는 함수 호출 시 인수로 전달되는 변수의 참조 값을 함수 내부로 전달하되 참조 객체를 깊은복사를 통해 전달하여, 원본의 불변성을 지키는 예시이다.

function changeName(obj) {
  obj = JSON.parse(JSON.stringify(obj)); // 깊은 복사
  obj.name = 'John';
  return obj;
}

let person = { name: 'Jane', age: 25 };
let result = changeName(person);
console.log(result); // 출력: { name: 'John', age: 25 }
console.log(person); // 출력: { name: 'Jane', age: 25 } (원본 값은 변경되지 않음)

참고자료(출처)
Velog -younoah 포스팅 'Call by value'와 'Call by reference' (feet. 자바스크립트)
Velog sinclebear 포스팅 [Javascript] Call by Value vs. Call by Reference와 얕은 복사 vs. 깊은 복사
Chat GPT 검색결과 [콜 바이 레퍼런스를 사용했을 때 원본의 불변성을 지키기 위한 방법]