본문으로 바로가기

참조란 무엇인가?

category JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:14

참조란?



복제


var a = 1; // 원시 데이터타입이 담겨있을 경우(String,Number,Boolean,null,undefined)
var b = a;

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


결과는 당연하다. 값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로입니다.

변수 b의 값에 변수 a의 값이 복제된 것입니다.

다시 말해서, 1을 카피하여 또 다른 별도의 데이터 1을 b 가 가지고 있는 것입니다.



참조와 변수


var a = {'id':1}; // 원시 데이터 타입이 아닌 것들은 다르게 동작한다.
var b = a;

b.id = 2;
console.log(a.id); // 2


놀라운 차이점이 있습니다. 변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 된 것입니다.

이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미합니다.

이것이 참조인 것입니다.



다음의 코드를 살펴보겠습니다.


var a = {'id':1};
var b = a;
b = {'id' : 2};

console.log(a.id); // 1


b 에 새로운 객체를 생성하여 할당했기 때문에 b 라는 객체는 더이상 a 를 바라보지 않고 b 는 새로운 객체를 바라보게 됩니다.





함수와 참조

그럼 일종의 변수 할당이라고 할 수 있는 메소드의 매개변수는 어떻게 동작하는가를 살펴보겠습니다.

조금 복잡하므로 꼼꼼하게 살펴봐야 합니다. 


다음은 원시 데이터 타입을 인자로 넘겼을 때의 동작 모습입니다.


var a = 1; // 원시데이터 타입

function func(b){ // b = a
b = 2;
console.log(b); // 2
}

func(a);
console.log(a); // 1


다음은 참조 타입을 인자로 넘겼을 때 동작하는 코드입니다.


var a = {'id':1};

function func(b){
b = {'id':2};
}
func(a);

console.log(a.id); // 1


함수 func 의 파라미터 b로 전달된 값은 객체 a입니다.

(b = a) b를 새로운 객체로 대체하는 것은 ( b = {'id':2} ) b가 가리키는 객체를 변경하는 것이기 때문에 객체 a에 영향을 주지 않습니다.



하지만 아래의 코드는 다릅니다.


var a = {'id':1};
function func(b){
b.id = 2;
}

func(a);

console.log(a.id); // 2


파라미터 b는 객체 a의 레퍼런스(참조)입니다.

이 값의 속성을 바꾸면 그 속성이 소속된 객체를 대상으로 수정작업을 한 것이 되기 때문에 b의 변경은 a에도 영향을 미치게 됩니다.



참조는 객체의 실제 위치를 가리키는 포인터이다



Jaehee's WebClub