데이터 타입 - Javascript 핵심 개념 | 정재남

[출처 : https://www.inflearn.com]

강의 Intro

[Section1] 데이터 타입

 : 데이터가 메모리에 저장되는 방식을 확인함으로써 기본형과 참조형의 데이터가 발생하는 이유

 

[Section2] 함수

 : 호이스팅, 선언방식별 차이점, 함수스코프와 실행컨텍스트의 정의 및 자바스크립트 엔진이 해석하는 순서, 메소드와 함수의 구별하는 법과 콜백함수의 정의 및 특징

 

[Section3] this 

 : 상황별로 달라지는 this와 명시적인 this 바인딩 방법(call, apply, bind 메소드)

 

[Section4] closure

 : 클로저의 의미, 클로저로 private 변수 생성 방법

 

[Section5] prototype

 : 다이얼그램을 활용해서 자바스크립트 전반을 아우르는 동작 원리

 

[Section6] class

 : 프로토타입 체이닝을 활용하여 클래스 상속 및 다중 상속 구현

---

데이터 타입 - 기본형과 참조형의 종류 및 차이점

# Primitive Type(기본형)

: 값을 그대로 할당

 *Number, String, Boolean, null, undefined + (ES6) symbol 

 

#Reference Type(참조형)

: 값이 저장된 주소값을 할당(참조)

 * [Object] Array, Function, RegExp + (ES6) Map, Set, WeakMap, WeakSet 

 

※ 기본형 데이터의 예제

- 메모리 상에 저장되는 형태를 추상화 (실제 메모리 동작의 흐름을 이해할 수 있다.)

- 변수명/주소의 표와 주소/데이터의 표는 별개의 저장공간이 아니며, 변수명/주소의 표가 313번보다 앞에 있다고 생각하자

var a;         // 빨간 글씨
a = 10;        // 빨간 굵은 글씨
var b = 'abc'; // 파란 글씨
var c = b;     // 초록 글씨
c = 20;        // 초록 굵은 글씨

변수명	a	b	c
주소	@313	@314	@315

주소	...	313	314	315	316	317	...
데이터		값없음 ⇒ 10	'abc'	'abc' ⇒ 20

# 선언 : 공간을 확보하고 해당 공간의 주소를 변수명과 매칭

# 할당 : 해당 변수가 가리키는 주소의 공간에 데이터를 저장

 

※ 참조형 데이터의 예제

var obj = {};            // 빨간 글씨
obj.a = ""; obj.b = "";  // 빨간 굵은 글씨
obj.a = 1; obj.b = "b";  // 빨간 굵은 기울어진 글씨
// 객체생성 끝           // 빨간 굵은 기울어진 취소선 글씨

var obj2 = obj  // 파란 글씨 
obj2.a = 10;    // 파란 굵은 글씨

console.log(obj2.a); // 10
console.log(obj.a);  // 10
// obj === obj2 ; 서로 동일한 객체의 주소(1011)를 참조한다.

변수명	obj	obj2
주소	@413	@414

주소	...	413	414	...	1011	1012	1013	...
데이터		값없음 ⇒ @1011	@1011		{   a : @1012,   b : @1013 }	값없음 ⇒ 1 ⇒ 10	값없음 ⇒ 'b'

- 위 과정을 데이터 공간에 기본형 데이터가 담길 때까지 반복한다. 즉 참조형 데이터는 기본형 데이터의 집합이다.

- 참조가 이뤄지는 형식 : 따로 저장된 객체의 주소(1011)만 복사한다.

 

# property : 프로퍼티명은 변수와 비슷한 성질

# value : 변수에 할당되는 data와 비슷한 성질

 

※ Nested Object(중첩된 객체)의 예제   

 *Nested Object : 참조형 데이터 안에 또 다시 참조형 데이터가 있는 경우

var obj3 = {};      // 빨간 글씨
obj3.a = "";        // 빨간 굵은 글씨
obj3.a = [];        // 파란 글씨
obj3.a = [4, 5, 6]; // 파란 굵은 글씨
// 대입 완료        // 빨간 굵은 기울어진 글씨

obj3.a = "new"      // 초록 글씨
// 1326 ~ 1328 주소의 데이터를 참조하는 곳이 없어진다. Danling Object가 된다.

변수명	obj3
주소	@547

주소	...	547	...	1184	1185	...	1326	1327	1328	...
데이터		값없음 ⇒ @1184		{   a : @1185 }	[   @1326,   @1327, ⇒ 'new'   @1328 ]		값없음 ⇒ 4 ⇒ G.C 대상	값없음 ⇒ 5 ⇒G.C 대상	값없음 ⇒ 6 ⇒G.C 대상

# Danling Object: '정리되지 않은 메모리', '유효하지 않은 메모리 주소'를 말한다.    *자바에서는 Garbage라고 부른다.

# G.C 과정(Mark and Sweep)

: G.C(Garbage Collector)가 스택의 모든 변수 또는 Reachable 객체를 스캔하면서 각각 어떤 객체를 참조하고 있는지 찾는 과정이 Mark라고 한다. 이 과정에서 Stop the world가 발생한다. 이후 Mark 되어있지 않은 객체들을 힙에서 제거하는 과정이 Sweep이다.