안녕하세요. 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
let objA = { // 1
x : 100,
y : 200
}
let objB = objA; // 2
objA.x = 2; // 3
console.log(objB);
- 참조 데이터 objA 를 선언했다.
- objB 에 objA 의 값을 할당했다. (obja 안의 객체들의 참조값을 할당 한 것 이다.)
- objA.x 의 데이터를 변경했다.
그 후 console.log(objB) 는 어떻게 출력될까?
결과 :
objA.x 의 값을 변경 했는데, objB.x 값도 변경 됐다. 그 이유는 무엇일까?
이유 :
- objA 와 objB 가 참조 데이터이기 때문이다.
- objA 의 참조값을 objB 에 할당했다. 그 말은 objA 와 objB 둘다 같은 참조값을 갖게 되고 동일한 객체를 바라본다.
- 실제 원시데이터인 x라는 숫자를 변경 했고, objA 와 objB 둘다 x 라는 원시데이터를 바라보고 있기 때문에, objB 에서도 x 가 2 로 변경 된 것이다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
자바스크립트 정리하며 배우기[11] - 프로토타입 객체(prototype), 부모객체 상속 (0) | 2020.01.07 |
---|---|
자바스크립트 정리하며 배우기[10] - 참조(reference) 타입 비교(compare) (0) | 2020.01.07 |
자바스크립트 정리하며 배우기[08] - for in 문 객체 출력 (0) | 2020.01.06 |
자바스크립트 정리하며 배우기[07] - 객체 프로퍼티 읽기 / 쓰기 / 수정 / 삭제 (0) | 2020.01.06 |
자바스크립트 정리하며 배우기[06] - 객체 개념 및 프로퍼티 생성, 리터럴 형식, 생성자 함수 (0) | 2020.01.03 |