자바스크립트 실행 과정
환경 객체
this : 실행되는 시점의 환경을 가리킴
변수들 Variable Object : 변수들이 저장되는 변수 객체
Scope Chain : 상위 범위들을 저장해둠
콜스택에 컨텍스들이 생성될 때 마다 쌓이게 된다.
-
어떤 코드도 없을 경우에도 초기화됨
this: window // 브라우저의 최상위 객체
Variable Objects : { }
Scope chain : [ ] // 현재는 최상위 Scope라 아직 연결된 것이 없다.- 코드가 없어도 실행 컨텍스트를 초기화
- Scope는 코드가 현재 실행되는 환경, 맥락을 의미
- this 포인터의 경우, Global Scope에서는 window를 가리킨다.
-
함수 메소드 실행
this : undefined
Variable Object :{ 선언된 변수와 함수 모두 }
Scope chain : [global]- strict mode로 실행 시 this는 undefined가 된다.
- 변수를 찾을 때 현재 변수 객체에 없다면 scope chain을 따라 찾아 나간다.
- 함수가 실행되면 함수 스코프에 따라 환경이 만들어진다.
- 스코프 체인을 따라 글로벌 환경에 도달한다.
-
객체 메소드 실행
let o={
~
method : function(){}
}
function myFunc(){
~
return o.method()
}
myFunc()this: undefined
Variable Object : { 모둔 변수와 함수 }
Scope chain : []
-
myFunc 실행
this: undefined
VO: {~}
Scope chain : [] -
return 실행
this : o
VO :{~}
Scope chain : [myFunc, global]- 객체의 메서드 경우, 해당 메소드 환경 this는 해당 객체를 가리킨다.
- this는 환경에 따라 달라진다.
⚡️ 함수 안에 함수를 만들어 리턴하면 외부에서도 사용이 가능하다.
실행 컨텍스트
- 실행 컨텍스트는 코드가 실행되는 환경
- 코드가 참조하는 변수, 객체, this 등에 대한 레퍼런스가 있다
- 전역에서 시작해 함수가 호출 될 때 스택에 쌓인다.
함수가 종료되면 스택에서 pop된다.
전역 실행 컨텍스트, 함수 실행 컨텍스트
- 자바스크립트가 실행될 때 Global Execution Context가 생성된다.
이게 최상위로 코드 첫 실행 혹은 모든 함수 실행이 종료됐을 때의 상태이다. - 함수가 실행될 때 Function Execution Context가 생성된다.
위와 같이 쌓이게 됨
this?
함수 호출 상황
⚡️ 함수는 생성시 function 객체를 상속 받는다.
1. 함수 직접 호출 myFunc()
2. 객체의 메서드 호출 o.method()
3. 생성자 함수 호출 const p = new Person()
4. 간접 호출 : call, apply 등을 이용 f.call(null)
5. 콜백 함수
특정 동작 이후 불려지는 함수로 주로 다른 함수의 인자로 전달된다.
dynamic binding
function Person(name){
this.name=name
this.printName=function(){}
}
const p = new Person('Daniel'); // 생성자 호출
setTimeout(p.printName.bind(p),1000) // 간접 호출setTimeout으로 간접 호출 된 것은 해당 메서드의 this가 bind를 통해 전해진 p의 this를 갖게 된다.
- 다양한 환경에서 호출될 수 있다. 이 환경에 따라 this는 동적으로 세팅된다. 이것을 동적 바인딩이라고 한다.
bind,apply,call은 this가 가리키는 것을 조작할 수 있다.
객체 내부에서
- 화살표 함수로 호출시 this는 함수가 생성된 환경을 가리킴 // global
- 일반 함수로 호출시 this는 호출된 환경을 가리키며 동적으로 바뀔 수 있다. 객체의 메서드로 호출시 해당 객체가 this로 할당 된다. // 객체
- 콜백으로 넘어가면 this는 global이된다. 함수의 실행환경이 바뀌는 것이다.
화살표 함수 vs 일반 함수
- 화살표 함수의 this
호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
call,bind 등 this 조작함수로 this가 바뀌지 않는다.
호출시의 실행 컨텍스 - 일반 함수의 this
새롭게 생성된 실행 컨텍스트를 가리킨다.
실행시의 컨텍스트
cosnt o = {
method(){
let f1=function(){}
let f2=function(){}
f1() //global
f2() //o
}
}
o.method()- f1은 실행시 새로운 컨텍스트가 생성되는데 바인딩된 컨텍스트가 없으므로 global 이다. strict mode로 호출했다면 undefined였을 것
객체 o 내부에서 method 내에 있는데 이를 외부에서 실행하므로 global이 바인딩 되는 것 - f2는 함수 컨텍스트를 생성하여 this는 부모의 컨텍스트를 가리킨다. o를 가리키게 된다.
클로져 Closure
함수는 일급 객체
first-class object
- 다른 변수처럼 대상을 다룰 수 있음
- 즉, 함수는 자바스크립트에서 일급 객체로 변수 처럼 다룰 수 있음
- 함수를 다른 함수의 인자로 넘길 수 있음
- 익명함수 생성 후 바로 실행할 수 있음
- 중첩 함수를 생성할 수 있음
클로저
- 클로저는 함수의 일급 객체 성질을 이용하는 것
- 생성시 내부에서 사용되는 변수가 외부에 존재하면 그 변수는 함수의 스코프에 저장된다.
- 함수와 사용되는 변수들을 저장한 공간을 클로저라고 한다.
⚡️변수가 어디 들어있을까에 대한 의미
팩토리 함수 : 리턴함수와 해당 변수가 생명을 같이하여 함수가 종료되어도 그 안의 변수는 살아있다.
➿ 클로저 만들기
function 내부에 변수 선언 후 {}로 묶어 return하면
이 function이 할당된 변수 내에서 해당 변수만의 클로저가 생성된다.
함수가 참조하는 변수는 실행 시점에 실행 컨텍스트에 의해 스코프가 결정된다.
- 스코프에 따라 변수에 영향을 받는다.
- 클로저 내부 변수는 각 클로저 마다 다른 것으로 실행시마다 매번 생성된다.
Rest & Spread Operator (ES6)
Rest Operator
- 함수의 인자, 배열, 객체 중 나머지 값을 묶어 한번에 사용하도록 한다.
- 함수 인자, 배열, 객체의 나머지를 가리킴
- 함수 인자
function findMin(...res){}
인자 개수와 상관없이 모두 res에 배열로 묶인다. - 객체
const {age,name,...res} = o;
age,name을 제외하고 나머지 필드는 rest 변수로 할당된다. - 배열
const [head,...tail] = arr;
tail은 arr의 첫번째 원소를 제외한 나머지 값들이 배열로 묶인다.
Spread Operator
- 묶인 배열 혹은 객체를 각각의 필드로 변환한다.
- 객체는 또 다른 객체로 spread를 지원한다.
- 배열은 다른 배열의 인자, 함수의 인자로의 spread를 지원한다.
- 객체
let o={
name:~
age:~
address:~
~
}
let o2 = {...o,name:"TOM"} // name이 tom이 됨
let o2 = { name:"TOM", ...o} // 다시 o와 동일해진다.- 등장 순서에 따라 객체의 필드가 overwrite될 수 있다.
- 배열
Math.min(...o)
min은 인자를 몽땅 받는 거라 배열을 펼쳐줘야한다.
