[Js] 참조 | 복제 | 함수와 참조

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

 

 

 

 

---

 

복제

 

전자화된 시스템의 가장 중요한 특징은 복제다.

현실의 사물과 다르게 전자화된 시스템 위의 데이터를 복제 하는데는 비용이 거의 들지 않는다.

바로 이러한 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징일 것이다.

 

프로그래밍에서 복제가 무엇인가를 살펴보자.

 

<script>
    var a = 1;//a=1이됨
    var b = a;//a를 b에 담음, b =1
    b = 2; //b=2
    console.log(a); //a= 1
</script>

결과는 1 이다.

 

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

변수 b의 값에 변수 a의 값이 복제된 것이다. 이를 그림으로 표시하면 아래와 같다.

 

 

위와 같이 변수에 담겨있는 값이 원시 데이터 타입인 경우에는 "복제"가 일어난다.

하지만 담긴 값이 객체인 경우 "참조"일어난다.

 

 

참조

그런데 자연의 산물이 아니라 거대한 약속의 집합인 소프트웨어의 세계에서 당연한 것은 없다.

이것이 당연하지 않은 이유는 다음 예제를 통해서 좀 더 분명하게 드러난다.

 

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

결과는 2 이다. 그림으로 살펴보자.

 

 

 

 

 

이 코드의 주인공은 아래와 같다.

b.id = 2;
System.out.println(a.id);

 

▼ 자세히 살펴보기

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

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

 

비유하자면 복제는 파일을 복사하는 것이고 참조는 심볼릭 링크(symbolic link) 혹은 바로가기(윈도우)를 만드는 것과 비슷하다. 원본 파일에 대해서 심볼릭 링크를 만들면 원본이 수정되면 심볼릭 링크에도 그 내용이 실시간으로 반영되는 것과 같은 효과다.

 

심볼릭 링크를 통해서 만든 파일은 원본 파일에 대한 주소 값이 담겨 있다.

누군가 심볼릭 링크에 접근하면 컴퓨터는 심볼릭 링크에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 된다. 다시 말해서 원본을 복제한 것이 아니라 원본 파일을 참조(reference)하고 있는 것이다. 덕분에 저장 장치의 용량을 절약할 수 있고, 원본 파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있게 된다. 참조는 전자화된 세계의 극치라고 할 수 있다.

 

프로그래밍에서 광범위하게 사용하는 라이브러리라는 개념도 일종의 참조라고 할 수 있다.

공용 라이브러리를 사용하게 되면 하나의 라이브러리를 여러 애플리케이션에서 공유해서 사용하게 된다. 라이브러리의 내용이 변경되면 이를 참조하고 있는 애플리케이션에도 내용이 반영되게 된다. 또 우리가 변수를 사용하는 이유도 말하자면 참조를 위해서라고 할 수 있을 것이다. 

 

그런데, 위의 코드에서 만약 아래와 같이 변경한다면 a.id의 값이 바뀌지 않는다. 왜그럴까?

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

위와 같이 a를 b에 담으면 변수 b의 값은 a와 같은 객체를 가르키게 된다.

그런데 여기서 b가 새로운 객체를 담게 되면서, 처음 a가 가르키던 객체와는 다른 객체를 가르키게 되는 것이다.

즉 각각의 다른 객체를 가르키게 되므로, b의 값을 바꾼다 하여도 a에게 영향을 미치지 않는것이다.

 

 

아래 두 개의 구문의 차이점을 생각해보자.

a = 1;

a = {'id':1};

무엇일까? 전자는 데이터형이 숫자이고 후자는 객체다.

숫자는 원시 데이터형(기본 데이터형, Primitive Data Types)이다. 자바스크립트에서는 원시 데이터형을 제외한 모든 데이터 타입은 객체이다. 객체를 다른 말로는 참조 데이터 형(참조 자료형)이라고도 부른다. 기본 데이터형은 위와 같이 복제 되지만 참조 데이터형은 참조된다. 모든 객체는 참조 데이터형이다. 

 

정리하면 변수에 담겨있는 데이터가 원시형이면 그 안에는 실제 데이터가 들어있고, 객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다고 할 수 있다.

 

 

 

함수

 

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

 

먼저 아래의 코드는 원시 데이터 타입을 인자로 넘겼을 때의 동작 모습이다.

<script>
    var a = 1;
    function func(b){ //이 코드로 들어오면 a=1 -> b = a 즉 b는 1이다.
        b = 2; //b가 2 로 바뀜.
    }
    func(a); //결국 a =b라는 코드와 동일한 것
    console.log(a);//a의 값에는 변동이 없음. 복제의 예임
</script>

즉 결과는 1이다.

 

 

다음은 참조 데이터 타입을 인자로 넘겼을 때 동작하는 과정이다.

<script>
    var a = {'id':1};
    function func(b){ //b=a 둘은 같은 객체를 가지고 있다.
        b = {'id':2}; //새로운 객체를 생성 후 b에 할당 
    }
    func(a); //a = {id:1}
    console.log(a.id);  // 4번째 줄 코드에서 새로운 객체로 둘은 분리가 되어, b의 변화와 무관
</script>

이것 또한 b가 새로운 객체를 담음으로써 결과가 1이된다.

 

 

하지만 아래는 다르다.

<script>
    var a = {'id':1};
    function func(b){ //b=a 둘은 같은 객체를 가지고 있다.
        b.id = 2; //둘은 같은 객체를 가지고 있음. id라는 속성의 값을 2로 바꾸어 버린 것.
    }
    func(a); //a = {id:1}
    console.log(a.id);  //b의 변화가 a에도 적용이됨.
</script>

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

 

참조

• 코드와 오픈소스