Core js - 데이터 타입

heyhey·2023년 10월 24일
js
0

JS - Deep Dive 🏄🏼‍♂️

목록 보기
17/22
post-thumbnail

데이터에 관한 내용으로, 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 알아보고, 활용할 수 있게 합니다.

1. 데이터 타입의 종류

크게 기본형과 참조형의 두가지의 종류가 있습니다.

기본형 : 숫자 문자 불리언 null undefined... symbol(ES6)

참조형 : 객체 배열 함수 날짜 정규 표현식 ... Map Set...(ES6)

이 종류는 어떤 기준으로 구분하는 것일까요?

기본형은 할당이나 연산 시 복제되고 참조형은 참조된다고 알려져있습니다.
좀더 자세하게 말하자면
기본형은 주솟값을 복제하고, 참조형은 묶음을 가리키는 주솟값을 복제합니다.

2. 데이터 타입에 관한 배경지식

메모리 영억에서 JS의 데이터가 처리되는 과정을 알아보겠습니다.

2-1. 메모리와 데이터

정적 타입언어(자바,C) 같은 경우에는 메모리의 낭비를 최소화 하기 위해 데이터 타입별로 할당할 메모리를 미리 정해두었습니다.

반면 JS는 메모리 용량이 커졌을 때 등장했기 때문에 자유로워 메모리 공간을 넉넉하게 할당했습니다. 그래서 숫자의 경우도 정수형인지 부동소수형인지 구분하지 않아도 됩니다. (형변환 걱정 X)

모든 데이터는 바이트 단위의 식별자(메모리 주솟값)을 통해 서로 구분하고 연결합니다.

2-2. 식별자와 변수

변수와 식별자는 다릅니다.
변수는 '변할수 있는 데이터'입니다.
식별자는 어떤 데이터를 식별하는데 사용하는 '변수명'입니다.

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

3-1. 변수 선언

변수를 선언해보겠습니다. var a

  • 변할 수 있는 데이터를 만들겠다.
  • 이 데이터의 식별자는 'a' 로 한다.

컴퓨터는 주소와 데이터를 통해 변수를 등록합니다.

주소 1003번 => 데이터 {이름 : a , 값 : }

  • 컴퓨터는 메모리에서 비어있는 공간 하나를 확보합니다.
  • 이 공간의 이름을 a 라고 지정합니다. (변수 선언)
  • 이후 사용자가 a에 접근하려고 하면, 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간의 데이터를 반환합니다.

3-2. 데이터 할당

데이터를 할당하겠습니다. a = 'abc'
선언은 위에서 했으니 할당만 따로 해줍니다. 물론 같이 사용하게 되면 선언과 할당을 같이 하는 것입니다.

할당을 할 때는 'abc' 를 바로 값에 저장하지 않습니다.
다시 메모리 공간을 확보해 'abc' 를 저장하고, 그 주소를 변수 영역에 저장하게됩니다.

여기서는 영역이 두개로 나눠지게 됩니다.
기존의 변수 영역, 데이터만 다루는 데이터 영역이 있습니다.
변수 영역
주소 1003번 => 데이터 {이름 : a , 값 : }

데이터 영역
주소 5001번 => 데이터 "abc"

변수 선언

  • 변수 영역에서 빈 공간(1003)을 확보한다.
  • 확보한 공간의 식별자를 'a'로 지정합니다.

데이터 할당

  • 데이터 영역의 빈공간(5001)에 'abc'를 저장한다.
  • 변수 영역에서 a라는 식별자를 검색한다 (@1003)
  • 문자열의 주소(5001)를 @1003 의 값에 대입한다.

주소 1003번 => 데이터 {이름 : a , 값 : @5001 }

변수 영역에 값을 직접 대입하지 않는 이유가 뭔가요?

데이터 변환을 자유롭게 할 수 있습니다.
=> 메모리를 효율적으로 관리할 수 있게 됩니다.

변수 영역에 직접 대입하게 되면 메모리 용량의 규격이 정해집니다.
그렇게 되면 확보된 공간을 데이터 크기에 맞게 늘리는 작업이 추가됩니다.

그렇기 때문에 변수와 데이터를 별도의 공간으로 나누어 저장하는 것이 최적입니다.

데이터를 새롭게 할당해보겠습니다. a = 'abcdef'

  • 데이터 영역의 빈공간(5002)에 'abcdef'를 저장한다.
  • 변수 영역에서 a라는 식별자를 검색한다 (@1003)
  • 문자열의 주소(5002)를 @1003 의 값에 대입한다.
    주소 1003번 => 데이터 {이름 : a , 값 : @5002 }

데이터가 반복될 경우에도 데이터 영역에서 같은 값을 참조하면 되기 때문에 중복 데이터에 대한 처리 효율이 높아질 수 있습니다.

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

4-1. 불변값

불변값과 상수는 오해하기 쉬우나 다른 것입니다.

변수와 상수를 구분 짓는 것은 "변수 영역 메모리" 입니다.
한번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부의 차이입니다.

불변성 여부를 확인하는 것은 "데이터 영역 메모리"입니다.
데이터를 재할당하더라도 기존의 데이터는 변경되지 않고, 새로운 데이터의 주소값을 사용하는 것입니다.

4-2. 가변값

가변값에 앞서 참조형 데이터를 변수에 할당해보겠습니다.
var obj = {a:1,b:'bbb'}
1. 변수 영역의 빈 공간(@1002)를 확보를 합니다.
2. 그 주소의 이름을 obj 로 지정합니다.
@1002 => {이름 : obj , 값 : - }

  1. 데이터 저장공간에 빈 공간을 확보합니다 (@5001)
    @5001 => {값 : - }

  2. 데이터를 저장하려고 하니 여러개의 프로퍼티로 이뤄진 데이터 그룹입니다.

  3. 이 그룹 내부의 프로퍼티들을 저장하기 위해 변수 영역을 마련합니다.

  4. 새로운 변수 영역의 빈공간을 확보 후 a,b로 이름을 지정합니다.(@7001,@7002)
    @7001 => {이름 :a, 값 : - }
    @7002 => {이름 :b, 값 : - }

  5. 데이터 공간에 빈 공간을 확보하고, 1과 'bbb'를 할당합니다. (@5002,@5003)
    @5002 => {값 : 1}
    @5003 => {값 : 'bbb'}

  6. a와 b에 데이터를 할당합니다.
    @7001 => {이름 :a, 값 : @5002}
    @7002 => {이름 :b, 값 : @5003}

  7. 이 데이터들의 영역을 마련합니다.
    @7000 => @7001 ~ @7002

  8. obj에 데이터를 할당합니다.

@1002 => 데이터 {이름 : obj , 값 :@7000 }

기본형 데이터와의 차이는 객체의 변수 영역이 별도로 존재하는 것입니다.
데이터 영역의 저장된 값은 불변값이지만 변수에는 다른 값을 얼마든지 대입가능합니다.

var obj1= {a:1,b:'bbb'}
obj1.a = 2

2를 대입시키게되면 새로운 데이터 영역을 만들고(@5004), a의 값을 바꿉니다.
@7001 => { 이름 :a, 값 : @5002 }->{ 이름 :a, 값 : @5004 }
@7000 => @7001 ~ @7002 (그대로)
@1002 => 데이터 {이름 : obj , 값 :@7000 } (그대로)

데이터를 확인해보면 새로운 객체를 만드는 것이 아닌 기존의 객체 내부의 값만 바꾼 결과가 도출됩니다.

중첩된 객체

arr = [3,4,5]
이런 형태도 마찬가지로 생각하면 됩니다.
@1001 => {arr : -}
@5001 => @8001 ~ ?
@8001 => 3 , @8002 => 4, @8003 => 5
@1001 => {arr:@5001}

arr[1]을 검색하게 되면 메모리는 다음 과정을 거칩니다.

  1. arr 검색 | @1001 => {arr:@5001}
  2. @5001 검색 | @8001 ~ ?
  3. 1번 index 인 @8002 검색 | @8002 => 4
  4. 4를 반환합니다.

만일 이상태에서 재할당을 내리면 어떻게 될까요?
arr = 'str'
1. @8004 => 'str'
2. @1001 => {arr : @8004}
간단하게 이렇게 됩니다. 그러면 이제 @5001(@8001 ~ ? )는 의미없는 값이 되어 버렸습니다.
데이터에 대해 자신의 주소를 참조하는 변수의 개수를 참조 카운트 라고 합니다. 이 값이 0이 되게 된 것이죠. 이렇게 참조 카운트가 0이 되게 되면 가비지 컬렉터의 수거 되상이 됩니다.
가비지 컬렉터는 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박하면 자동으로 수거 대상들을 수거하고, 빈 공간이 됩니다.

4-3. 변수 복사 비교

변수를 복사하면 어떻게 될까요?
기본형부터 확인하겠습니다.

var a = 10
var b = a

@1001 => {a:-}
@5001 => 10
@1001 => {a:@5001}

@1002 => {b:-},
b = a 이다( @1001 => {a:@5001} )
@1002 => {b:@5001}

예상한 대로 흘러갔습니다. 

a = 1 // a => @5001
b = a // b => @5001
a = 3 // a => @5002
b // 1 @5001

기본형 데이터는 복사한 변수를 바꿨더니 값이 달라집니다.

다음은 참조형의 복사를 확인해 보겠습니다.

var obj1 = {a:1,b:'str'}
var obj2 = obj1

@1001 => {obj : -}
@5001 => @7003 ~ ?
@1001 => {obj1 : @5001}

@7003 => {a : - }, @5002 => 1
@7003 => {a : @5002}

@7004 => {b : - }, @5003 => 'str'
@7004 => {a : @5003}

obj2 = obj1 이다 (@5002 => @5001 )
@5002 => {obj2 : @5001}


a = [1] // a => @5001
b = a // b => @5001
a = [2] // a => @5002
b ? [1]// [1] b => @5001 

a = [1] // a => @5001
b = a // b => @5001
a[0] = 2 
// @5001 => @7001 ~ ?
// @7001 => 1-> 2 (1에서 2로 변경)
b ? [2] 
// @5001 => @7001 ~ 
// @7001 => 2

참조형 데이터는 프로퍼티의 값을 바꾸었더니 두 값이 달라지지 않았습니다.

참조형 데이터가 가변값이라고 설명할 때의 가변은 참조형 데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립합니다.

5. 불변 객체

5-1. 불변 객체를 만드는 간단한 방법

불변 객체를 만드는 것은 React 를 사용하기에 앞서 기초가 되어야 하는 개념입니다. 데이터를 변경할 때, 프로퍼티를 변경하는 것이 아니라 새로운 객체를 만들어 재할당하는 방법을 사용해야 합니다.

예를 들어 이름을 바꾸는 함수일 때는 아래와 같이 바꿔야 합니다.
주석의 내용처럼 하게 되면 user1까지 변경이 되어버립니다. 

let user1  = {
	name :'hi',
	age : 40
}
const changeName = (user,name)=>{
	// user.name = name => user1 = {name:'bye'}
	return {age:40,name:name}
}
const user2 = user1
changeName(user2,'bye')

주석의 함수처럼 사용하고 싶은데 방법이 없을까요?
바로 user2 = user1 부분에서 서로에게 영향을 주지 않기 위해 복사 기능을 만들어서 사용해 봅시다.

모든 프로퍼티를 복사하는 함수를 구현해보겠습니다.

const copyObject = function(target){
	let result = {}
	for (let prop in target){
		result[prop] = target[prop];
	}
	return result;
}
const user2 = copyObject(user1)

이 함수를 이용한다면 user1 과 user2는 다르게 됩니다.
하지만 이건 얕은 복사입니다.

5-2. 얕은 복사와 깊은 복사

얕은 복사라는 것은 바로 아래 단계의 값만 복사하는 것이고
깊은 복사는 내부의 모든 값들을 전부 복사하는 법입니다.

얕은 복사는 중첩이 된 객체라면 기존의 데이터를 그대로 참조합니다.

깊은 복사를 구현해보겠습니다. 

cosnt copyObjectDeep  = (target)=>{
	let result = {}
	if (typeof target ==='object' && taget!== null){
		for (let prop in target){
			result[prop] = copyObjectDeep(target[prop])
		}
	}
	else{
		result = target
	}
	return result;
}

쉬운 방법도 있습니다. 

cosnt copyObjectDeep  = (target)=>{
	return JSON.parse(JSON.stringify(target))
}

6. undefined & null

JS에서는 '없음'을 나타내는 값이 두가지 있습니다. undefined와 null이죠

undefined는 값이 존재하지 않을 때 JS 엔진이 자동으로 부여하는 경우입니다. 사용자가 명시적으로 부여할 수도 있습니다.

1) 값을 대입하지 않은 변수 var a;
데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
2) 객체 내부의 존재하지 않는 프로퍼티에 접근할 때
3) return 문이 없거나 호출되지 않는 함수의 실행 결과

  • 비어있는 요소는 undefined와 다르다
    new Array(2) => [empty,empty]

할당된 undefined는 실존하는 데이터인 반면, JS 엔진이 반환해주는 undefined 는 값이 없는 것입니다.

혼란을 막기 위해 사용자가 할당하지 않는 것이 권장됩니다.
이럴 때는 null을 사용하는 것이 좋습니다.
주의점 : typeof null => object 이건 버그라고 합니다.

profile
heyhey
주경야독
이전 포스트

18. 함수와 일급 객체

다음 포스트

Core js - 실행 컨텍스트

0개의 댓글