JavaScript에서 함수에 값을 전달하는 방식은 크게 두 가지로 나눌 수 있습니다. 바로 값에 의한 전달(pass by value)과 참조에 의한 전달(pass by reference)입니다. 이 두 가지 개념을 정확히 이해하면 함수 내부에서의 데이터 변경이 외부 변수에 어떤 영향을 미치는지 명확하게 파악할 수 있습니다.
값에 의한 전달 (Pass by Value)
값에 의한 전달 방식에서는 함수를 호출할 때 변수의 값 자체가 인수(argument)로 직접 복사되어 전달됩니다. 따라서 함수 내부에서 인수의 값을 변경하더라도 함수 외부에서 전달된 원본 변수에는 아무런 영향을 미치지 않습니다.
JavaScript는 기본적으로 항상 값에 의한 전달 방식으로 동작합니다. 그렇기 때문에 변수의 값을 변경해도 기본형(primitive) 데이터인 문자열(String)이나 숫자(number) 자체는 절대 변하지 않습니다.
다음 예제에서 변수 'a'에는 값 1이 할당되어 있습니다. 하지만 함수 'change' 내부에서는 이 값이 2로 재할당됩니다. JavaScript는 항상 값에 의한 전달 방식으로 동작하므로, 최종 출력 결과는 '2'가 아니라 '1'이 됩니다.
예제
<html>
<body>
<script>
let a = 1;
let change = (val) => {
val = 2
}
change(a);
document.write(a);
</script>
</body>
</html>
출력 결과
1
참조에 의한 전달 (Pass by Reference)
반면, 함수를 호출할 때 인수 대신 해당 데이터의 메모리 주소(참조)가 전달되는 경우도 있습니다. 이때는 함수 내부에서 값을 변경하면 함수 외부에서 전달된 원본 변수까지 함께 변경됩니다. 이러한 동작 방식을 참조에 의한 전달이라고 부릅니다.
JavaScript에서는 주로 배열(array)과 객체(object)가 참조에 의한 전달처럼 동작합니다. 다만 엄밀히 말하면 JavaScript에서는 '참조값' 자체가 값으로 복사되어 전달되는 것이며, 실질적인 결과는 참조에 의한 전달과 같습니다.
다음 예제에서는 객체 'a'가 함수 'change' 외부에서 선언되어 있습니다. 여기서 주목해야 할 점은 변수 'a'가 새로운 값으로 재할당된 것이 아니라 변이(mutation), 즉 내부 속성이 직접 수정되었다는 것입니다. 참조에 의한 전달이 발생하는 시점은 바로 이러한 변이(mutation)가 일어날 때입니다.
예제 1
<html>
<body>
<script>
let a = {num:1};
let change = (val) => {
val.num = 2
}
change(a);
document.write(JSON.stringify(a));
</script>
</body>
</html>
출력 결과
{"num":2}
위 예제에서는 함수 내부에서 객체의 속성 'num'을 직접 수정했기 때문에, 함수 호출이 끝난 후에도 외부 변수 'a'의 값이 {'num':2}로 변경된 것을 확인할 수 있습니다.
그렇다면 다음 예제는 어떨까요? 이번에는 변이(mutation) 대신 매개변수 'val'에 새로운 객체 {num:2}를 재할당(reassignment)했습니다. 이 경우 값에 의한 전달 방식으로 동작하여, 함수 외부의 원본 변수 'a'에는 아무런 영향을 미치지 않습니다.
예제 2
<html>
<body>
<script>
let a = {num : 1};
let change = (val) => {
val = {num :2};
}
change(a);
document.write(JSON.stringify(a));
</script>
</body>
</html>
출력 결과
{"num":1}
핵심 정리
- 기본형 타입(숫자, 문자열, 불린 등)은 항상 값에 의한 전달로 동작하며, 함수 내부에서 변경해도 원본에 영향이 없습니다.
- 객체와 배열은 참조값이 전달되므로, 함수 내부에서 속성을 직접 수정(변이)하면 원본 데이터도 함께 변경됩니다.
- 같은 객체라도 함수 내부에서 새로운 값을 재할당하면 원본에는 영향을 주지 않습니다. 즉, '변이'와 '재할당'의 차이를 구분하는 것이 핵심입니다.