[JS] 자바스크립트 클로저, 호이스팅

JavaScript 면접 대비

✔️ 자바스크립트 클로저

• 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 클로져는 함수 내부에서 정의된 함수가 외부 함수의 변수에 접근할 수 있는 현상을 나타낸다.
• 클로저를 사용하여 비동기 작업에서 변수의 상태를 보존하거나, 모듈 패턴을 구현하여 private 변수를 만들 수 있다.

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

1. 내부 함수가 외부 함수의 변수에 접근할 수 있습니다: 외부 함수의 변수가 내부 함수에 의해 참조되면, 해당 변수는 클로저에 포함됩니다. 이로써 내부 함수는 외부 함수의 변수를 계속해서 사용할 수 있습니다.
2. 클로저는 외부 함수의 실행 컨텍스트를 기억합니다: 외부 함수가 반환된 이후에도 클로저는 여전히 외부 함수의 변수에 접근할 수 있습니다. 이는 외부 함수의 실행 컨텍스트가 클로저에 의해 유지되기 때문입니다.
3. 클로저는 private 변수를 구현하는 데 사용될 수 있습니다: 클로저를 활용하면 변수를 외부에서 직접 접근할 수 없도록 보호할 수 있습니다. 이를 통해 정보 은닉과 캡슐화를 구현할 수 있습니다.

✔️ 호이스팅

• 호이스팅은 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말한다.
• var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다.
• 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다.
• 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다.

자바스크립트 호이스팅(Hoisting)은 자바스크립트에서 변수 및 함수 선언이 스코프의 상단으로 "끌어올려지는" 동작을 말합니다. 즉, 코드 내에서 변수 및 함수 선언이 실제로 작성된 위치와 상관없이 선언이 스코프의 최상단으로 옮겨지는 것처럼 동작합니다.

호이스팅은 두 가지 주요 요소에 적용됩니다:

1. 변수 호이스팅: 변수 선언(var, let, const)은 해당 스코프의 상단으로 호이스팅됩니다. 이는 변수 선언부가 실제 코드의 위치보다 앞서 실행된다는 의미입니다. 그러나 변수의 할당(초기화) 부분은 호이스팅되지 않으며, 실제 코드 위치에 따라 실행됩니다. 이로 인해 변수를 선언하기 전에 사용하는 경우에도 에러가 발생하지 않습니다. 변수는 undefined로 초기화되며, 할당은 해당 라인에서 이루어집니다.
2. 함수 호이스팅: 함수 선언식(function declaration)은 해당 스코프의 상단으로 호이스팅됩니다. 함수 선언식은 변수 선언과 동일하게 스코프의 최상단으로 올라갑니다. 이는 함수를 선언하기 전에 호출해도 정상적으로 작동한다는 것을 의미합니다.

예를 들어, 다음과 같은 코드를 고려해 봅시다:

console.log(x); // undefined
var x = 5;

foo(); // "Hello!"
function foo() {
  console.log("Hello!");
}

위의 코드는 호이스팅이 적용되는 예입니다. 변수 x와 함수 foo의 선언이 해당 스코프의 최상단으로 올라갑니다. 따라서 console.log(x)는 변수가 선언되었지만 초기화되지 않았으므로 undefined를 출력하고, foo()는 함수가 선언되었으므로 정상적으로 실행되어 "Hello!"를 출력합니다.

호이스팅은 코드를 더욱 이해하기 어렵게 만들 수 있으므로, 변수와 함수를 코드 상단에서 선언하는 것을 권장합니다. 또한, let과 const를 사용하여 변수를 선언하면 블록 스코프 변수를 사용할 수 있고 호이스팅 문제를 피할 수 있습니다.