Javascript/ECMAScript 2009 (ES5)

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

AGAL 2020. 3. 13. 19:39
반응형

[출처 : 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이다.

 

반응형