본문 바로가기

JavaScript/Basic-Javascript

자바스크립트 정리하며 배우기[09] - 참조(reference) 타입 개념 및 특성

안녕하세요. Tay 입니다.

이전 글의 객체, 그것이 바로 참조 타입입니다.

 

 

참조 타입

기본 타입(숫자, 문자열, 불린값, null, undefined) 를 제외한 모든 값은 객체이고 배열, 함수도 객체이다.

이 객체를 자바스크립트에서 참조 타입이라고 한다.

  • 데이터의 실제 값을 갖는 것이 아닌, 객체를 가리키는 참조값을 갖고있다.
  • 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리 된다.

 

위 내용만 봐서는 짐작하기가 쉽지 않다. 아래 예제를 통해 자세히 알아보자.

 

1) index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="reference.js"></script>
</body>
</html>

2) reference.js

reference.js

let objA = {            // 1
    x : 100,
    y : 200 
}

let objB = objA;        // 2

objA.x = 2;             // 3
console.log(objB);

 

  1. 참조 데이터 objA 를 선언했다.
  2. objB 에 objA 의 값을 할당했다. (obja 안의 객체들의 참조값을 할당 한 것 이다.)
  3. objA.x 의 데이터를 변경했다.

그 후 console.log(objB) 는 어떻게 출력될까?

 

Github Commit

 

 

결과 :

reference 결과

objA.x 의 값을 변경 했는데, objB.x 값도 변경 됐다. 그 이유는 무엇일까?

 

 

이유 :

  • objA 와 objB 가 참조 데이터이기 때문이다.
  • objA 의 참조값을 objB 에 할당했다. 그 말은 objA 와 objB 둘다 같은 참조값을 갖게 되고 동일한 객체를 바라본다.
  • 실제 원시데이터인 x라는 숫자를 변경 했고, objA 와 objB 둘다 x 라는 원시데이터를 바라보고 있기 때문에, objB 에서도 x 가 2 로 변경 된 것이다.

 

 

이 글은 개인 공부목적으로 작성되었습니다.

정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.