[ Core JS ] 데이터 타입 💨

권규리·2023년 4월 30일

JavaScript

👩🏻‍💻FrontEnd

목록 보기

27/29

CH 01. 데이터 타입

📝자바스크립트가 데이터를 처리하는 과정을 통해 기본형과 참조형 타입의 다른 동작 방식 이해

01. 데이터 타입의 종류

자바스크립트는 크게 두 가지 데이터 타입으로 나뉜다.

기본형 (숫자, 문자열, 불리언, null, undefined, + symbol)
참조형 (객체- 배열, 함수, 날짜, 정규표현식)

02. 메모리와 데이터

bit: 0 또는 1만 표현하며, 컴퓨터에서 사용하는 가장 작은 정보 단위
byte: 8bit로 구성된 컴퓨터가 처리하는 정보의 기본단위

많은 비트를 한 단위로 묶으면 표현할 수 있는 값이 많아지고, 검색 시간을 줄일 수도 있기 때문에 많은 언어들이 데이터 타입별로 할당할 메모리 영역을 정해놓았다. 이때, 모든 데이터는 바이트 단위의 식별자, 메모리 주솟값을 통해 서로 구분하고 연결한다.

03. 변수 선언과 데이터 할당

기본형 데이터 할당

var a; 				// 변수 a 선언
a = 'abc'; 			// 변수 a에 데이터 할당

var a= 'abc';       // 동시에 변수 선언과 할당

데이터 할당에 대한 메모리 영역의 변화

변수 영역에 빈자리 확보 후 이름 넣음
데이터 영역에 동일한 데이터 값이 있는지 확인
동일한 데이터 값이 없다면, 데이터 영역에 빈자리 확보 후 값을 할당
데이터 영역의 주소를 해당 변수 영역의 값에 넣음

왜 바로 변수 영역에 값을 넣지 않고, 데이터 영역에 할당 후 넣는가?
= 데이터 변환을 더 자유롭게 하며 메모리 관리에 효율적이기 때문이다.

불변값

기본형 데이터는 모두 불변값

만약 위에서 변수 a에게 할당했던 'abc'라는 값을 'abcdef'로 바꾼다면 메모리 영역은 어떻게 바뀌는가?
= 새로운 데이터 영역에 'abcdef'라는 문자열을 추가하여 추가한 데이터 영역의 주소를 변수 영역의 값에 넣음

즉, 한 번 만든 값은 바꿀 수 없고 변경은 무조건 새로 만들어 별도의 공간에 저장해야함 !

참조형 데이터 할당

참조형의 성질은 가변값인 경우가 많지만 설정에 따라 불변값으로 활용하는 경우도 있음

var obj = {
	a:1,
    b: 'bbb',
};

1. 변수 영역에 빈자리 확보 후 이름 넣음
2. 여러 프로퍼티로 이루어진 경우, 객체 변수 영역을 마련 후 그 영역의 주소를 데이터 영역에 저장 => 변수 영역의 값에 넣음
3. 객체 변수 영역의 이름에 프로퍼티 이름을 넣음
4. 데이터 영역에서 1과 'bbb'데이터 값이 있는지 확인
5. 동일한 데이터 값이 없다면, 데이터 영역에 빈자리 확보 후 값을 할당
6. 데이터 영역의 주소를 객체 변수 영역의 값에 넣음

가변값

var obj = {
	a:1,
    b: 'bbb',
};

obj.a = 2;			// a 프로퍼티에 숫자 2를 재할당

순서는 위의 순서랑 동일하지만, 여기서 봐야할 것은 변수 영역의 obj가 바라보는 주소는 바뀌지 않고, 객체 변수 영역의 값만 바뀐 것!

즉, 참조형 데이터의 가변은 데이터 자체가 아닌 기존의 객체 내부의 값만 바뀔 때 성립!

변수 복사 비교- 변수를 복사할 때의 기본형과 참조형의 차이

var a = 10;
var b = a;								// a 복사
var obj1 = {c: 10, d: 'ddd',};
var obj2 = obj1;						// obj1 복사

사진과 같이 1002와 1004는 복사한 것이다. 이때 1002의 값은 1001의 값을 대입한 것이며, 1004는 1003의 값을 대입한 것이다.

b = 15; obj.c = 20;으로 값을 재할당 한다면?

기본형 데이터를 복사한 변수 b의 값을 바꿨더니 1002의 값이 1001의 값과 달라졌다. 반면 참조형 데이터를 복사한 obj2의 객체 내부의 값을 바꿔도 1003의 값과 1004의 값은 동일하다. 이것이 기본형의 불변값과 참조형의 불변값의 차이다.

04. 불변객체

기본형, 참조형 데이터 모두 기존의 데이터는 변하지 않는다.
(참조형은 내부 프로퍼티가 변경될 때만 '가변' 성립)

불변 객체는 언제 필요할까?
= 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 할 때.
위의 코드는 유저의 이름을 변경하는 코드인데, 17번째 줄을 보면 원래 이름과 바뀐이름이 같다는 걸 알 수 있다. 이는 객체의 가변성으로 인한 문제이다.이는 위의 문제점을 changeName 함수가 새로운 객체를 반환하도록 수정한 코드이다. 여기에 console.log(user.name, user2.name) 을 하면 Jaenam , Jung으로 두개의 값이 다르게 뜨는 걸 볼 수 있다.

05. 얕은 복사와 깊은 복사

얕은 복사- 바로 아래 단계의 값만 복사하는 방법

얕은 복사 시 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사하므로 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 됨
코드를 보면, user2의 name 프로퍼티를 바꿔도 user의 name 프로퍼티는 바뀌지 않지만 urls에 대해서는 원본과 사본 어느쪽을 바꾸더라도 다른 한쪽의 값이 바뀌는 걸 볼 수 있다.