자바스크립트 동작 원리

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

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

어떤 코드가 없어도 자바스크립트 엔진이 위의 세가지 변수를 만들어 초기화함

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

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

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

1. 어떤 코드도 없는 상태처럼 최상위 컨텍스트 생성(글로벌 컨텍스트)
   
   
2. myFunc()가 실행 되었을 때

• 또 다른 실행 컨텍스트가 만들어지고 기존의 컨텍스트는 그대로 존재
• 실행 컨텍스트가 쌓이는 구조는 스택형태
• strict mode는 자바스크립트가 실행될 때 어떤 모드를 정해서 실행되는 것(대충 이런 모드가 있구나 하는 정도만 알고있기)
• Scope chain의 global은 바로 이전의 실행 컨텍스트를 가리켜서 만일 다른 변수를 찾아야 할 경우가 있으면 Scope chain을 따라서 변수를 검색하거나 하는 용도로 활용
• myFunc()함수가 끝나면 위의 컨텍스트는 제거, global scope로 돌아가게 됨

3. add function 호출

정리

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

자바스크립트의 실행 3

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

1. 어떤 코드도 없는 상태처럼 최상위 컨텍스트 생성(글로벌 컨텍스트)
   
   
2. myFunc()의 실행 컨텍스트
   
   
3. myFunc()에서 o.method 호출어떤 객체에 속한 메소드의 경우에는 this가 그 객체를 가리킴(여기서는 o), Scope cahin에 myFunc()가 들어가있어야함
   
   
   정리

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

실행 컨텍스트

실행 컨텍스트

• 실행 컨텍스트 혹은 실행 맥락은 자바스크립트 코드가 실행되는 환경.
• 코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 있다.
• 실행 컨텍스트는 전역에서 시작해 함수가 호출될 때 스택에 쌓이게 된다.

실행 컨텍스트 스택

1. 글로벌 실행 컨텍스트

• 글로벌 실행 컨텍스트를 만들고 그 안에 variable object 안에 변수 a와 함수 f1이 들어가게 됨.
• console은 window 객체 밑에 있는 변수지만 편의상 여기 넣어놨음

2. f1() 호출 했을 때 function execution context가 생성

• 변수 b, print, f2 함수가 f1의 execution context 안에 변수로 들어가있게 됨

3. f2() 함수 실행

• 스코프 체인을 따라서 실행 컨텍스트를 찾고 a와 b의 값을 참조

4. print함수 호출

정리

• 자바스크립트가 실행될 때 전역 실행 컨텍스트(global execution context)가 만들어진다.
• 함수가 실행될 때 함수 실행 컨텍스트가 만들어진다.

this가 가리키는 것

dynamic binding

함수 호출되는 4가지 상황

• 함수 호출 : 함수를 직접 호출
• 메서드 호출 : 객체의 메서드를 호출
• 생성자 호출 : 생성자 함수 호출
• 간접 호출 : call, apply 등으로 함수를 간접 호출
• 그 외 콜백 함수의 호출이 있음
• 콜백 함수는 특정 동작 이후 불려지는 함수
• 보통 다른 함수의 인자로 보내지는 함수를 의미
  
  

  bind는 특정 this변수에 해당되는 어떠한 객체를 메서드에 묶어주는 함수. 여기서는 printName 안에서 this값이 p의 this값을 갖도록 함.(즉 ,this값이 p를 가리킴)

• 함수는 이렇듯 다양한 상황(환경)에서 호출될 수 있다.
• 함수의 호출 환경에 따라 this는 동적으로 세팅된다.
• 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라 한다.
• bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다.

• 화살표 함수의 this와 일반 함수의 this

  

this를 조작하는 경우

화살표 함수와 일반 함수의 this

화살표 함수 vs 일반 함수

• 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
• 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

  

정리

• 화살표 함수의 this는 정해지면 바꿀 수 없다.
• call, bind, apply를 사용해도 바뀌지 않는다.
• setTimeout 등 this가 바뀌는 상황에서 유용하다.

  화살표 함수는 this 값을 바꿀 수 없다.

자바스크립트 Closure

함수는 일급 객체(first-class object)

• 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다.
• 자바스크립트에서 함수는 일급 객체이다.
• 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.

클로저(closure)

• 자바스크립트 클로저는, 함수의 일급 객체 성질을 이용한다.
• 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.
• 함수와 함수가 사용하는 변수들을 저장하는 공간을 클로저라 한다.
  

✔함수를 생성해서 리턴하는 함수를 팩토리 함수라고 함

card1과 card2 에 각각 클로저 할당하게 됨(card2의 title과 content는 card1의 title, content와는 별도의 메모리 공간에 독자적으로 할당)

Ex)

ES6 Rest, Spread Operator

Rest Operator

• 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
• 함수의 인자 중 나머지를 가리킨다.
• 배열의 나머지 인자를 가리킨다.
• 객체의 나머지 필드를 가리킨다.

함수 인자 Rest Operator

객체 Rest Operator

rest가 배열이 아니라 객체

배열 Rest Operator

Spread Operator

• 묶인 배열 혹은 객체를 각각의 필드로 변환한다.(펼치는?)
• 객체는 또 다른 객체로의 spread를 지원한다.
• 배열은 또 다른 배열의 인자, 함수의 인자로의 spread를 지원한다.

객체 Spread Operator

배열 Spread Operator