[Javascript] Call by value vs Call by reference

 Call by value / Call by reference는 프로그래밍 언어에서 사용되는 평가 전략(Evaluation Strategy) 중 하나이다.

평가 전략(Evaluation Strategy)은 프로그래밍 언어에서 함수 호출 시 전달한 인자(argument)의 순서를 언제 결정하고 함수에 어떤 종류의 값을 통과시킬지 결정하는 것이다. 근래의 대부분의 프로그래밍 언어들은 값에 의한 호출(call-by-value)과 참조에 의한 전달(pass-by-reference)가 통합되고 있다. 

출처 위키백과 - 평가 전략 (컴퓨터 프로그래밍)

 

 

💡 다루기 전에

 

이것들을 다루기 전에 Javascript의 데이터 타입에 대해서 알아야 한다.

 

기본형 (Primitive Type)

 

• Number
• String
• Boolean
• null
• undefined
• Symbol (ES6 추가됨)

참조형 (Reference Type)

 

• Array
• Function
• RegExp
• Set / WeakSet
• Map / WeakMap

여기서 알고 가야 할 것은 함수 호출 시 기본형 데이터는 값(value)이 전달되고 참조형 데이터는 참조(reference)가 전달된다.

📌 Call by value

Call by value는 함수 호출 시 인자(argument)로 값을 그대로 복사해 전달한다. 인자의 원본과 복사본은 서로 다른 메모리에 할당되어 있기 때문에 함수에 의해 복사본이 수정되더라도 원본에 영향을 미치지 않는다.

 

var foo = 1

var baz = function (bar) {
  bar = "abc";
} 

baz(foo);

console.log(foo); // 1

 

기본형 데이터를 인자로 넘기면 call by value로 동작해 복사한 값이 전달되어 함수 내부에서 "abc"를 할당하더라도 원본값이 바뀌지 않는다.

📌 Call by reference

Call by reference는 함수 호출 시 인자(arguments)로 참조(reference, 메모리상의 주소)를 전달한다. 값을 복사하는 것이 아닌 메모리상의 주소인 '참조'를 전달하는 것 이다. 원본과 복사본이 동일한 참조를 가지기 때문에 함수에 전달된 복사본을 수정할 경우 원본이 함께 수정된다.

 

var foo = { a: 1 };

var baz = function (bar) {
  bar.b = "abc"; 	
  return bar;
}

console.log(baz(foo)); // { a: 1, b: "abc" }
console.log(foo);      // { a: 1, b: "abc" }

 

📌 Call by sharing

자바스크립트는 함수 호출 시 call by value이면서 동시에 call by reference로 인자를 전달할까?

 

var num = 1;
var obj1 = { key: 2 };
var obj2 = { key: "abc" };

var baz = function (a, b, c) {
  a = 100;
  b.key = 200;
  c = { key: "def" }
}

baz(num, obj1, obj2);

console.log(num);  // 1️⃣ result ➡ 1 
console.log(obj1); // 2️⃣ result ➡ { key: 200 }
console.log(obj2); // 3️⃣ result ➡ { key: "abc" }

 

 

1️⃣ 기본형(Primitive Type) 데이터를 인자로 전달했을 경우

 

원본이 저장된 메모리 공간과 복사본이 저장된 메모리 공간이 서로 다르기 때문에 원본을 해치지 않는다. (call by value)

 

 

2️⃣ 참조형(Reference Type) 데이터를 인자로 전달했을 경우

 

원본과 복사본이 참조하는 메모리 공간이 같기 때문에 복사본의 값을 변경했을 경우 원본을 해친다. (call by reference)

 

 

3️⃣ 참조형(Reference Type) 데이터를 인자로 전달하고 복사본에 값을 재할당했을 경우

 

대입연산자( = )를 이용해 복사본에 값을 재할당할 경우 원본에 대한 참조가 아닌 새로운 메모리 공간을 참조하기 때문에 원본을 해치지 않는다.

 

인자로 전달되는 데이터 타입에 따라 동작하는 방식을 call by sharing 이라고 한다.

 

 

참조

https://reese-dev.netlify.app/javascript/evaluation-strategy/