[JavaScript] Call By Value

자바스크립트를 공부하면서 항상 헷갈린 부분이다😰 이번엔 확실히 다지고 넘어가자

---

인자를 전달하는 방식에 따라 함수 호출 방법은 크게 두가지로 나뉜다.

Call By value 와 Call By Reference 이다. 그러면 자바스크립트는 어떤 방식으로 함수를 호출할까?

바로 Call By Value이다.

흔히들 잘못 알고 있는 사실이 한가지 있다. 바로 함수의 매개변수가 원시타입(Primitive Type)인 경우에는 Call By value이고,

매개변수가 객체형태면 Call By Reference 로 동작한다는 것이다.

이는 완전히 잘못된 사실이다.(나도 이렇게 알고 있었다..)

 

Call By Value

1. argument로 value(값)이 넘어온다. 이때 넘어올 때는 "복사된 값"이 넘어온다.

2. caller(호출하는 자)가 인자를 복사해서 넘겨줬기 때문에 callee(호출된 자)에서 받은 인자를 아무리 수정하더라도 caller는 영향받지 않는다.

3. 인자를 넘겨줄 때마다 메모리 공간을 할당하기 때문에 공간을 잡아먹는 단점 존재.

const p = 1;
function change(pri) { // callee
    pri = 10;
}
change(p); // caller
console.log(p);

p라는 변수를 인수로 넘겨주었다. 이 때 1이라는 값은 복사되어 인자 pri에게 할당된다. p와 pri의 값은 같지만 둘 다 다른 메모리 공간을 차지하게 되어 별개의 존재이다.

즉 처음 선언한 p와 change함수로 전달된 인자는 별도의 값으로 존재한다.

변수 p(값이 1)와 change함수에서 인자로 넘겨진 p(값이 10)는 전혀 다른 값이 된다.

 

 

Call By Reference

1. argument로 reference가 넘어온다. (reference : 값에 대한 참조 주소, 메모리 주소를 담고 있는 변수)

2. reference를 넘기다 보니 해당 reference가 가리키는 값을 복사하지는 않는다.

3. caller는 인자를 복사해서 넘긴 것이 아니라 참조값을 넘겼기 떄문에 callee가 받은 인자를 수정하면 caller도 영향을 받는다.

4. 메모리 공간 할당의 문제를 해결했으나, 원본 데이터 값을 훼손할 수 있다.

const me = {
  name : 'Jimmy'
};
function changeName(person) {
  person.name = 'Joo'
};
console.log(me); // { name : 'Jimmy' }
changeName(me);
console.log(me); // {name : 'Joo' }

매개변수 person에 인수로 넘겨진 me의 참조값이 전달. 따라서 me와 person는 같은 참조값을 가지고 있다.

changeName함수 안에서 person.name을 바꾸면 me.name도 변한다.

하지만 자바스크립트에서 무조건 Call By Value로 작동하기 때문에 참조타입으로 넘겨도 값이 변하지 않는다.

 

참조 타입을 인자로 넘기면 참조 값에 대한 복사본이 넘어가기 때문에 기존의 개념과는 다르기 때문에 알고 있어야 한다.

 

 

재할당 (Reassingning of Reference Type) Call By Sharing

=== 연산자로 참조값이 동일한지 비교해보자.

let obj = { p1 : 10 };
let objCopy = obj;
console.log(obj === objCopy); // true
objCopy = { p2 : 100 };
console.log(obj === objCopy); // false

obj라는 객체를 선언한다. 그리고 objCopy에 obj를 할당한다.

좀 더 자세히 알아보기 위해 임의의 주소값으로 표현해보자.

 

변수	값
obj	<0x001>
objCopy	<0x001>

주소	객체
0x001	{ p1 : 10 }

처음 할당된 a객체의 주소값은 <0x001>이다.

change함수로 호출되면 인자 a가 복사된다. 복사된 객체 obj는 a 객체의 주소값을 갖는 새로운 변수가 된다.

즉, obj와 a 두가지 변수가 동일한 객체를 바라보고 있다는 뜻.

그래서 obj객체의 속성을 변경하면 객체 a의 속성도 변경된다.

코드를 다시 살펴보자.

log에 찍히는 값은 바로 { p1 : 1 } 이다. 위에서 보았던 재할당을 기억하면서 주소값 변화를 살펴보자.

const a = { p1 : 1 };

변수	값
a	<0x001>

주소	객체
0x001	{ p1 : 1 }

 

change(a) 호출, 인자(주소값)가 복사.

변수	값
a	<0x001>
obj	<0x002>

주소	객체
0x001	{ p1: 1 }

 

change 함수 내에 obj = { p1 : 100 }

변수	값
a	<0x001>
obj	<0x002>

주소	객체
0x001	{ p1: 1 }
0x002	{ p1 : 100 }

 

마지막으로 console.log(a)에서 { p1 : 1 }가 출력된다.

즉, 객체가 바뀌지 않았다. 이유는 a 객체가 여전히 <0x001>를 가리키고 있기 때문.

 

 

정리

자바스크립트에서 함수 호출 시 Call By value로 인자가 전달된다.

Call By value는 함수가 호출되면 전달한 인자가 복사됨을 뜻한다. 하나가 되는 것이 아니라 복!!사!!!!

인자가 복사되기 때문에 원시타입(primitive type)의 경우에는 함수 바깥의 변수와 서로 별개로 동작한다.

하지만 array를 포함한 객체 타입이 인자로 전달될 경우 변수에 할당되어 있는 객체의 주소값이 복사된다.

그래서 함수내에서 매개변수의 속성을 변경하면 함수 바깥에도 동일하게 변경되는 것이다.

 

 

Reference

kim6394.tistory.com/112

velog.io/@jimmyjoo/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8F%89%EA%B0%80%EC%A0%84%EB%9E%B5-Call-By-Value-vs-Call-By-Reference-vs-Call-By-Sharing

blueshw.github.io/2018/09/15/pass-by-reference/