[TIL] 2023.2.2

 

오늘은 자바스크립트에 집중해서 공부하는 날!

실행컨텍스트, 호이스팅, 클로져, this에 대해서 복습하고 정리했다.

 

---

TDZ란?

• 정답
• 일시적 사각지대로, 선언단계와 할당,초기화 단계 사이를 TDZ(Temporal Dead Zone)이라고 한다.

let,const와 var의 차이는?

• 정답var의 경우는 함수 레벨 스코프로 선언된 변수는 함수 내에서 유효합니다. 따라서, var의 경우에는 전역 변수로 선언되어 값이 변동 될 가능성이 있습니다.var의 경우에는 선언과 초기화가 동시에 일어나 TDZ 구간에서 undefined가 표시됩니다.
• let,const의 경우에는 선언만 호이스팅되고 TDZ구간에서 에러를 반환합니다.
• 또한, 호이스팅에서 차이가 있습니다.
• let,const는 블록 레벨 스코프로 선언된 변수는 코드 블록 내에서만 유효합니다.

스코프란?

• 정답
• 스코프란 변수 이름, 함수 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것

스코프 체인

• 정답
• 식별자를 결정할 때 활용하는 스코프들의 연결리스트

스코프 레벨

• 블록 레벨 스코프
  • 대부분 프로그래밍 언어가 선택하고 있으며, javascript에서는 let,const등이 적용된다.
  • 모든 코드블록(함수,if문,for문, while문, try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
  • 즉, 코드블록 내부에서 선언한 변수는 지역변수이다.
• 함수 레벨 스코프
  • javascript var
  • 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없다.
  • 즉, 함수 내부에서 선언한 변수는 지역 변수이며, 함수 외부에서 선언한 변수는 모두 전역 변수이다.

상위 스코프

• 정적스코프
  • 함수가 정의되는 시점에 결정
  • 렉시컬 스코프! (Javascript)
• 동적스코프
  • 함수가 호출되는 시점에 결정

클로져(closure)?

• 특정 함수의 접근을 막기위해 은닉하거나, 특정 함수에게만 state 변경을 허용하기 위해 사용한다.

• 상위 스코프의 식별자를 참조하고 있고, 본인의 외부 함수보다 더 오래 살아있다면 클로져라고 한다.

This?

• 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.

this 바인딩

• 함수가 호출될 때마다 this가 동적으로 결정되는 것 (this가 xx에 바인딩된다)
• this Binding Rules
  • 단독 호출(In Browser)
    • 비엄격모드 → window
    • 엄격모드 → undefined
  • 단독 호출(In Node)
    • 전역코드 → exports(빈객체{} === module.exports)
    • 함수코드 → global
  • 객체 메서드 호출
    • 암시적 바인딩
    • Object.Function() → this===Object
  • 명시적 바인드
    • bind(),call().apply()
  • new 바인딩
  new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

Arrow Function

• 상위 스코프의 this를 가리킨다.(Lexical this)

Promise

• 자바스크립트 비동기 처리에 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 
  • Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 값을 반환한 상태
  • Rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
  .then을 사용해 promise에 접근하고, .catch를 사용해 에러 처리를 한다.

Async/Await

• async: 해당 함수는 항상 promise를 반환합니다.
• await: promise가 처리될 때까지 대기합니다.

---

 

[baekjoon] 16637 괄호 추가하기 (Javascript)