ES5 .Intro(2) - 데이터 타입

데이터 타입

* 여기서는 데이터 타입에 관련된 내용만 다룹니다. 생소한 용어들(배열, 객체, String, Booleans 등등) 은 추후에 상세히 다룰 예정입니다. 

 

모든 프로그래밍 언어에서는 데이터 타입이라는 것이 존재하는데, JavaScript에서는 2가지의 데이터 타입을 사용한다.

 

- 원시 데이터 타입

- 객체(참조) 데이터 타입

 

1. 원시 데이터 타입 (passed by value)

 

 JavaScript에는 6가지 종류의 원시 데이터 타입이 존재한다.

원시 데이터 타입은 JavaScript에서 객체가 아닌 것들이며, 값 그 자체로 저장된 것이다. 

 

- Booleans

- Null

- Undefined

- Number

- String

- Symbol 

 

- 변수와 값 선언 -

만약 이런식으로 변수와 값을 선언했다면, 메모리 상에 존재하는 변수들은 다음과 같은 이미지로 나타낼 수 있다.

 

- 메모리 상에 이미지 -

만약 이 변수들을 다른 변수에 '='를 이용하여 할당할 때, 새로운 변수에 값을 복사하게 됩니다. 

 

- '='이용하여 변수 값 복사 -

메모리 상에 존재하는 변수들은 다음과 같은 이미지로 나타낼 수 있다.

 

- 메모리 상에 이미지 -

같은 값을 가진 변수 하나를 바꾸더라도 다른 변수에는 아무런 영향이 없다. 

---

원시 타입은 객체가 아니기 때문에 어떠한 메소드를 갖고 있지 않다.

또한 원시타입은 자신을 변경할 수 있는 메소드를 갖고 있지 않기 때문에 변하지 않은 속성(immutable)을 갖는다.

 

- 원시타입 값 할당 -

위에 코드는 다음과 같이 진행된다. 

 

1. 변수 x 의 원시타입 숫자 데이터를 할당

2. x의 변수 값을 y 변수에 복사

3. 변수 x의 값을 변경 

4. y의 값은 변경되지 않은 채 숫자 100이 출력

 

물론 값을 변수에 할당할때 얼마든지 재할당이 가능하지만, 실제로 변수에 할당되었던 원시타입의 값이 바뀌는 것이 아니라, 새로운 원시타입의 값이 들어가는 개념이다.

 

원시 타입의 값 자체는 절대 바뀔 수가 없다.  

 

2. 객체(참조) 데이터 타입 (passed by reference)

 

참조 데이터 타입은 말 그대로 값을 참조하는 타입이다. 

 

JavaScript에서는 원시 타입이 아닌 것은 모두 객체인데, 함수, 배열도 포함된다. 

 

- Object 

- 함수

- 배열

 

간단하게 말하자면, ECMAScript 표준에서는  객체를 키-값의 저장소로 정의를 하였다.

---

만약 배열을 만들고, 배열 내에 '1' 을 넣었다면, 메모리 상에서는 어떤 일이 일어날까?

 

- 배열 선언 및 값 push -

메모리 안에서는 다음과 같이 값이 할당된다. 변수의 값이 바뀌는 것이 아닌 메모리 속의 배열 값만 바뀌게 된다.

 

- 메모리 안 -

만약 '='를 이용하여 다른 변수로 복사할때, 객체 타입은 원시 타입과 다르게 값이 아닌 참조로 복사된다. 여기서 참조라 함은 값의 주소라고 생각하면 된다. 

 

- 배열 참조 -

위와 같은 코드는 메모리상에는 아래와 같이 표기 된다. 

 

- 메모리 안 - 

각강의 변수는 같은 배열로 향하는 참조 값을 갖게 된다. 즉, reference 또는 refCopy을 건들게 되면 함께 참조하고 있는 배열의 값이 바뀌는 일이 일어난다. 

 

- 배열 값 push -

---

객체 타입은 모든 연산이 실제 값으로 처리되는 원시 타입과 다르게 참조 값으로 처리되기 때문에, 실제로 변수에 할당되었던 값이 동적으로 바뀔 수 있다. 

 

- 객체 타입 값 할당 - 

위에 코드는 다음과 같이 진행된다. 

 

1. 변수 x 의 객체타입(참조타입) 객체 데이터를 할당

2. x의 변수 값을 y 변수에 복사

3. 객체 프로퍼티 값을 변경 

4. 객체는 객체타입(참조타입)이기 때문에, y는 x와 동일한 객체를 가리키므로, 숫자 99가 출력

 

이 코드에서 1, 2번까지는 원시타입과 별다르지 않게 진행이 되지만, 3번 4번 코드를 보게 되면, x.count 키에 할당된 값 100이 99로 바뀌고, x와 y는 동일한 객체를 가리키고 있기 때문에, 참조된 값이 동적으로 변화하는 것을 볼 수 있다. 

 

그림을 통해 알아보자. 

 

 count가 key이고 100을 value 가지고 있는 변수 x 객체는 y 변수가 함께 참조되고 있기 때문에, 해당 값은 동적으로 변화한다. 

 

결론적으로 객체의 값을 복사 하게되면 동일한 객체를 참조하고 있으므로 원본 데이터 값은 변한다. 그러므로 불변적(Immutable)이라 할 수 없다. 

 

다음은 Browser의 동작원리에 대한 설명이다. 

 

< 참고자료 >

 

[도서] You don't know JS - 카일심슨 지음-

https://developer.mozilla.org/en-US/docs/Glossary/Primitive

 

<ES5 series> chapter 2, 데이터 타입 end

 

---