자바스크립트에서 놓칠 수 있는 아주 기본적인 부분!!

코알못.

코드를 전혀 알지못하던(코알못) 내가 자바스크립트를 배우며 놓치고 있던 많은 부분들 중 한가지를 기록하려 한다.

그 이름하야 call by value, call by reference !!

자바스크립트로 코드를 짜다 보면 당연히 매순간 만나는 것이 변수에 대입연산자를 활용해 값을 저장하거나 불러오는 것이다. 하지만 원하는 결과값이 추출되지 않는 상황이 발생하곤 하는데 바로 기본자료형과 Object의 데이터를 불러오는 차이, call by value, call by reference 에 대해 알아보겠다.

기본자료형이라면 string, number, boolean, null, undefined 가 있으며 그 이외의 사용자가 정의한 Object나 function을 비교하여 예시를 통해 설명하겠다.


var i = 10;
var some = {
num : 10,
name : ‘CodeStates’
};
function foo(val){
val = val * 2;
}
function foo2(val){
val.num = 20;
}
foo(i);
foo2(some);
console.log(i);
console.log(some.num);

그럼 여기서 문제!

`과연 무엇이 출력될 것인가?

call by value 와 call by reference를 제대로 이해하고 있지 못하다면 
첫번째 값에는 20
두번째 값에는 20
이라고 생각할 것이다.

(만약 첫번째 값에 10, 두번째 값에 20 이라고 생각한 독자는 ‘뒤로가기’ 버튼을 누르고 시간을 아끼시길…)

정답은 10과 20이다.

이 차이에서 call by value 와 call by reference가 발생한다.

아주 간단하고 짧게 설명을 하자면
기본자료형 (string, number, boolean, null, undefined) 은 그 값(value)를 복사하여 function 에서 실행이될 뿐 원본값에는 어떠한 변화가 없다. 
결국 i = 10 의 값이 foo(i) 함수 안에서서 * 2 가 되지만 함수가 끝난 뒤에는 사라지는 값이기에 console.log(i) 했을때 원본값 10 그대로가 출력된다. (call by value)

기본자료형을 제외한 Object, Array, 사용자정의 함수는 원본값을 참조하기 때문에 foo2(some) 을 통해 Object some의 num : 10 (원본)값을 변화시켜 준다. 그렇기에 console.log(some.num)의 값은 변화된 20이 출력된다. (call by reference)

매우 기초적인 부분이지만 확실하게 학습하지 않으면, 이후 아주 복잡한 코드에서 큰 문제를 발생하고, 다른 사람의 코드를 이해하는데에 어려움을 겪을 수 있으므로 다른 예제나 직접 연습을 더하면 좋을 듯 하다.

앞으로도

코알못의, 코알못을 의한, 코알못에 위한 자바스크립트 기초적이지만 중요한!!! 포스팅은 이어집니다.

See Ya-