[SEB FE 44] 클로저

Heechang Jeong·2023년 3월 3일
0

CODE STATES

목록 보기
14/40
post-thumbnail

✍ 복습 자료

  • 클로저?

    클로저는 함수와 그 함수가 접근할 수 있는 변수의 조합

  • 클로저 예제

const globalVar = '전역 변수';

function outerFn() {
  const outerFnVar = 'outer 함수 내의 변수';
  const innerFn = function() { 
    return 'innerFn은 ' + outerFnVar + '와 ' + globalVar + '에 접근할 수 있습니다.';
  }
	return innerFn;
}
  1. 함수 outerFn과 outerFn에서 접근할 수 있는 globalVar
  2. 함수 innerFn과 innerFn에서 접근할 수 있는 globalVar, outerFnVar

  • 클로저가 중요한 이유?

    클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해지기 때문이다.



📌 오늘의 알파

  • 함수 호이스팅

console.log(square(5));  // `25`

function square(n) {
  return n * n;
}

square 함수가 정의되기 전에 호출되었지만 오류 없이 실행된다. JavaScript 인터프리터가 전체 함수 선언을 현재 스코프의 최상단으로 끌어올려지기 때문에 위의 코드는 다음과 같다.

// 모든 함수 선언이 스코프의 최상단으로 끌어올려집니다.
function square(n) {
  return n * n;
}

console.log(square(5));  // `25`

함수 호이스팅은 함수 선언에만 적용된다. 함수 표현식에선 쓸 수 없다. 그러므로 아래의 코드는 실행되지 않는다.

console.log(square);  // ReferenceError: 초기화 되기 전에는 `square`에 접근할 수 없습니다.

const square = function(n) { 
  return n * n 
};


Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

0개의 댓글