Hoisting,

Scopes,

and Closures

sat10am - JavaScript Study

@godori

What is a context in JavaScript?

1. Global Execution Context

2. Function Execution Context

Execution Context

Execution

Phase

Creation

Phase

In the Global Creation phase, the JavaScript engine will

 

  1. Create a global object.
  2. Create an object called “this”.
  3. Set up memory space for variables and functions.
  4. Assign variable declarations a default value of “undefined” while placing any function declarations in memory.

Global Creation Phase


var name = 'godori'
var nick = '@dori'

function getUser(){
  	return {
      name: name,
      nick: nick
    }
}

Global Creation Phase

Global Execution Phase

Function Execution Context

Execution

Phase

Creation

Phase

almost same as global

In the Function Creation phase, the JavaScript engine will

  1. Create an arguments
  2. Create an object called “this”.
  3. Set up memory space for variables and functions.
  4. Assign variable declarations a default value of “undefined” while placing any function declarations in memory.

Function Execution Phase

Global Execution Context

vs

 Function Execution Phase

Difference:

 global variable

arguments object

arguments: array-like-object

var name = 'godori'

function getUser(nick){
  	return {
      name: name,
      nick: nick
    }
}

getUser('dori')

Function Execution Phase

Hoisting

  1. Create "global"
  2. Create "this"
  3. Set up memory space
  4. variable defined by "undefined"

Creation Phase 

in global execution context

This is

Hoisting

After Global Creation Phase

var name = 'godori';
var nick = 'dori';

function getUser(){
	return{
      name: name,
      nick: nick
    }
}

The variables defined by "undefined"

In Global Execution Phase

Scope

스코프를 정의할 때, 주로 

"변수가 접근가능한 범위"

Scope == The current context of execution.

MDN:

내가 찾는 변수가 현재의 스코프에 존재하지 않는다면

var name = 'godori'

function printName () {
  console.log(name)
}

printName()

No name

in current scope!

var name = 'godori'

function printName () {
  console.log(name)
}

printName()

상위 스코프로 올라가서 찾는다

올라가다가 global execution context에 도달하면 끝

이를 Scope Chain이라고 하며,

global execution context에도 없을 경우 reference error 발생

Closure

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

MDN 정의

🤔

?

MDN 정의 (English)

A closure is the combination of

a function and the lexical environment

within which that function was declared.

🤔

?

Lexical Scope

"어휘적"

A closure is the combination of

a function and the lexical environment

within which that function was declared.

<함수가 실행되는 환경>을 근거로 판단하는것이 아니라

<함수를 정의한 코드의 문맥>을 근거로 판단한다는 것

Lexical Scope

즉, Lexical Scope는 함수 실행시점이 아닌 함수 정의 시점에 정해진다

inner ( )

outer ( )

inner ( ) 의

Execution Context

함수 안에 함수가 있을 때

내부 함수는 외부 함수의

Execution Context에 대해

변수 접근을 유지할 수 있는 것

이 접근은 외부 함수가

스택에서 제거되어도 유지된다

즉, 클로저란

inner ( )

outer ( )

inner ( )

closure

var count = 0

function makeAdder(x){
  return function inner(y){
    return x + y
  };
}

var addFive = makeAdder(5)
count += addFive(2)

After the Global Creation Phase

var count = 0

function makeAdder(x){
  return function inner(y){
    return x + y
  };
}

var addFive = makeAdder(5)
count += addFive(2)
var count = 0

function makeAdder(x){
  return function inner(y){
    return x + y
  };
}

var addFive = makeAdder(5)
count += addFive(2)

makeAdder( )의

execution Context 였던 환경

var count = 0

function makeAdder(x){
  return function inner(y){
    return x + y
  };
}

var addFive = makeAdder(5)
count += addFive(2)

inner 함수가 실행되면, 일반 스코프의 탐색 법칙에 따라

inner 함수는 outer 함수의

execution context에서 선언되었던 모든 변수에 접근 가능하다.

Scope

Chain

In real console...

Let's Recap!

1. "global" Object

2. "this" Object

3. Memory assign

4. variable "undefined" 

Hoisting

Context

  • Global Execution Context
  • Function Execution Context
  • Creation Phase
  • Execution Phase

Scope Chain

Current Execution Context

Closest Execution Context

...

Global Execution Context

Closure

inner ( )

inner ( )

outer ( )

closure

Hoisting

Thank You!

🔭

Hoisting, Scopes, and Closures

By Eunjeong Ko

Hoisting, Scopes, and Closures

  • 103
Loading comments...

More from Eunjeong Ko