[241024] JavaScript에서의 함수 매개변수 전달

스우·2024년 10월 24일

TIL

목록 보기
1/2

JavaScript에서의 매개변수 전달: Call By Value와 Call By Sharing

JavaScript에서 함수를 사용할 때, 매개변수가 전달되는 방식은 크게 두 가지로 나눌 수 있다.
원시 타입(Primitive Type)의 경우에는 Call By Value 방식이 적용되고, 참조 타입(Reference Type)의 경우에는 Call By Sharing 방식이 적용된다.
이 두 가지 방식이 어떻게 다른지, 그리고 Call By Sharing과 Call By Reference의 차이점에 대해서 공부해봤다. 그리고 처음에는 Call By Reference와 헷갈렸는데 이도 같이 정리해보고자 한다.

원시 타입: Call By Value

원시 타입(숫자, 문자열 등)은 함수에 전달될 때 Call By Value 방식으로 동작한다. 이는 값을 그대로 복사해서 전달하는 방식이다. 따라서 함수 내부에서 그 값을 변경해도, 실제로 원래 변수는 변하지 않는다.

let a = 10;
function changeValue(x) {
  x = 20;
}
changeValue(a);
console.log(a); // 10

위 코드에서 함수 내부에서 x의 값을 변경했지만, a의 값은 여전히 10이다. 이는 함수가 a의 값을 복사해 x로 넘겼기 때문에 발생한 일이다.

참조 타입: Call By Sharing

참조 타입(객체, 배열 등)은 Call By Sharing 방식으로 전달된다. 이 방식은 객체의 메모리 주소를 복사하여 전달하는 것이다. 함수 내부에서는 그 메모리 주소를 통해 객체의 내부 값을 수정할 수 있기 때문에, 함수 외부에서도 값이 변경된 것을 확인할 수 있다.

let obj = { value: 10 };
function changeValue(o) {
  o.value = 20;
}
changeValue(obj);
console.log(obj.value); // 20

위 코드에서는 객체의 value를 변경한 결과가 함수 외부에서도 적용되었다. 이는 함수 내부에서 obj의 메모리 주소를 사용해 객체 내부 데이터를 변경했기 때문이다.

참조 타입에 새로운 객체를 할당할 때

그러나 함수 내부에서 새로운 객체를 할당하게 되면, 함수와 외부 객체 간의 연결이 끊어진다. 새로운 객체는 새로운 메모리 주소를 가지게 되고, 함수 내부에서는 더 이상 기존 객체에 접근하지 못하게 된다.

let obj = { value: 10 };
function changeValue(o) {
  o = { value: 30 }; // 새로운 객체 할당
}
changeValue(obj);
console.log(obj.value); // 10

이 경우, 함수 내부에서 새로운 객체를 할당했기 때문에 외부의 obj 값은 변하지 않는다. 함수가 더 이상 원래 객체와 같은 메모리 주소를 참조하지 않기 때문이다.

그렇다면 Call By Reference와 무슨 차이가 있는거지?

Call By Reference는 함수가 매개변수로 넘겨진 값의 메모리 주소 자체를 전달받아, 그 주소를 직접 참조하는 방식이다. 즉, 함수 내부에서 값을 변경하면 함수 외부에서도 그 변경이 그대로 반영된다. 객체를 새로 할당하더라도!

반면 Call By Sharing객체의 메모리 주소를 복사하여 전달하는 방식이다. 이는 객체 내부의 데이터를 변경할 수 있지만, 함수 내부에서 새로운 객체를 할당하게 되면 더 이상 원래 객체를 참조하지 않게 된다. 기존 객체의 주소를 더 이상 알 수 없게 되기 때문....! 즉, 내부 데이터는 수정할 수 있지만, 새로운 객체를 할당하면 외부에서는 그 변화를 인식할 수 없게 된다.

피드백

오랜만에 옛날에 들었던 플밍언 수업 내용도 떠올려보고 좋았다
계속 궁금해하는 점이 하루에 하나씩은 생긴다는게 긍정적으로 느껴진다
졸리다... 자야겠다

0개의 댓글