[JavaScript] 자바스크립트 값(Value) 전달과 참조(Reference) 전달 이해하기

072_자바스크립트 값(Value) 전달과 참조(Reference) 전달 이해하기

[적용]

• 원시 타임과 객체 타입의 처리를 이해하고 싶을 때

---

[문법]

데이터 타입	데이터 전달 방식
원시(Primirive) 타입	값의 전달
객체(Object) 타입	참조의 전달

---

[내용]

데이터를 변수에서 변수로 전달할 때 값에 의한 전달과 참조에 의한 전달 방식이 있다.

자바스크립트의 원시 타입은 값에 의한 전달, 객체 타입은 참조에 의한 전달 방식이다.

 

다음 코드를 통해 값에 의한 전달 방식인 원시 타입을 확인해 보자.2번에서 갑에 의한 전달이 실행 된다.

1. 변수 a에 100을 대입한다.

2. 변수 b에 변수 a를 대입한다. 변수 a에 대입한 값 100을 복사하여 변수 b에 전달한다. (값에 의한 전달)

3. 변수 a에 500을 대입한다.

4. 변수 b에 데이터는 변함없이 100이 출력된다.

let a = 100;
let b = a;
a = 500
console.log(b);  // 결과: 100

 

다음으로 참조에 의한 전달 방식인 객체 타입을 확인해 보자.

2번에서 참조에 의한 전달이 실행된다.

변수 a에서 변수 b로 데이터를 전달하면 데이터를 복사하는 것이 아니라 데이터가 저장된 메모리의 위치가 전달된다.

결국 샘플의 a와 b는 같은 곳을 참조하고 있기 때문에 a[0]의 값이 바뀌면 b[0]의 값도 바뀐다.

1. 변수 a에 1, 2, 3을 참조하는 배열을 대입한다.

2. 변수 b에 변수 a를 대입한다. 변수 a에 저장된 배열의 참조 값이 변수 b에 전달된다. (참조에 의한 전달)

3. 변수 a에 저장된 배열의 첫 번째 요소가 100을 참조한다.

4. 변수 b와 변수 a는 같은 배열을 참조하기 때문에 [100, 2, 3]이 출력된다.

let a = [1, 2, 3];
let b = a;
a[0] = 100;
console.log(b);  // 결과: [100, 2, 3]

 

함수의 인수 역시 원시 타입은 값, 객체 타입은 참조를 전달한다.

함수에 원시 타입의 데이터를 전달하는 코드를 확인해 보자.

함수 내 처리 결과는 변수 a에 영향을 주지 않는다.

// 전달받은 파라미터에 2를 더하는 함수
function myFunction(x) {
    x = x + 2;
}

// 변수 a에 10 대입
let a = 10;

// myFunction()에 a를 전달
// 복사된 데이터 10을 함수에 전달
myFunction(a);

// 10이 출력(2가 더해진 12가 아님을 확인...)
console.log(a);  // 결과: 10

 

함수에 객체 타입의 데이터를 전달하는 코드를 확인해 보자.

함수 내 처리 결과는 변수 a에 영향을 준다.

함수의 파라미터를 다룰 떄는 데이터의 타입을 확인하여 값, 참조의 전달을 적절히 사용하도록 하자.

// 전달받은 배열의 첫 번째 요소에 100을 대입하는 함수
function myFunction(x) {
    x[0] = 100;
}

// 변수 a에 [1, 2, 3]을 대입
let a = [1, 2, 3];

// myFunction()에 a를 전달
// 배열 데이터 [1, 2, 3] 메모리의 위치를 함수로 전달
myFunction(a);

// [100, 2, 3] 출력 ([1, 2, 3]이 아님을 확인)
console.log(a);  // 결과: [100, 2, 3]

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김