다음 JS 코드의 실행 결과를 설명해주세요.
분야: 프론트엔드
function change(a, b, c) {
a = 'a changed'
b = { b: 'changed' };
c.c = 'changed';
}
let a = 'a unchanged';
let b = { b: 'unchanged' };
let c = { c: 'unchanged' };
change(a, b, c);
console.log(a, b, c); // ?
위 코드를 복사하여 브라우저 콘솔 창에서 직접 실행해보세요. 🙂
답변 보기
답: a unchanged {b: 'unchanged'} {c: 'changed'}
자바스크립트는 Call by Value 방식으로 매개변수를 전달합니다. 이는 함수 매개변수에 값의 복사본이 전달된다는 의미입니다. 이로 인해 다음과 같은 결과가 나타납니다.
1. a (문자열)
a는 문자열입니다. 문자열 값의 복사본이 파라미터에 전달되므로, 함수 내에서 값이 변경되어도 호출한 곳의 변수에는 영향을 미치지 않습니다.
따라서 호출한 곳의 a는 여전히 'a unchanged'로 유지됩니다.
2. b (객체)
b는 객체입니다. 원본 객체의 참조 값(주소)의 복사본이 파라미터에 전달됩니다. b = { b: 'changed' }와 같이 객체를 새롭게 할당하면, 해당 복사본이 가리키는 참조 값이 새로운 객체의 참조 값으로 변경됩니다.
이로 인해 함수 내의 복사본 b는 b = { b: 'changed' }의 참조 값을 가리키게 되지만, 함수 외부의 b는 여전히 { b: 'unchanged' }로 유지됩니다.
3. c (객체)
c는 객체입니다. 원본 객체의 참조 값의 복사본이 파라미터에 전달됩니다. 함수 내부와 외부의 변수가 모두 동일한 참조 값을 가리키고 있으므로, 함수 내부에서 객체의 속성을 변경하면 호출한 곳의 객체에도 영향을 미칩니다.
c.c = 'changed'는 c 객체의 속성을 변경한 것이므로, 호출한 곳의 c 객체는 { c: 'changed' }로 변경됩니다.