이전에 타입에 대해 이야기 하면서 짧게나마 기본형과 참조형 타입에 대해서 설명을 한 적이 있다. 기본형과 참조형의 차이는 메모리를 적재하는 방법에 차이가 있다.
| 기본형 | 참조형 |
Number String Boolean Undefined Symbol |
Null Object (Array, Function, Date ..) |
기본형
- 변수를 지정하게 되면 지정하는 공간을 할당한다 (주소 생성).
- 해당 주소에 변수의 값을 적재한다.
- 변수의 값을 변경할 경우 해당 주소에 작성되어 있는 기존 값은 사라지고 새로 들어오는 값이 적재가 된다.
- 다른 변수를 참조해서 변수를 생성하는 경우 참조한 변수의 "값"을 생성한 변수의 주소로 "복사"한다. (값의 복사)
- 값을 복사하기 때문에, 메모리들이 가리키고 있는 값이 서로 독립되어져 있다. 즉, 참조된 변수의 값을 변경해도 참조한 변수의 값은 변경되지 않는다.
참조형
- 객체를 생성하게 되면 메모리 주소를 할당한다. 객체의 속성은 메모리 주소를 참조하여, 해당 메모리 주소에 값을 적재한다.
- 다른 객체를 참조해서 객체를 생성하는 경우에는 다른 객체의 "메모리주소"를 "참조"하게 된다. (메모리 주소 복사)
- 참조형 타입의 경우 같은 메모리주소를 참조하기 때문에, 같은 객체를 공유하게 된다. 즉, 한 쪽 객체의 데이터를 수정하게 되면 두 개의 객체의 값이 같이 수정된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 기본형 타입의 복사 경우 : 값 자체를 복사, 두 객체가 독립적이다.
let a1 = 3;
let b1 = a1;
b1++;
console.log(a1); //3
console.log(b1); //4
// 참조형 타입의 복사 : 메모리 주소를 복사, 두 객체가 같은 메모리 주소를 공유한다.
let a2 = [1, 2, 3, 4, 5];
let b2 = a2;
b2[3] = 6;
console.log(a2); // [1, 2, 3, 6, 5]
console.log(b2); //[1, 2, 3, 6, 5]
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : DOM에서 요소를 조작해보자 (0) | 2024.07.25 |
|---|---|
| JavaScript : DOM의 기본에 대하여 (0) | 2024.07.25 |
| JavaScript의 Spread 연산자에 대해 알아보자 (0) | 2024.07.24 |
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |
| JavaScript의 getter와 setter 에 대해서 (0) | 2024.07.23 |
| JavaScript의 for문(for-in | for-of | forEach)에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 배열 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 객체 (0) | 2024.07.22 |