[JavaScript] 클로저, 이벤트 루프, 화살표 함수

회고

개발 공부를 하다가 여러 회사에 면접을 보는 중이다. 그 과정속에서 받았던 질문들을 정리하려 한다.

JS 클로저

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합. (함수=반환된 내부함수)

스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 렉시컬 스코핑(Lexical scoping)라 합니다.

따라서 내부에 선언된 내부함수의 경우 자신이 속한 렉스컬 스코프에 있는 변수 등을 참조할 있습니다. (내부 함수가 외부함수의 변수에 접근 가능하다는 뜻)

자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근 할 수 있는데 이러한 함수를 클로저라고 부른다.

JS 클로저에 활용

클로저는 자신이 생성될 때의 환경을 기억해야 하므로 메모리 차원에서 손해 볼 수 있다.

하지만 js는 강력한 기능으로 자주 사용하는데 클로저가 가장 유용하게 사용되는 상황을 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것이다.

1. 상태유지

자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근 할 수 있는데 이러한 함수를 클로저라고 부른다.

• script 안 에서 toggle 함수에서 box.style.display 에 색 변경시

2. 전역 변수의 사용 억제 + 정보은닉

count 버튼 클릭 시 횟수 올라가는 구조

이벤트 루프에 대한 설명

이벤트 루프는 브라우저 메인 스레드 동작 타이밍을 관리하는 관리자

여기서 메인 스레드란 js 코드 실행이나 브라우저 렌더링을 맡는 등 브라우저의 주된 동작이 수행되는 곳

이벤트 루프의 중요성

1. 브라우저 동작의 대부분이 메인 스레드에서 싱글 스레드로 실행된다. (작업 지연 위험)
2. 메인 스레드는 이벤트 루프에 의해 관리된다. 하나의 작업 오랫동안 사용하면 안되고, 어떤 작업을 우선 처리할까 결정도 중요, 전환 속도를 빠르게 하여 한번에 하나씩 수행하지만 동시에 수행하는 것처럼 동작해야함 → 이러한 관리를 이벤트 루프

브라우저 렌더링 과정에서 js 코드릴 처리할 때 콜 스텍에 올라 동작을 수행하게 되고 Promise나 setTimeout과 같은 비동기 관련 콜벡들이 queue에 등록된다.

• 콜 스텍 모두 처리됐으면 Promise가 가장 높은 우선순위를 가진다.
• 화면에 갱신이 필요하면 이를 이벤트 루프가 판별

task queue에 있는 콜벡을 하나씩 실행, setTimeout과 사용자 이벤트 콜벡 처리

• Promise와는 다르게 task queue는 콜백을 하나 실행하고 이벤트 루프를 놓아주어 다른 동작을 수행할 수 있도록 한다는 뜻.

화살표 함수

• 항상 익명
• this나 super에 대한 바인딩이 없고 , methods로 사용 될 수 없다
• 콜백함수로 사용가능하지만, 생성자로 사용할 수 없다.
• this의 바인딩이 일반 함수처럼 window가 아니라 클로저 처럼 내부 변수 가르킴

  let cat = {
  	sound: "meow",
    	soundPlay: function () {
  		setTimeout(() => {
  			console.log(this.sound);
  		}, 1000);
      }
  }
  
  cat.soundPlay();
  // 1초 후에 ... "meow"