DOM / Closure (클로저)

DOM

• DOM 이란?

웹 페이지 (HTML 이나 XML) 의 콘텐츠 및 구조 그리고 스타일 요소를 구조화 시켜 표현하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
JS 같은 스크립트 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결 시켜주는 역할을 한다. 

 

• DOM Tree 

문서의 태그 요소들을 추출해서 나무 형태로 재조립한것을 tree 자료구조 라고 한다.
DOM을 트리 자료구조 형태로 만들것을 DOM Tree 라고 한다.

 

Tree 자료구조 예시

 

• DOM 간단설명

D : document , O : object , M : modeling

D 를 JS가 알아들을수 있는 O 형태로 M 한것이 DOM이다.

---

Closure

• Closure 란?

함수와 함수가 선언된 렉시컬 환경(LE) 의 조합을 의미한다.
클로저는 함수가 자신이 선언된 환경(scope) 의 변수들을 기억하고 그 범위 밖에서 실행될때에도
해당 변수에 접근할 수 있는 기능을 제공한다.

 

• 예시

let outVal = 'hi'

function outFunc(){
    let outVal = 'Hello'
    
    function inFunc(){
    console.log(outVal) //'Hello'출력
    }
    return inFunc
}
const close = outFunc()
close()// 'Hello' 출력

여기서 inFunc는 자신이 선언된 outFunc 의 "환경" 에 있는 outVal에 접근할 수 있다.
outFunc 가 실행을 마친 후에도 inFunc는 outVal을 "기억" 하고 있으므로 close 를 호출할때
그 값에 접근할 수 있다.

outFunc => inFunc === 하나의 스코프