반응형
1. Call by Value (값에 의한 호출)
Call by Value는 기본 자료형(Primitive Type)을 함수의 매개변수로 전달할 때 발생합니다.
자바스크립트에서 기본 자료형은 다음과 같습니다.
- Number
- String
- Boolean
- Null
- Undefined
- Symbol
- BigInt
이 경우, 함수 내부에서 변수의 값을 변경하더라도 원본 변수에는 영향을 주지 않습니다.
예제
function modifyValue(x) {
x = 10;
console.log("함수 내부의 x:", x);
}
let a = 5;
console.log("함수 호출 전 a:", a);
modifyValue(a);
console.log("함수 호출 후 a:", a);
실행 결과
함수 내부에서 x의 값을 변경했지만, a는 영향을 받지 않았습니다. 이는 a의 값이 복사되어 전달되었기 때문입니다.
함수 호출 전 a: 5
함수 내부의 x: 10
함수 호출 후 a: 5
2. Call by Reference (참조에 의한 호출)
Call by Reference는 객체(Object Type)를 함수의 매개변수로 전달할 때 발생합니다.
자바스크립트에서 객체 타입은 다음과 같습니다.
- Object
- Array
- Function
객체는 참조(reference)로 전달되므로, 함수 내부에서 객체의 속성을 변경하면 원본 객체도 영향을 받습니다.
예제
function modifyObject(obj) {
obj.value = 10;
console.log("함수 내부의 obj.value:", obj.value);
}
let myObj = { value: 5 };
console.log("함수 호출 전 myObj.value:", myObj.value);
modifyObject(myObj);
console.log("함수 호출 후 myObj.value:", myObj.value);
실행 결과
함수 내부에서 객체의 속성을 변경하자, 원본 객체도 영향을 받았습니다. 이는 객체가 참조(reference)로 전달되었기 때문입니다.
함수 호출 전 myObj.value: 5
함수 내부의 obj.value: 10
함수 호출 후 myObj.value: 10
3. Call by Reference의 오해
자바스크립트는 객체를 참조로 전달하지만, 참조 자체는 값으로 전달됩니다. 즉, 함수 내부에서 객체의 속성을 변경하는 것은 가능하지만, 객체 자체를 새로운 객체로 재할당하면 원본 객체는 영향을 받지 않습니다.
예제
function replaceObject(obj) {
obj = { value: 20 }; // 새로운 객체 할당
console.log("함수 내부의 obj.value:", obj.value);
}
let anotherObj = { value: 5 };
console.log("함수 호출 전 anotherObj.value:", anotherObj.value);
replaceObject(anotherObj);
console.log("함수 호출 후 anotherObj.value:", anotherObj.value);
실행 결과
객체의 속성을 변경한 것이 아니라 새로운 객체를 할당했기 때문에, 원본 객체는 변경되지 않았습니다.
함수 호출 전 anotherObj.value: 5
함수 내부의 obj.value: 20
함수 호출 후 anotherObj.value: 5
4. 정리
구분 | Call by Value | Call by Reference |
데이터 유형 | 기본 자료형 (Number, String 등) | 객체 (Object, Array 등) |
전달 방식 | 값 자체를 복사하여 전달 | 참조(reference)를 복사하여 전달 |
함수 내부 변경 시 원본 영향 | 없음 | 속성 변경 시 원본 영향 받음 |
객체 자체 변경 시 원본 영향 | X (새 객체 할당 시 영향 없음) | O (속성 변경 시 영향 있음) |
자바스크립트에서 기본 자료형은 값으로 전달되고, 객체는 참조로 전달되지만,
참조 자체도 값으로 전달되기 때문에 재할당하면 원본에 영향을 주지 않는다는 점을 기억하면 좋습니다! 😊😊
반응형
'Front end > JavaScript' 카테고리의 다른 글
[JavaScript] JavaScript의 비동기 처리: Promise와 async/await 그리고 Java와의 차이점 (0) | 2025.04.04 |
---|---|
[JavaScript] location.replace와 location.href의 차이점 (0) | 2024.07.11 |
[JavaScript] var / let / const (중복선언, 재할당, 스코프) (0) | 2024.02.20 |