[ES6] 11. 이상한 Reference data type과 더 이상한 예제 3개

fe.syhan·2023년 10월 31일

JS 기초

목록 보기
39/52
post-thumbnail

Data Type


JS의 자료형은 크게 2가지로 분류된다.

  • Primitive
  • Reference

Primitive Type

자료 자체가 변수에 저장이 된다.

문자, 숫자 등이 대표적이다.

var name = 'Kim';
var age = 20;

Reference Type

Array, Object 자료형이 여기에 속한다.

자료를 변수에 직접 저장하는게 아닌 자료의 위치를 가리키는

화살표(레퍼런스)를 변수에 저장한다.

var 사람 = { name: 'Kim' };

자료복사

  1. Primitive

    var 이름1 = '김';
    var 이름2 = 이름1;
    
    이름1 = '박';
    
    console.log(이름1); // ?
    console.log(이름2); // ?

    (1) 이름1은 ‘김’이라는 문자를 할당하고

    (2) 이름2이름1에 있던 자료를 복사했다.

    (3) 이름1을 ‘박’으로 재할당했다.

    • 이름1, 이름2를 출력할 경우 각각 무엇이 나올까? 이름1 은 변경한 ‘박’ 이고, 이름2는 복사만 했지 변경하지 않았으니 ‘김’이다.
  2. Reference

    var 이름1 = { name : '김' };
    var 이름2 = 이름1;
    
    이름1.name = '박';
    
    console.log(이름1); // ?
    console.log(이름2); // ?

    (1) 이름1{ name: ‘김’} 이라는 object 자료형을 할당했고

    (2) 이름2이름1 에 있던 자료를 복사했다.

    (3) 이름1 안의 name‘박’으로 변경했다.

    • 이름1, 이름2를 출력할 경우 각각 무엇이 나올까? 이름1 , 이름2 모두 { name: ‘박’ } 이 나온다. 💡 `var 이름2 = 이름1; 이름1` 에 있던 `{ name: ‘kim’}` 이라는 데이터의 복사가 아니라`이름1` 에 저장된 reference가 `이름2` 에 복사가 되어서 `이름1` 과 `이름2` 가 똑같은 화살표를 가리키게 된다. ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/be8653fe-4957-4eb9-8c24-533fbe4f6a43/Untitled.png)

Reference

var 이름1 = { name : '김' };
var 이름2 = { name : '박' };

이름1이름2 에 각각 데이터를 할당했다.

그렇다면 같은 데이터를 할당 했을 경우 이름1 == 이름2 는 true 일까 false일까?

var 이름1 = { name : '김' };
var 이름2 = { name : '김' };

답은 false 이다.

각각 다른 참조값을 가지기 때문에 이름1이름2 는 같지 않다.

굳이 값이 같은지 비교하고 싶으면 이름1.name이름2.name 을 비교하자.

함수를 이용한 데이터 변경

var 이름1 = { name : '김' };

function 변경(obj){
  obj = { name : 'park' };
}

변경(이름1);

변경() 은 파라미터로 오브젝트를 받아서 내용을 바꿔주는 함수이다.

근데 실행 이후 이름1 을 출력해 봐도 바뀌지 않는다.

// (인간의 시점)

var 이름1 = { name : '김' };

function 변경(obj){
  obj = { name : 'park' };
}

변경(이름1);

// (자바스크립트의 시점)

var 이름1 = { name : '김' };

function 변경(obj){
  obj = { name : 'park' };
}

변경(var obj = 이름1);

obj, 이름1 은 서로 같은 참조 값을 가진다.

그런데 함수 내부를 보면 obj{ name: ‘Park’ } 를 재할당 해주고 있다.

이것은 실제 **이름1 이라는 변수는 전혀 건드리고 있지 않다.**

위의 상황으로 미루어 보아 아래의 경우,

var 이름1 = { name : '김' };

function 변경(obj){
  obj.name  = 'park';
}

변경(이름1);
console.log(이름1)

같은 참조 값을 가지는 obj.name 을 재할당 하니 이름1{ name: ‘park’ }
으로 바뀌는 것을 확인할 수 있다.

0개의 댓글