[매일매일]프론트엔드 기술일기: JS 함수에서 참조가 바뀌면 어떤 일이 일어날까?

이번 포스트에서는 Call by Value, Call by Reference, Call by Sharing 개념을 예제 기반으로 명확하게 정리합니다.​안녕하세요, [매일매일] 기술일기입니다.오늘은 자바스크립트 함수 호출 방식인 Call by Value, Call by Reference, 그리고 Call by Sharing 개념을 다룰 거예요.​예제를 먼저 살펴보고, 어떤 값이 왜 바뀌었는지 차근차근 분석해보겠습니다.이번 정리는 매일메일 문제와 함께, 직접 실습한 예제를 바탕으로 정리해봅니다.​💻 예제 코드

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 unchanged’ (문자열 - 원시값)a는 문자열이므로 값 자체의 복사본이 함수로 전달됩니다.함수 안에서 a = ‘a changed’를 해도, 복사된 값만 바뀌고 원본에는 영향을 주지 않습니다.🧾 결과: 그대로 “a unchanged”

2️⃣ b = { b: ‘unchanged’ } (객체 - 참조형)객체는 참조값(주소)의 복사본이 전달됩니다.하지만 함수 안에서 b = { b: ‘changed’ }처럼 새 객체를 할당하면,→ 함수 안의 b는 완전히 새로운 참조를 갖게 됨→ 외부의 b에는 영향이 없음🧾 결과: 여전히 { b: ‘unchanged’ }

3️⃣ c = { c: ‘unchanged’ } (객체 - 참조형)c도 참조형이지만, 이번엔 객체의 속성만 변경합니다: c.c = ‘changed’이 경우는 같은 객체의 속성을 바꾸는 것이므로 외부에서도 변경이 반영됩니다.🧾 결과: { c: ‘changed’ }

🔑 요약 정리​

항목

전달 방식

함수 내 변경 방식

외부에 영향 있음?

결과

a

Call by Value (원시값 복사)

a = ‘a changed’ (재할당)

❌

“a unchanged”

b

참조값 복사

b = { b: ‘changed’ } (새 객체 할당)

❌

{ b: ‘unchanged’ }

c

참조값 복사

c.c = ‘changed’ (속성 변경)

✅

{ c: ‘changed’ }

🧪 관련 개념: Call by Value vs. Reference vs. Sharing✅ Call by Value자바스크립트의 기본 방식함수로 넘어가는 건 값의 복사본 (객체는 참조값의 복사본)​✅ Call by Reference값이 아닌 참조 주소 자체를 넘긴다 (JS에는 없음)​✅ Call by Sharing (JS에서 일어나는 실제 방식)참조값(주소)의 복사본을 넘겨서, 내부에서 속성을 변경하면 외부도 영향받음하지만 재할당은 외부에 영향을 주지 않음​