개요

개발 커뮤니티 과정중에 이번에 신입으로 합격하신 분의 Q&A 시간이 있었다.
기술 면접 질문에 관해서 내가 질문했고, 구글링해서 나오는 기술면접 리스트에서 정말 많이 나왔다고 하셨다. 호기심이 생겨서, 그래도 답변하기 어려웠던 질문이 있었냐고 물어봤는데, 그것이 바로 오늘의 주제다.

Call by value VS Call by reference

면접관이 "React는 Call by value에요, Call by reference에요?" 라고 질문을 했다고 한다. 나도 난생 처음 듣는 말이었지만, 값에 의한 전달, 참조에 의한 전달이라고 깨달아서 모던 자바스크립트 Deep Dive에서 나왔던 말이 생각났다. 사실 이 단어는 자바스크립트에서 사용되는 용어가 아닌 다른 프로그래밍 언어들에서 사용되는 것의 개념을 가져온 것이기 때문에 100% 일치하게 동작하지는 않는다고 한다.

위에 짤을 보면 충분히 이해가 될거라고 생각이 든다. Call by Reference는 참조하는 주소값을 전달하고 Call by value는 할당된 값 자체를 보내는 것이다.
그렇다면 간단히 생각해서 자바스크립트에서의 객체는 참조에 의한 전달을 한다는 것을 익히 알고 있으니 원시값은 Call by value, 객체는 Call by reference이구나! 라고 생각이 들 수도 있는데 이는 큰 착각이다.

자바스크립트는 Call by value

결론부터 말하자면 자바스크립트는 언제나 Call by value로 동작한다. 따라서 React도 Call by value라고 할 수 있다. 이를 증명하는 방법은 다음과 같은 코드에서 확인할 수 있다.

function func(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

func(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

자바스크립트가 Call by reference라면,
num의 주소를 참조해서 func함수에 a라는 매개변수로 들어가고 10이 곱해져서 num을 출력하면 100이 나와야 한다.
obj2는 {item: "changed"}라는 객체를 참조하고 있어야 한다.

하지만, 결과는

// 결과
10
changed
unchanged

로 나온다.

왜냐하면 참조 타입의 경우, 해당 객체의 주소값을 value로 가지는 타입이다. 즉, 참조 타입의 value는 주소이다. 하지만 함수로 들어온 매개변수는 매개변수 그 자체로 보고, 매개변수는 참조가 아닌 값을 전달받기 때문이다. 그러므로 a는 func안에서 선언된 매개변수에 그냥 10을 곱한 것 뿐이고 c는 func안에 매개변수 c로써 {item: "changed"} 객체를 할당받은 것이다.

결론

생각보다 난이도가 높지 않은 듯 하지만 확실히 헷갈리는 개념이다. 면접시간에 이런 질문을 받는다면 당황하지 않고 천천히 번역부터 시도해서 개념을 생각해 내야겠다.