[KDT]FCFE - 3주4일 메모리 관점의 js, js DOM 이해하고 사용하기

Keunyeong Lee·2021년 12월 9일
0
post-thumbnail

메모리 관점의 js

수업 주제

  • 메모리 관점의 js

  • js DOM 이해하고 사용하기

메모리 동작을 보면서 이해하기

메모리 동작을 볼 수 있는 툴 페이지!

파이썬 튜터

여러가지 언어의 메모리 동작을 볼 수 있다.

언어 특징

js : 인터프리터 언어, 타입 구분없이 할당

c : 컴파일 언어, 타입에 따라 메모리 지정

js는 모든것을 객체로 관리한다.

함수 생성

FD( Function Declaration ) 함수 선언식

FE( Function Expression ) 함수 표현식

함수 호이스팅

js의 함수는 객체다.

FD(선언형) 방식으로 함수 생성

foo()
function foo() { console.log(1+1); };

선언된 함수는 이미 객체로 존재하고 위로 끌어올려져 사용되는것 처럼 보인다.

js 배열

js의 배열은 hash로 되어있다.

각 배열의 위치를 객체로 관리.

var / let, const

global 코드 평가 시점에

  • var는 전역(global)에
    (object context record)

  • let,const 는 쓰이고있는 부분(local) 영역에 사용되는 메모리 할당이 일어난다.
    (declative context record)

js

메모리의 준비와 실행!

코드영역

스택영역

한개를 쓰면 싱글 쓰레드!

데이터영역

heap 영역

블록 스코프

if(true) { let a = 10; console.log(a); }

let, const 는 블록 레벨 스코프 이다.

let, const 는 블록 스코프에 생성된다.

즉, block context record 의 declative context record 에 생성된다.

global context record 에 생성되지 않기 때문에 block 영역에만 한정되어 적용된다.

TDZ 이해

let a = 100;

if(a < 200){
	console.log( a );
    let a = 10; // reference Error.
}

a 는 이미 식별자 할당이 일어났기 때문에 reference error 가 발생한다.

이런 상태를 a 가 TDZ 에 있다고 한다.

profile
🏃🏽 동적인 개발자

0개의 댓글