2022. 03. 17. 목요일
브라우저(browser)와 JavaScript
웹 브라우저의 정의 : 웹 브라우저(Web Browser, 열람기)는 웹 서버에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용 소프트웨어
초창기 웹 : 웹브라우저, 웹서버로 구성되며 HTML 문서를 주고 받았다.
웹은 HTML, CSS, JavaScript로 구성된다.
- HTML : 정적인 언어로 웹의 구조를 담당한다.
- CSS : 정적인 언어로 웹의 디자인를 담당한다.
- JavaScript : 동적 언어로 웹의 제어를 담당한다.
이해한 것 : 웹은 browser를 통해 우리에게 전달된다. JavaScript는 Web Browser를 제어하여 일을 처리한다.
함수(function)와 스코프(scope)
함수(function) : 자신의 외부 코드가 호출할 수 있는 하위 프로그램
- 명령문의 시퀀스로 구성된다.
- 함수에 값(argument)를 주면, 함수는 값(return)을 반환한다.
- JavaScript에서는 함수는 Function 객체(Object)로 property method를 지닌 first-class 객체이다.
스코프(Scope) : 범위를 의미, 정확히는 현재 실행되는 컨텍스트(Excution context)
실행 컨텍스트(Excution context) : 실행가능한 코드가 실행하는 환경
- c언어에서는 stack 형태로 쌓이는데 이와 마찬가지로 JavaScript에서도 stack형태를 지니고 있다.
- 하위 켄텍스트에서 상위 켄텍스트로 접근할 수 있지만, 상위 컨텍스트에서 하위 켄텍스트로 접근을 불가능하다.
- 하위 켄텍스트에 변수가 없을 경우 상위 켄텍스트에 접근하여 변수를 찾는다. 이 순서는 스코프 체인에 맞추어 실행한다.
구성
- 변수 객체 : Excution context에서 필요한 정보들을 배열 형태로 저장한다. ex) 인수 객체, 사용자 정의 변수 및 객체
- 지역 변수 : 함수 내 정의 변수나 객체. 단, 초기화하지 않기에 undefined된다.
- 스코프 체인 : List형태로 유효범위를 언급한다. 함수 호출이 아닌 함수 정의된 위치에서 상위 컨텍스트의 스코프 체인을 불러온 뒤 현재 실행범위 객체를 헤드에 추가한다.
- this : 이 변수 객체의 this에 바인딩할 객체를 저장.
참조
클로저(closure)
클로저란 ?
: 상위 켄텍스트(context)에서 하위 켄텍스트(context)로 접근은 불가능하다. 이를 해결하기 위한 방식으로 사용하는 것이 클로저(closure)이다.
- 하위 컨텍스트(context)에서 함수 객체(function object)를 반환.
- 이를 상위 켄텍스트(context)에서 변수로 받아 접근한다.
- 이렇게 하면 함수 객체의 스코프 체인(scope chain)은 변수 켄텍스트 -> 하위 켄텍스트 -> 상위 켄텍스트로 이어진다.
- 상위 컨텍스트에서 하위 켄텍스트로 접근한 것처럼 사용할 수 있다.
function greeting() {
let message = 'Hi';
function sayHi() {
console.log(message);
}
return sayHi;
}
let hi = greeting();
hi(); // Hi 출력
-> 실제로 message을 사용하지만 상위 켄텍스트에서 접근할 수는 없기에 클로저를 사용한 모습.
참조