자바스크립트 함수가 실행되는 과정

자바스크립트 코드의 실행 1

//어떤 코드도 없는 경우

<초기화 하는 것들>
this : window
변수들(Variable Object) : {}
Scope chain : []

• 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트)을 초기화한다.
• 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)을 의미한다.
• this 포인터, 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다.
• this 포인터의 경우, 글로벌 스코프에서는 window를 가리킨다.

자바스크립트 코드의 실행 2

function myFunc() {
	let a = 10
    let b = 20
    function add(first, second) {
    	return first + second
    }
    return add(a, b)
 }

특정 함수가 존재하고 실행되는 경우

this : undefined
변수들 : {
first : 10
second : 20
}
Scope chain : [myFunc, global]

this : undefined(strict mode)
변수들 : {
a : 10
b : 20
add function {...}
}
Scope chain : [global]

this : window
변수들 : {}
Scope chain : []

쌓인 느낌? call stack

• 함수가 실행되면, 함수 스코프에 따라 환경이 만들어진다.
• this, 함수 스코프의 변수들, 그리고 스코프 체인이 형성된다.
• 스코프 체인을 따라 글로벌 환경에 도달한다.

자바스크립트 코드의 실행 3

객체가 있고 객체의 메소드를 호출하는 상황

let o = {
	name: 'Daniel',
    method: function(number) {
    return this.name.repeat(number)
      }
    }
function myFunc() {
	let n = 10
    return o.method(n)
}

myFunc()

• 객체의 메서드의 경우, 메서드 환경의 this는 해당 객체를 가리키게 된다.
• 하지만 this가 가리키는 것은 환경에 따라 변할 수 있다.

+

• 함수를 다른 함수의 인자로 넘기면, 다른 함수 내부에서 그 함수를 호출할 수 있다.
  -함수를 인자로 받아 자유롭게 활용할 수 있다. 인자로 받은 함수는 또한 다른 함수를 인자로 받을 수 있다.
• 함수 안에 함수를 만들면, 그 함수는 외부에서 사용할 수 있다.
  함수 안에 함수를 선언했을 때 그 함수를 외부에서 쓰고 싶다면, 그 함수를 리턴하여 사용할 수 있습니다.
• 함수의 실행이 끝나도 내부 변수를 유지할 수 있다.
  함수 안에서 closure가 만들어지면, 내부 변수가 메모리에 남아 closure에 활용 된다.