[Javascript] 원시타입 & 참조타입 (Primitive & Reference) 비교

 

var value1 = 1234;  // Primitive data type - 변수에 값이 그대로 저장
var array1 = [1, 2, 3]; // Array, Object는 변수에 reference가 저장

Primitive data type과 Reference data type라는게 있습니다.

반응형

---

 

Primitive data type

 

var name1 = '김';
var name2 = name1;  // 복사
name1 = '박';

name1에 값을 넣고
name2 = name1을 하면 name2에도 같은 '김'이라는 데이터가 들어가겠죠
이때 name1을 '박'으로 바꾸고 name1과 name2를 모두 출력 해보겠습니다.

name1은 마지막에 '박'으로 값을 바꿔서 '박'이라고 출력되는데
name2는 값을 바꾸지 않아서 '김'이 출력됩니다.

---

 

Reference data type

 

var objname1 = { name: '김'};
var objname2 = objname1;
objname1.name = '박';

위의 코드처럼 하지만 Object 자료형을 사용해서 출력을 하나씩 해보겠습니다

결과는 전과 다르게 둘 다 '박'으로 출력됩니다.





objname1에는 { name : '김' }이 저장되는게 아닙니다
{ name : '김' }의 메모리 위치(reference)가 저장되는 겁니다.
objname2는 { name : '김' }이라는 값이 아니라 메모리 위치를 복사한 것이죠
그래서 objname1의 값만 변경했어도 objname2의 값도 변경한 것처럼 나옵니다 둘 다 같은 위치를 가르키고 있으니까요

---

 

var obj_name1 = { name: '홍길동'}
var obj_name2 = { name: '홍길동'}

이 예제를 보겠습니다.
두 변수는 오브젝트로 값은 같아 보이는데, 두 변수를 비교해보겠습니다

false가 나옵니다. 두 변수는 key, value가 같아서 같아 보이지만
다른 위치를 가르키고 있기 때문입니다

---

 

var obj_name1 = { name: '홍길동'}

function objChange(obj){
  obj.name = '홍당무'
}
objChange(obj_name1)

이번엔 함수를 이용해서 오브젝트의 value값을 변경하고 출력해보겠습니다

변경한 홍당무가 잘 출력됩니다.

---

 

var obj_name1 = { name: '홍길동'}

function objChange(obj) {
      obj = { name: '홍당무' }
}
objChange(obj_name1)

이번엔 이런식으로 함수를 설정하고 출력해보겠습니다

이전 함수와 다르게 홍당무가 출력되지 않습니다.
파라미터는 변수를 생성하는 문법입니다.

obj = { name: '홍당무' }

var obj = { name: '홍당무' }	// 이런식

사실 함수안의 코드는 두번째 코드처럼 된다고 보면 됩니다.
그래서 obj = { name : '홍당무' } 해도 obj_name1은 원래 위치를 가르키고 있습니다( {name:'홍길동'} )

    function objChange(obj) {
      obj = { name: '홍당무' }
      console.log(obj)
    }
    objChange(obj_name1)

함수 안에서 obj라는 새로운 변수가 홍당무를 가르키고 있고 출력해보면 홍당무가 나옵니다.