[생활코딩] JS문법(객체지향)- 참조

참조를 알아보기 이전에 복제에 대해서 알아보자 

 

복제

전자화된 시스템의 가장 중요한 특징은 복제입니다. 현실의 사물과 다르게 전자화된 시스템 위의 데이터를 복제하는 것은 비용이 거의 들지 않는다. 이 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징일 것이다.

var b = a;의 의미 

• 복제는 연결되어있지 않은 별도의 데이터이다. 

      let a = 1; 
      let b = a; //여기까지 b의 값은 1
      b = 2; // b의 값은 2 
      document.write(a, b); // output: 1,2 
     //b의 값이 변한다고해서 a의 값에 영향을 미치지않는다.

• 원본 파일이 있고 복제한 파일이 있다면 복제한 파일의 내용을 바꿨을 때 원본파일에 영향을 미치지 않는 것과 동일하다.  위의 코드에서는 원본파일을 a 라고 보고 복제된 파일을 b라고 보면 된다. 
• 주의) 위의 변수에 담겨있는 데이터 타입은 원시데이터이다(Number). 객체의 경우는 다르게 작동한다. ->객체의 경우 복제가 아닌 참조

참조

• 참조의 대표적인 예로는 심볼릭 링크(symbolic link)혹은 바로가기(윈도우)를 만드는 것과 비슷하다. 
• 원본 파일에 대해서 심볼릭 링크를 만들면 원본이 수정되면 심볼릭 링크에도 그 내용이 실시간으로 반영되는 것과 같은 효과다. (심볼릭 링크를 통해서 만든 파일은 원본 파일에 대한 주소 값이 담겨있다.)
• 원본 파일을 복제한 것이 아니라 원본 파일을 참조(reference)하고 있는 것이다. -> 저장 장치의 용량을 절약할 수 있고 모든 복제본이 동일한 내용을 유지할 수 있다.
• 프로그래밍에서 라이브러리라는 개념도 일종의 참조라고 할 수 있다. 공용 라이브러리를 사용하면 하나의 라이브러리를 여러 어플리케이션에서 공유해서 사용하게 된다. (라이브러리 내용이 변경되면 이를 사용하고 있던 애플리케이션에도 내용이 반영되게 된다. 

참조는 var b = a 라고했을때 같은 객체 {id : 1}을 보게 된다. 

      const a = { id: 1 };
      const b = a;
      b.id = 2;
      document.write(a.id); // 2 , b.id를 위에서 변경했기 떄문에 이것이 원본인 a.id에도 영향을 미친다.

• a와 b는 같은 객체 {id : 1}를 참조하게 된다. 그렇기 때문에 a나 b중에 하나를 변경하면 서로에게 영향을 미친다. 

      const exampleObj = { flower: 1 };
      let exmapleObj2 = exampleObj;
      exmapleObj2 = { flower: "This is a flower" };
      document.write(exampleObj.flower + "<br/>", exmapleObj2.flower);

 

• 이 경우에는 서로 영향을 주지 않는데 그 이유는 exmapleObj2와 exampleObj가 같은 객체 {flower: 1}를 바라보고 있다가 exampleObj2의 값을 {flower: "This is a flower"}로 재할당하면서 연결이 끊겼기 때문이다. 값을 {}의 형식으로 준다는 것의 의미는 새로운 객체를 생성했다는 것이다. 이는 곧 위에서 봤던 원시데이터타입의 예시와 같은 맥락이다. 
  • let a = 1; 
    let b = a; 
    b = 2;  -> 원본 a와는 별개로 b에 2라는 새로운 데이터(값)를 만들어서 할당한 것이기 때문이다. 
    
    

 

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

 

함수

원시 데이터 타입을 인자로 넘겼을 경우

 //원시 데이터 타입을 인자로 넘겼을 때 함수의 동작
      const a = 1;
      function funcA(b) {
        b = 2;
      }
      // 아래의 의미 b = a
      // b = 1이었다가, b의 값을 2로 넣어준다해도 a에는 영향이 없다.
      funcA(a);
      document.write(a + "<br/>"); //output: 1

참조 데이터 타입을 인자로 넘겼을 경우 (값을 새로 생성해서 할당했을 경우와 그렇지 않은 경우)

      //참조 데이터 타입을 인자로 넘겼을 때 서로 영향을 주지 않는 경우 
      const obj = { id: 1 };
      function funcB(obj2) {
      //값(여기서는 객체)을 새로 생성해서 할당함
        obj2 = { id: 2 };
      }
      // obj2 = obj -> 여기서는 같은 객체를 가리키고 있다.
      // obj2 = {id : 2} -> 하지만 여기서 obj2에 새로운 객체를 만들었다.
      //그렇기 때문에 a가 바라보고 있던 {id: 1 }과는 연결이 끊긴다.
      // 결과적으로 a의 객체는 영향을 받지 않게 된다.
      funcB(obj);
      document.write(obj.id + "<br/>"); //output: 1

	 //참조 데이터 타입을 인자로 넘겼을 경우 함수 서로 영향을 주고 받는 경우
    
      const objC = { id: 1 };
      function funcC(objD) {
      //값을 새로 생성하지 않았음
        objD.id = 2;
      }
      // objC = {id : 1 }
      // objD = objC -> 같은 것을 참조함
      // objD.id = 2 -> 새로 함수를 만들어 준 것이 아니라 내용물의 값을 변경한 것이므로 서로에게 영향
      // objC.id = 2 -> 결과적으로 objC의 id 값이 변경됨 
      funcC(objC);
      document.write(objC.id); //outpu : 2 원본의 값이 변경됐음