[TIL] 엘리스 SW 엔지니어 트랙 Day 015

📖 오늘 배운 내용 - 2021.11.12

• 자바스크립트 동작 원리
• 스코프 : 코드가 현재 실행되는 환경, 맥락
• 실행 컨텍스트 : 스코프 체인, this 포인터, variable objects
• 화살표 함수와 일반 함수의 this 차이점
• 클로저
• 나머지 매개변수, Rest Operator
• 전개 연산자, Spread Oprator

 

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

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

 

📝 실행 컨텍스트

[JavaScript] 자바스크립트 실행 컨텍스트

 

📝 this가 가리키는 것

📕 dynamic binding

• 함수가 호출되는 상황은 4가지가 있다.
  • 함수 호출 : 함수를 직접 호출한다. (ex. myFunc())
  • 메서드 호출 : 객체의 메서드를 호출한다. (ex. o.method())
  • 생성자 호출 : 생성자 함수를 호출한다.
  • 간접 호출 : call, apply 등으로 함수를 간접 호출한다.
• 함수는 다양한 상황(환경)에서 호출될 수 있다.
• 함수의 호출 환경에 따라 this는 동적으로 세팅된다.
• 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라 한다.
• bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다.

let o = {
    name: "Daniel",
    f1: () => {
        console.log("[f1] this : ", this);
    },

    f2: function() {
        console.log("[f2] this : ", this);
    },
}

o.f1(); // global
o.f2(); // o

// 콜백으로 넘기면 this는 global을 가리킨다.
setTimeout(o.f1, 10); // global
setTimeout(o.f2, 10); // global

• f1은 화살표 함수로 호출 시 this는 함수가 생성된 환경을 가리키도록 고정된다.
• f2는 일반 함수로 this는 함수를 호출된 환경을 가리키며 this는 동적으로 바뀔 수 있다.
• 최상단 스코프의 실행 컨텍스트는 전역이다.
• setTimeout으로 함수의 실행 환경을 바꾼다.

 

📕 함수의 호출

• 그 외 콜백 함수의 호출이 있다.
• 콜백 함수는 특정 동작 이후 불려지는 함수이다.
• 보통 다른 함수의 인자로 보내지는 함수를 의미한다.

 

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

[JavaScript] 자바스크립트 화살표 함수와 일반 함수의 this

 

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

[JavaScript] 자바스크립트에서 함수는 일급 객체(first-class-object)이다.

 

📝 클로저, Closure

[JavaScript] 자바스크립트 클로저란?

 

📝 나머지 매개변수, Rest Operator

[JavaScript] 자바스크립트 나머지 매개변수란?

 

📝 전개 연산자, Spread Oprator

[JavaScript] 자바스크립트 전개 연산자란?

 

💡 오늘 깨달은 것

• 실행 컨텍스트, 스코프, 클로저 등 자바스크립트에서 어렵고도 중요한 개념들을 배웠다. 그래서 그런지 오늘 하루가 너무 부족했다. 그리고 클로저..... 아직도 이해가 안 간다.....
• 이제 일찍 일어나서 강의를 일찍 듣고 문제를 풀어야겠다. 앞으로 더 어려워질 텐데 강의 듣고 검색하고 이해하고 문제 다시 풀어보고를 반복해서 이해하도록 해보자.
• 화살표 함수로 호출 시 this는 함수가 생성된 환경을 가리키도록 고정된다.
• 일반 함수로 this는 함수를 호출된 환경을 가리키며 this는 동적으로 바뀔 수 있다.
• setTimeout은 함수의 this를 바꿀 수 없다.
  • setTimeout 함수의 인자로 콜백 함수를 보내면 특정 시간 이후에 해당 함수는 실행된다. 특정 객체의 메서드라 하더라도, 실행될 때 함수가 실행되는 환경은 바뀌게 된다. 미리 바인딩 된 this가 없을 경우 this는 함수를 둘러싼 환경을 가리키도록 바뀐다.