TIL 2019.12.12

Scope

• 어떤 변수들에 접근 할 수 있는지 정의 될 수 있는 구역
  • 전역 스코프 (global scope)
    • 전역 변수
  • 지역 스코프 (local scope)
    • 지역 변수
      • 함수 스코프 (function scope)
      • 블록 스코프 (block scope)

함수 선언시 유의 사항

• 함수가 함수 선언식(function declaration)으로 선언되면, 현재 스코프의 최상단으로 호이스팅 됨
  • 아래 두 가지 방법 모두 정상적으로 실행이 됨

sayHello() // 함수가 선언되기 전 실행을 하더라도 정상적으로 작동함
function sayHello () {
  console.log('Hello CSS-Tricks Reader!');
}
////////////////////
function sayHello () {
  console.log('Hello CSS-Tricks Reader!');
}
sayHello(); // 선언 후 실행하는 것이 일반적이나, 나중에 선언을 해도 실행이 되는 문제가 있음

• 함수 표현식(function expression)으로 선언되면, 함수는 현재 스코프의 최상단으로 호이스팅 되지 않음

sayHello() // Error, sayHello is not defined
const sayHello = function () {
  console.log(aFunction)
}

두 방식의 행동이 다르므로, 언제나 함수를 호출하기 전에 선언해놓는 것이 좋다.

Closure

• 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. (MDN)
  - 자신이 생성될 때의 환경을 기억하는 함수
  - 외부 함수의 변수에 접근 할 수 있는 내부 함수
  1. 사이드 이펙트(side effects) 제어하기
  2. private 변수 생성하기

정리

1. 함수 내부에서 변수를 선언할 때, 그 변수는 함수 내부에서만 접근할 수 있다.
   (함수의 스코프 위에 존재하는 변수)
2. 함수 내부에서 함수를 선언할 때, 내부의 함수는 클로저가 된다. 이 클로저는 외부 함수에서 생성된 변수들에 접근 할 수 있는 권한을 가지고 있다.