JS 원시값과 객체가 매개변수로 들어왔을 때

JavaScript 함수에 원시값과 객체를 매개변수로 넣었을 때 어떻게 다른 지에 대해서 궁금증이 생겼다.

조금 더 확실하게 정리하고자 기록으로 남긴다.

 

원시값(primitive values)을 매개변수로 전달할 때

Boolean, Number, String, BigInt, Symbol, null, undefined은 JS의 원시값에 해당합니다.

함수에 원시값을 매개변수로 전달하면 그 값의 복사본이 함수 내부로 전달됩니다.

따라서 함수 내에서 해당 매개변수를 변경해도 원래의 값에는 영향을 주지 않습니다.

function modifyValue(x) {
    x = x + 1;
    console.log('Inside function:', x);
}

let value = 5;
modifyValue(value);  // Inside function: 6
console.log('Outside function:', value);  // Outside function: 5

 

객체(object)를 매개변수로 전달할 때

배열, 함수, 그리고 대부분의 사용자 정의 객체들은 모두 객체에 해당합니다.

함수에 객체를 매개변수로 전달하면 그 객체에 대한 참조(reference)가 함수 내부로 전달됩니다.

따라서 함수 내에서 해당 매개변수의 속성을 변경하면 원래의 객체도 변경됩니다.

 

function modifyObject(obj) {
    obj.value = obj.value + 1;
    console.log('Inside function:', obj.value);
}

let object = {value: 5};
modifyObject(object);  // Inside function: 6
console.log('Outside function:', object.value);  // Outside function: 6

하지만 매개변수 자체에 새로운 객체를 할당하면 기존의 참조 관계는 변경되지 않습니다.

function reassignObject(obj) {
    obj = {value: 10};
    console.log('Inside function:', obj.value);
}

let object2 = {value: 5};
reassignObject(object2);  // Inside function: 10
console.log('Outside function:', object2.value);  // Outside function: 5

요약

✔️ 원시값은 값을 복사하여 전달하므루 함수 내부에서 원래의 원시값을 변경할 수 없다.

✔️ 객체는 참조를 전달하기 때문에 함수 내에서 해당 객체의 속성을 변경할 수 있다.