호이스팅 (Hoisting)

호이스팅 (Hoisting)

안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "호이스팅 (Hoisting)"에 대해 알아보려고 해요! 🚀

호이스팅은 JavaScript에서 변수와 함수 선언이 어떻게 동작하는지 이해하는 데 도움이 되는 개념입니다. 코드가 실행되기 전에 변수와 함수 선언문이 메모리에 끌어올려지는 특징을 가지고 있어요. 호이스팅을 이해하면 코드를 작성하는 순서와 변수의 스코프를 더 잘 이해할 수 있습니다. 😊

호이스팅의 작동 원리

호이스팅의 작동 원리를 간단하게 설명해볼게요:

1. 선언의 끌어올림: JavaScript 엔진은 코드를 실행하기 전에 변수와 함수 선언문을 찾아서 메모리에 끌어올립니다. 이를 호이스팅이라고 부릅니다.
2. 할당 보류: 변수 선언은 호이스팅되지만, 초기화는 그 위치에 맞게 보류됩니다. 따라서 변수에 접근하면 `undefined`가 할당됩니다.

호이스팅의 예시

다음은 호이스팅을 보여주는 예시입니다:

// 호이스팅 예시 1
console.log(name); // undefined 출력
var name = 'Alice';
console.log(name); // 'Alice' 출력

// 호이스팅 예시 2
console.log(getAge()); // 'Oliver' 출력
function getAge() {
  return 'Oliver';
}

위 예시에서 첫 번째 `console.log`에서 `name` 변수에 접근하면 호이스팅에 의해 변수가 끌어올려져 있지만, 아직 초기화되지 않았으므로 `undefined`가 출력됩니다. 이후 `var name = 'Alice'`으로 변수를 초기화하면 정상적으로 값을 출력할 수 있게 됩니다. 마찬가지로 두 번째 `console.log`에서 `getAge` 함수를 호출하면 호이스팅에 의해 함수가 끌어올려져 있으므로 정상적으로 함수를 호출하여 값을 출력할 수 있게 됩니다. 🙆‍♀️

호이스팅의 주의할 점

호이스팅은 유용한 도구지만 몇 가지 주의할 점이 있어요:

• 초기화 시점의 중요성: 호이스팅은 변수 선언을 끌어올리지만, 초기화는 해당 변수에 도달한 시점에서 진행되므로 초기화 시점을 고려해야 합니다.
• let과 const의 블록 스코프: `var`와는 달리 `let`과 `const`는 블록 스코프를 가지므로 호이스팅되지 않습니다.

결론

호이스팅은 JavaScript에서 변수와 함수 선언이 동작하는 방식을 이해하는 데 도움을 줍니다. 변수와 함수 선언을 먼저 하지 않아도 호이스팅에 의해 코드가 정상적으로 동작하는 이유를 이해하면 더욱 효율적으로 코드를 작성할 수 있습니다. 호이스팅을 잘 활용하여 개발을 할 수 있도록 노력해봐요! 💪😄

 

Apple 2023 맥북 프로 14 M3

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."