TIL 240816 (데이터 타입[심화])

TIL

TIL 240816 (데이터 타입[심화])

j-coder 2024. 8. 16. 23:38

데이터 타입 (심화)

1. 데이터 타입의 종류

기본형

Number

String

Boolean

null

undefined

Symbol

참조형 (Object)

Array

Function

Date

RegExp

Map, WeakMap

Set, WeakSet

기본형과 참조형 구분 (값의 저장 방식, 불변성 여부)

	기본형	참조형
복제 방식	값이 담긴 주소값을 바로 복제	값이 담긴 주소값들의 묶음을 가리키는 주소값을 복제
불변성 여부	불변성 O	불변성 X

식별자, 변수

var testValue = 3 에서

testVailue가 식별자, 3이 변수 이다.

변수 = 데이터

식별자 = 변수명

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

선언과 할당을 풀어 쓴 방식

var str; // 변수 선언

str = 'test!'; // 변수 할당

선언과 할당을 붙여 쓴 방식

var str = 'test!';

3. 기본형 데이터와 참조형 데이터

3 - 1 두 가지 주요 개념 (메모리 기준)

변수 와 상수

변수 : 변수 영역 메모리를 변경할 수 있음

상수 : 변수 영역 메모리를 변경할 수 없음

불변하다 와 불변하지 않다

불변하다 : 데이터 영역 메모리를 변경할 수 없음

불변하지 않다 : 데이터 영역 메모리를 변경할 수 있음

3 - 2 불변값 과 불변성 (기본형 데이터)

var x = 'zxc';

x = x + 'asd';

주소	1001	1002	1003
데이터	x
주소	3001	3002	3003
데이터	'zxc'	'zxcasd'

'asd'가 주소 3001에 추가되는 것이 아니고 3002라는 새로운 주소에 추가되서 'zxcasd'라는 새로운 값이 생긴다.

// 즉, 변수 x 는 불변하다 라고 할 수 있다.

이제 주소3001은 사용이 되지 않기 때문에 가비지컬렉터에게 수거 된다.

가비지컬렉터란 ?

프로그램에서 더 이상 사용되지 않는 메모리 공간을 자동으로 해제하는 기능

3 - 3 가변값과 가변성 (참조형 데이터)

var obj1 = {

a: 1,

b: 'bbb',

};

b. 기본형 데이터의 변수 할당 과정과의 차이점

- 객체의 변수 영역이 별도로 존재 여부이다.

c. 참조형 데이터가 불변하지 않다(가변하다)인 이유

obj1 에서 a를 3로 변경한다고 하면 @5001이 1에서 3으로 바뀌는게 아니고 새 주소 @5003에 3이 추가되어

@5001은 가비지컬렉터가 되고 @7103 자리에 @5001대신 @5003로 변경되기 때문이다.

변수와 상수의 기준은 변수 영역, 불변과 가변의 기준은 데이터 영역이다.

d. 중첩객체의 할당

var obj = {

x : 3,

arr : [3, 4, 5],

}

e. 참조카운트

객체를 참조하는 변수나 다른 객체의 수를 나타내는 값

3 - 4 변수 복사의 비교

// 선언

var a = 50; // 기본형

var obj1 = { c: 50, d: 'kkk' }; // 참조형

// 복사

var b = a; // 기본형

var obj2 = obj1; // 참조형

3 - 5 복사 이후 값 변경( 객체의 속성 변경)

// 선언

var a = 50; // 기본형

var obj1 = { c: 50, d: 'kkk' }; // 참조형

// 복사

var b = a; // 기본형

var obj2 = obj1; // 참조형

b = 30;

obj2.c = 10

파랑색 3 - 4, 빨강색 3 - 5

3 - 4 변수 복사 비교 사진과 위 의 사진을 비교하면 이해하기 쉽다.

3 - 6 복사 이후 값 변경(객체 자체를 변경)

// 선언

var a = 50; // 기본형

var obj1 = { c: 50, d: 'kkk' }; // 참조형

// 복사

var b = a; // 기본형

var obj2 = obj1; // 참조형

b = 30;

obj2 = { c : 10, d : 'ppp' };

파랑색 3 - 4, 초록색 3 - 6

3 - 4 변수 복사 비교 사진과 위 의 사진을 비교하면 이해하기 쉽다.

4. 불변 객체

4 - 1 얕은 복사

바로 아래 단계의 값만 복사

3 - 5,6 의 문제점을 해결할 수 있는 방법이 있는데 그건 바로 얕은 복사이다.

var copy = function (target) {

var result = {};

for (var prop in target) { // 타겟에 있는 것을 하나의 depth만 돌면서 복사해온다.

result[prop] = target[prop];

}

return result;

}

이 copy함수를 이용하면 하드코딩을 하지 않아도 된다.

객체의 속성에 접근해서 변경하는 방법이다.

하지만 얇은 복사도 문제가 없는건 아니다.

중첩된 객체에는 완벽한 복사를 할 수 없기때문이다.

이 문제를 해결하는 데에는 깊은 복사 방법이 필요하다.

4 - 2 깊은 복사

내부의 모든 값들을 하나하나 모두 복사하는 방법이다. (여러 depth)

var user = {

name: 'wonjang',

urls: {

portfolio: 'http://github.com/abc',

blog: 'http://blog.com',

facebook: 'http://facebook.com/abc',

}

};

// 여기서보면 얕은 복사는 중복된 객체의 주소값만 복사하기 때문에 문제가 있어서
깊은 복사를 통해 user.urls의 속성을 불변객체로 만들어야 한다.

// 1차 copy

var user2 = copyObject(user);

// 2차 copy

user2.urls = copyObject(user.urls);

이렇게 두번을 해줘야 한다.

기본형 데이터는 그대로 복사 + 참조형 데이터는 내부의 속성를 복사를 한다 => 재귀적 수행

재귀적 수행이란? (recursive)

함수나 알고리즘이 자기 자신을 호출하여 반복적으로 실행되는것

위 코드 해결방법을 적용한 코드가 이것이다.

var copyDeep = function(target) {

// 복사할 결과를 저장할 빈 객체 생성

var result = {};

// target이 객체이고 null이 아닌경우

if (typeof target === 'object' && target !== null) {

// target의 모든 속성에 대해 반복

for (var prop in target) {

result[prop] = copyDeep(target[prop]);

}

} else {

// target이 객체가 아닌 경우(원시값일 때), 결과에 원시 값을 직접 할당

result = target;

}

return result;

}

원시값 이란?

기본 데이터 타입을 가진 값을 의미

4 - 3 JSON 이용한 깊은복사

하지만 이 방법은 완벽한 방법이 아니고 안되는 것이 많아서 정리는 하지 않겠습니다.

5. undefined와 null

둘 다 없음을 의미하지만 약간씩 다르다.

5 - 1 undefined

보통 세가지의 경우를 undefined라고 표현한다. (값이 있어야 하는데 없는경우)

a. 변수는 선언 했지만 값을 할당하지 않은 경우

b. .이나 []로 접근하려 할 때 해당 데이터가 존재하지 않는 경우

c. return 문이 없거나 함수가 호출이 되지 않는 경우

'없다'를 명시적으로 표현할 때는 undefined 사용하지 말기

5 - 2 null

사용자가 '없다'를 명시적으로 표현할때 쓴다.

마무리

데이터 타입에 대해 좀 더 깊이 공부해보았는데 글로는 정리가 됬는데 머리에는 아직 정리가 많이 필요하다.