[JS] 값(value)에 의한 전달과 참조(reference)에 의한 전달

JavaScript의 자료형에는 기본(Primitive) 자료형과 기본이 아닌(Non-primitive) 자료형으로 두 가지 유형의 자료형이 있다.

기본 자료형

JavaScript 언어에서 제공하는 미리 정의된 데이터 유형을 기본 자료형이라고 한다. JavaScript는 Number, String, Boolean, Undefined, Symbol 및 BigInt를 포함하는 여섯 가지 유형의 기본 자료형을 제공한다. 기본 자료형의 크기는 고정되어 있으므로 JavaScript는 콜 스택(실행 컨텍스트)에 기본 자료형을 저장한다.

기본 자료형에 액세스하면 해당 변수에 저장된 실제 값을 조작한다. 따라서 기본 변수는 값에 의해 액세스됩니다. 기본 값을 저장하는 변수를 다른 변수에 할당하면 변수에 저장된 값이 생성되어 새 변수에 복사된다.

 

참조 자료형

JavaScript 언어의 기본 자료형에서 파생된 데이터 유형을 참조 자료형이라고 한다. 기본이 아닌 자료형 또는 파생 자료형이라고도 한다. JavaScript는 Array, Object 및 Function을 포함하는 세 가지 유형의 참조 자료형을 제공한다. 참조 자료형의 크기는 동적이므로 힙에 저장된다.

참조 자료형에 액세스하면 저장된 실제 값이 아니라 참조를 통해 조작한다. 따라서 참조 값인 변수는 참조로 액세스된다. 한 변수에서 다른 변수로 참조 값을 할당할 때 변수에 저장된 값도 새 변수의 위치로 복사되지만, 차이점은 이제 두 변수에 저장된 값이 힙에 저장된 실제 객체의 주소라는 것이다. 결과적으로 두 변수는 동일한 객체를 참조하고 있으므로, 두 변수에서 원래 객체를 조작할 수 있다.

 

값에 의한 전달

JavaScript에서 함수에 기본 자료형 값을 인수로 전달하면 인수의 값이 함수에 전달되는데, 이를 값에 의한 전달(pass by value)이라고 한다.

 

다음은 JavaScript에서 값에 의한 전달의 예다.

function addOne(x) {
  x = x + 1;
  return x;
}

let a = 1;
let b = addOne(a);

console.log(a); // 1
console.log(b); // 2

이 예제에서는 `a`의 값이 인수로 `addOne()` 함수에 전달된다. 이 함수는 `x` 값을 1씩 증가시키고 결과를 반환한다. 그러나 함수 외부의 값은 변경되지 않는다. 이는 `a`의 값이 값에 의한 전달로 함수에 전달되고 함수 내에서 `x`의 값을 변경해도 `a`의 값에 영향을 주지 않기 때문이다.

 

참조에 의한 전달

JavaScript에서는 참조 자료형을 사용하여 참조에 의한 전달(pass by reference)을 구현할 수 있다. JavaScript에서 객체를 함수에 전달할 때 객체의 값은 여전히 값으로 전달된다. 그러나 객체의 값은 실제 객체 자체가 아니라 객체의 메모리 위치에 대한 참조라고 볼 수 있다. 즉, 함수 내의 객체에 대한 모든 변경 사항이 함수 외부의 원본 객체에 반영된다.

 

다음은 JavaScript에서 참조에 의한 전달을 구현한 예다.

function addOne(obj) {
  obj.x = obj.x + 1;
}

let obj = { x: 1 };
addOne(obj);

console.log(obj.x); // 2

이 예제에서 `{ x: 1 }` 객체는 `addOne()` 함수에 인수로 전달된다. 이 함수는 `obj.x`의 값을 1씩 증가시킨다. `obj`의 값은 객체의 메모리 위치에 대한 참조이므로 `obj.x`에 대한 변경은 함수 외부의 원본 객체에 반영된다.

 

이 동작은 기존 참조에 의한 전달과 다르다는 점에 유의해야 한다.  JavaScript에서 객체의 값(메모리 위치에 대한 참조)은 함수에 값으로 전달되는 반면, 전통적인 참조에 의한 전달에서는 객체의 메모리 위치가 인수로 함수에 전달된다는 차이가 있다.