[2023-10-04] TIL - this, IIFE, 함수 레벨 스코프, 블록 레벨 스코프, 클로저, var와 let과 const, 호이스팅

📝배운 내용

1. this의 결정 시점
2. 즉시 실행 함수에서의 매개변수 지정
3. 함수 레벨 스코프
4. 자체 스코프를 가지지 않은 arrow function
5. bind 사용
6. 클로저는 무엇인가?
7. for와 forEach
8. var, let, scope의 차이
9. 호이스팅

 

💡알게된 점

1. 함수에서 this는 함수가 실행되는 시점에서 결정된다.

  - new 키워드 없이 함수를 실행하면 함수 내부의 this는 window를 가리킨다.

  - new 키워드가 있다면 새로 생긴 객체를 가리킨다.

 

2. 함수의 내부의 변수들은 외부에서 접근할 수 없다.

 

3. 중첩 객체 내부에서의 this는 선언된 위치에서의 객체를 가리킨다.

 

4. 인자를 함수로 받은 함수(setTimeout(function())과 같은) 내부에서 this를 사용하게 되면 함수의 property가 없으므로 에러가 날 수 있다.

- arrow function을 사용하면 내부 this는 현재 함수의 상위의 함수레벨 스코프를 가리키게 된다.

  - 인자로 사용된 함수의 뒤에 bind를 선언하면 해결된다. bind는 함수 내의 this를 특정한 this로 변경된 함수로 만드는 함수다.

  - 클로저를 사용하면 된다.

 

5. IIFE(즉시 실행 함수)의 인자로 값을 넘기면 함수 레벨 스코프에 의해 외부의 간섭을 피할 수 있다.

  - 예를 들어 for문안의 setTimeout함수에서 값을 출력할 때 for문이 끝난 뒤에 setTimeout가 실행되므로 값이 고정되는 것을 피할 수 있음

 

7. for는 내부의 함수를 반복하지만 forEach는 값을 순회하면서 내부의 함수를 각각의 함수로 만들게된다

  - forEach로 보내주는 값은 블록 레벨 스코프 처럼 값이 고유해짐

 

8. var, let, const 차이

  - var는 함수 레벨 스코프, 변수 재할당이 가능

  - let은 블록 레벨 스코프, 변수 재할당이 가능

  - const는 블록 레벨 스코프, 변수 재할당이 불가능

 

9. var로 선언된 변수, 함수는 호이스팅이 일어난다.

 - 실행할 때 function scope 상 맨 위로 var 선언이 끌어올려진다.

 - 함수 선언부 위로 끌어올려지므로 값 할당 전에 호출될 수 있다. -> 예기치못한 버그를 만날 수 있음

 - let과 const의 경우에도 호이스팅은 일어나지만 Temporaty Dead Zone이라는 개념 덕분에 할당되기 전에 호출하면 에러가 난다.

 

10. 클로저란?

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

 - 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

 - 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

 

 

☝중요한 점

1. this의 결정시점은 함수가 실행되는 시점이다.

2. bind의 사용방법과 사용시기

3. arrow Function은 자체 레벨 스코프가 없다.

4. var, let, const 차이 정확히 인지하기

5. 클로저 정의 정확히 인지하기

6. for과 forEach의 차이

 -> forEach는 forEach 구문의 인자로 callback함수를 등록하여, 배열의 각 요소들이 반복될때 callback함수가 호출되며 callback함수에서 배열의 요소와 인덱스,배열에 접근할 수 있다.

  -> 즉 순회하면서 각각의 function으로 내부의 로직이 실행된다.