실행 컨텍스트
컨텍스트는 문맥이다, 코드의 실행 환경이다
코드실행 → 전역 컨텍스트 생성 (모든 것을 관리하는 환경) → 페이지 종료될 때까지 유지
- 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트 생성
- 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this 생성
- 컨텍스트 생성 후 함수가 실행, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다
- 함수 실행이 마무리되면 해당 컨텍스트는 사라진다, 페이지 종료시 전역 컨텍스트는 사라진다
전역 컨텍스트
전역 컨텍스트가 생성 후 → 변수객체, scope chain, this가 들어온다
전역 컨텍스트는 arguments가 없고, variable은 해당 스코프의 변수들이다
scope chain은 자기 자신인 전역 변수객체이다
this는 따로 설정 되어 있지 않으면 window이다, this는 new를 통해 바꿀 수 있다
기본적으로 this는 window이고 new나 bind같은 상황에 this가 바뀐다
함수 컨텍스트
함수를 호출할 때마다 함수 컨텍스트가 하나씩 생긴다
호이스팅
변수 또는 함수를 선언하고 초기화했을 때 선언 부분이 최상단으로 끌어올려지는 현상
함수 표현식으로 선언한 경우는 에러 발생
클로저
라이브러리를 만들 때 사용한다는 IIFE가 사실 클로저를 활용한 패턴이다
IIFE가 모두 클로저를 가지는 건 아니고, 비공개 변수를 가질 수 있는 환경에 있는 함수가 클로저다
비공개 변수는 클로저 함수 내부에 생성한 변수도 아니고, 매개변수도 아닌 변수를 의미한다
클로저를 말할 때는 스코프, 컨텍스트, 비공개 변수와 함수의 관계를 항상 같이 말해주어야 한다
클로저를 활용하여 비공개 변수를 만들어 활용할 수 있다
var counter = function() {
var count = 0;
function changeCount(number) {
count += number;
}
return {
increase: function() {
changeCount(1);
},
decrease: function() {
changeCount(-1);
},
show: function() {
alert(count);
}
}
};
var counterClosure = counter();
counterClosure.increase();
counterClosure.show(); // 1
counterClosure.decrease();
counterClosure.show(); // 0위와 같이 count 변수는 비공개 변수이다
사용자를 통제하기 위해 기본적인 방법으로 클로저를 사용한다
단점으로는 잘못 사용했을 시 성능 문제와 메모리 문제가 발생 한다
클로저 비공개 변수는 자바스크립트에서 언제 메모리 관리를 해야할 지 모르기 때문에 자칫 메모리 낭비로 이어질 수 있다
혹여 프로그램을 만들면서 메모리 문제가 발생하면 클로저를 의심해 보자
또, 스코프 체인을 거슬러 올라가는 행동을 하기 때문에 조금 느리다
- 클로저는 외부함수의 변수에 접근할 수 있는 내부 함수를 일컫는다
- **스코프체인으로 표현되기도 한다
- 크로저는 세가지 스코프 체인을 가진다
→ 클로저 자신에대한 접근
→ 외부 함수의 변수에 대한 접근
→ 전역변수에 대한 접근**
전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용한다
자바스크립트 this 란 ?
this는 window다
bind, call, apply를 사용하여 this는 객체를 가리킨다
new를 붙여서 사용하면 this가 생성자를 통해 생성된 인스턴스가 된다
즉, 함수안에서 그냥 parameter를 this를 붙여서 할당하면 this는 window가 된다
하지만 new를 통해 생성자 함수를 만들면 변수이름 그대로 사용할 수 있다
this는 기본적으로 window지만, 객체 메서드, bind, call, apply, new 일 때 this가 바뀐다
이벤트리스너나 기타 라이브러리처럼 this를 내부적으로 바꿀 수도 있으니 항상 this를 확인해야한다
화살표 함수와 this
화살표 함수는 this로 window 대신 상위 함수의 this를 가져온다
