코어 자바스크립트 정리 - [1] Data Type

01 - 자바스크립트의 데이터 타입 종류

1. 기본형 ( primitive type) :  [ 불변성 ]
   • number
   • string
   • boolean
   • null
   • undefined
   • symbol
2. 참조형 (reference type) : 여러개의 프로퍼티(변수)가 합쳐진 데이터 타입  [ 가변성 ] 
   • Object
   • Array
   • Function
   • Date
   • RegExp
   • Map, WeakMap
   • Set, WeakSet

 

02 - 데이터 타입에 관한 배경지식

모든 데이터는 바이트 단위의 식별자( 메모리 주소 )를 통해 서로 구분하고 연결 가능.

• 변수 : 변할수 있는 데이터
• 식별자 : 특정한 데이터를 식별하는데 사용되는 이름 ( 변수명 )

 

03 - 변수 선언과 데이터 할당 방식

※ 변수 영역과 데이터 영역은 책의 저자이신 정재남님께서 만들어낸 개념.

var i;	// 변수 i 선언
i = '가나다';		// 변수 i에 데이터 할당( '가나다' )

var j = '가나다';
var l = '가나다';

i = '가나다라마....';	// 변수 i에 데이터 할당( '대충 긴 데이터' )

위 변수 i에 대한 데이터 할당 흐름.

변수 영역	주소	1002	1003	1004	···
	데이터	식별자 : i 값 : @5002 값 : @5003	식별자 : j 값 : @5002	식별자 : l 값 : @5002
데이터 영역	주소	5002	5003	5004~5006	···
	데이터	가나다	123	가나다라마...

[ Line 1 ] : var i;

1) 변수 영역에서 식별자 i 검색 [ 없음 ]

2) 변수 영역에서 메모리 확보 ( @1002 )

3)  확보한 메모리 공간에 데이터 (식별자) 지정.

 

[ Line 2 ] : i = '가나다'

1) 데이터 영역에서 '가나다' 데이터가 있는지 확인  [ 없음 ]

2) 데이터 영역의 빈 메모리( @5002 )에 값 '가나다' 저장.

3) 변수 영역에서 식별자 i 검색

4) 식별자 i의 메모리 공간에  값 '가나다'을 저장한 메모리 주소( @5002 ) 저장. 

 

[ Line 4, Line 5 ] : var j = '가나다'; ,  var l = '가나다';

1) 변수 영역에서 식별자 j, l 검색 [ 없음 ]

2) 변수 영역에서 메모리 확보 ( @1003, @1004 )

4) 데이터 영역에서 '가나다' 데이터가 있는지 확인  [ 있음 @5002 ]

4) 식별자 j, l 의 메모리 공간에  값 '가나다' 의 메모리 주소( @5002 ) 저장. 

 

[ Line 7 ] : i = '가나다라마...';

1) 변수 영역에서 식별자 i 검색 [ 있음 ]

2) 데이터 영역에서 '가나다라마...'  데이터가 있는지 확인  [ 없음 ]

3) 데이터 영역의 빈 메모리( @5004 ~ @5006 )에 값 '가나다라마...' 저장. 

4) 식별자 i의 메모리 공간에  값 '가나다라마...' 을 저장한 메모리 주소( @5004 ~ @5006 ) 저장. 

 

★ 변수영역과 데이터 영역을 구분해서 관리하는 이유.

메모리의 효율성 증가

중복된 데이터를 한번만 저장해서 사용 할 수 있다.

ex) Line 4, Line 5 Case - 일반적으로 데이터값보다 데이터가 저장되어 있는 메모리 주소의 크기가 작다.

 

데이터가 변경될 때 문제 발생 :

변수영역과 데이터 영역을 구분하지 않고 사용을 한다고 가정하면 데이터가 변경될 때마다 불필요한 작업이 추가된다.

ex) 변수영역과 데이터 영역을 구분하지 않을때, 변수 i의 값을 '가나다라마....' ( 긴 데이터 ) 로 변경한다면.

메모리	주소	5002	5003	5004	5005	5006	5007
	데이터	식별자 : i 값 : 가나다	식별자 : j 값 : 가나다	식별자 : l 값 : 가나다

1) 식별자 i 에 새로 저장될 데이터 크기 확인 & 현재 식별자 i에 할당된 메모리에 저장 가능한지 확인

2) '가나다라마....' 저장을 위해서는 메모리가 3 블럭 필요  ( 예시를 위한 명칭 )

2) @5003 주소의 식별자, 데이터 값를 다른 빈 메모리(@5005)에 복사. ( 불필요한 작업 )

3) @5004 주소의 식별자, 데이터 값를 다른 반 메모리(@5006)에 복사. ( 불필요한 작업 )

4) @5002 주소의 데이터 값에 '가나다라마....' 로 저장

메모리	주소	5002	5003	5004	5005	5006	5007
	데이터	식별자 : i 값 : 가나다			식별자 : j 값 : 가나다	식별자 : l 값 : 가나다

 

04 - 기본형 데이터와 참조형 데이터

변수와 상수를 구분하는 성질은 변경 가능성.

변수 : 식별자가 가르키는 데이터 주소를 다시 할당할 수 있다.

상수 : 식별자가 가르키는 데이터 주소를 다시 할당할 수 없다.

 

1. 불변값

기본형 데이터들은 생성된 순간 값을 바꿀 수 없다. ( 데이터 영역에 저장된 기본형 데이터 값들 )

해당 식별자의 값을 변경할때, 데이터의 값이 저장되는 메모리의 위치가 바뀌게 된다

var a = 'abc';
a = a + 'bcf';

변수 영역	주소	1002	1003	1004	···
	데이터	식별자 :a 값 : @5002 값 : @5004
데이터 영역	주소	5002	5003	5004	···
	데이터	abc		abcdef

[ Line 2 ] 

기존 식별자 a 가 가르키는 데이터 (메모리 @5002 에 있는 값 ) 를 수정하지 않고,

새로운 메모리주소(@5004)에 'abcdef' 값을 저장한 후, 해당 메모리 주소(@5004)를 식별자 a 에 매핑한다.

a의 값이 저장된 메모리 블럭이 변경되었음.( @5002 -> @5004)

@5002의 데이터는 참조카운트가 0일 경우 가비지 컬렉터가 자동으로 정리.

 

2. 가변값

참조형 데이터의 내부 프로퍼티를 변경하는 경우에는 값이 바뀔 수 있다.

참조형 데이터는 결국 여러개의 프로퍼티(변수)로 구성되어 있는 데이터이기 때문에, 프로퍼티(변수) 하나의 값이 바뀌게 되면,  참조형 데이터의 값이 바뀐것이 된다( 참조형 데이터의 값이 저장되는 메모리 위치는 유지됨). 

복사할때 아주 중요.!

 

1) 참조형 데이터 메모리 할당.

var obj = {
    a: 10,
    b: 'test'
};

변수 영역	주소	1002	1003	1004	···
	데이터	식별자 : obj 값 : @5002
	주소	2002	2003	2004	···
	데이터	식별자 : a 값 : @5003	식별자 : b 값 : @5004
데이터 영역	주소	5002	5003	5004
		@2002 ~ @2003	10	test

 

2) 참조형 데이터 복사 - 식별자 obj2는 기존 obj의 값이 저장된 메모리주소를 가르키게 된다.

var obj2 = obj;

변수 영역	주소	1002	1003	1004	···
	데이터	식별자 : obj 값 : @5002	식별자 : obj2 값 : @5002
	주소	2002	2003	2004	···
	데이터	식별자 : a 값 : @5003	식별자 : b 값 : @5004
데이터 영역	주소	5002	5003	5004
		@2002 ~ @2003	10	test

3) obj2의 프로퍼티 변경시 obj의 프로퍼티 값도 같이 변경됨. 

obj2.a = 20;

if( obj === obj2 )	// true
if( obj2.a == 20 )	// true
if( obj.a == 20 )	// true

변수 영역	주소	1002	1003	1004	···
	데이터	식별자 : obj 값 : @5002	식별자 : obj2 값 : @5002
	주소	2002	2003	2004	···
	데이터	식별자 : a 값 : @5003 값 : @5005	식별자 : b 값 : @5004
데이터 영역	주소	5002	5003	5004	5005
		@2002 ~ @2003	10	test	20

obj 와 obj2가 가르키는 데이터(객체)는 동일한 메모리주소(@5002)에 저장됨.

obj, obj2 식별자가 가르키는 객체(데이터) @2002 ~ @2003

기존 obj2.a의 값이 저장된 메모리 주소 = @5003

 

[ Line 1 ] 

1) 빈 메모리 블럭(@5005)에 '20' 값을 저장 

2) 식별자 obj2.a의 값이 저장된 메모리 주소를 @5005로 변경.

 

기존 obj, obj2 식별자가 가르키는 객체(데이터)가 저장된 메모리블럭은 변경이 되지 않았지만,

내부 프로퍼티인 a의 값이 저장된 메모리 블럭이 변경되었음.( @5003 -> @5005)

 

 

05 - 불변 객체

값으로 전달받은 객체에 변경을 하더라도, 원본 객체에 변경이 생기면 안되는 상황에 사용.

 

얕은 복사와 깊은 복사

얕은 복사 : 바로 아래단계의 값만 복사

깊은 복사 : 내부의 모든 프로퍼티를 찾아서 전부 복사

1) 사용자 정의 함수를 사용

2) JSON 활용 - 함수나 숨겨진 프로퍼티인 __proto__ , getter, setter 등 JSON으로 변경되지 않는 프로퍼티는 무시됨.

 

 

06 - undefine 와 null

자바스크립트의 없음을 나타내는 값

undefine 

1] 값을 대입하지 않은 변수.

2] 객체 내부의 존재하지 않는 프로퍼티에 접근

3] return 문이 없거나 호출되지 않는 함수의 실행결과

 

null

사용자가 명시적으로 '없음'을 표현하기 위해 대입하는 값.

 

---

참조 : 코어 자바스크립트 ( 정재남 )