본문 바로가기
프로그래밍 개발/JS 기본 언어

Javascript 참조

by Jinseok Kim 2020. 11. 16.
반응형

 

 

복제

 

 

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

 

  • 값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로이다. 변수 b의 값에 변수 a의 값이 복제된 것이다.
  • a을 b로 복제한 후에 a의 값을 변경한다고 이미 복제한 b가 변하는 것이 아닌 것처럼 생각하면된다.

 

 

 

 

 

 

참조

 

 

 

var a = {'id':1};
var b = a;
b.id = 2;
console.log(a.id);

var a = {'id':1};
var b = a;
b = {'id':2}
console.log(a.id);

 

  • 변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 된 것이다. 이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미하다. 
  • 하지만 b={'id':2}로 수정하여 결과를 보면 결과가 다른 것을 확인 할 수 있다.  왜냐하면 하나의 새로운 객체를 생성한 것으로 볼 수 있으므로 여기서의 b var b=a;b와 다르다고 볼 수 있다.
  • 비유하자면 복제는 파일을 복사하는 것이고 참조는 심볼릭 링크(symbolic link) 혹은 바로가기(윈도우)를 만드는 것과 비슷하다. 원본 파일에 대해서 심볼릭 링크를 만들면 원본이 수정되면 심볼릭 링크에도 그 내용이 실시간으로 반영되는 것과 같은 효과다. 
  • 심볼릭 링크를 통해서 만든 파일은 원본 파일에 대한 주소 값이 담겨 있다. 누군가 심볼릭 링크에 접근하면 컴퓨터는 심볼릭 링크에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 된다.
  • 다시 말해서 원본을 복제한 것이 아니라 원본 파일을 참조(reference)하고 있는 것이다. 덕분에 저장 장치의 용량을 절약할 수 있고, 원본 파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있게 된다. 참조는 전자화된 세계의 극치라고 할 수 있다.

 

 

 

 

a = 1;

a = {'id':1};

 

  • 위의 코드의 첫 번째는 데이터형이 숫자이고 두 번째는 객체다.
  • 숫자원시 데이터형(기본 데이터형, Primitive Data Types)이다. 자바스크립트에서는 원시 데이터형을 제외한 모든 데이터 타입은 객체이다. 객체를 다른 말로는 참조 데이터 형(참조 자료형)이라고도 부른다.
  • 기본 데이터형은 위와 같이 복제 되지만 참조 데이터형은 참조된다. 모든 객체는 참조 데이터형이다.
  • 정리하면 변수에 담겨있는 데이터가 원시형이면 그 안에는 실제 데이터가 들어있고, 객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다고 할 수 있다.

 

 

 

 

 

함수

 

 

 

원시 데이터 타입을 인자로 넘겼을 때의 동작 모습

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

 

 

 

 

참조 데이터 타입을 인자로 넘겼을 때 동작하는 모습

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

 

 

  • 이처럼 위의 두 코드의 결과를 보면 객체 a영향을 주지 않는다는 것을 확인 할 수 있다.
  • 함수 func파라미터 b로 전달된 값은 객체 a이다. (b = a) b를 새로운 객체로 대체하는 것은 (b = {'id':2}) b가 가르키는 객체를 변경하는 것이기 때문이다.
  • 즉, func(b)의 b와 b=2;의 b는 다르고  또 func(b)의 b와 b = {'id':2}의 b는 다르다고 볼 수 있다.

 

※ 여기서 코드의 함수 맥락상 func(b)의 b는 b=a(a는 b이다.라고 읽는다.)라고 볼 수 있다

 

 

 

 

 

 

하지만

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

 

  • 파라미터 b는 객체 a의 레퍼런스다. 이 값의 속성을 바꾸면 그 속성이 소속된 객체를 대상으로 수정작업을 한 것이 되기 때문에 b의 변경은 a에도 영향을 미치게 된다는 것을 확인 할 수 있다.
  • 즉, b.id a.id들은 공유할 수 있는 참조 데이터형이라고 볼 수 있다. 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미하는 거다. 

 

 

 

 

 

 

 

 문자, 숫자, 불리언은 프로퍼티나 메소드가 없는 원시 데이터타입이지만, 래퍼 객체으로 감싸져 있기 때문에, 객체처럼 사용되어 진다.

원시 데이터는 복사가 된다: 복제된 사본은 원본과 서로 영향을 받지 않는다.

객체는 참조(링크)가 된다: 복제된 사본은 원본과 서로 영향을 받는다.

단 어떠한객체가 자신만의 객체를 갖고 있는 경우, 다른 객체와는 서로 간섭하지 않는다.
어떠한 객체가 갖고 있는 것이 원시 데이터 타입인 경우에는 다른 객체와 서로 간섭한다.

 

 

 

 

 

 

문자열, 숫자, 블리언들이 객체처럼 사용할 수 있지만 실제로는 원시 데이터이며 객체로 사용할 수 있게 하는 래퍼 객체로 감싸고 있기 때문이라는 것을 항상 명시해야 위의 내용들을 잘 이해 할 수 있다.

 

 

 

 

 

반응형

댓글