프로그래밍을 하다 보면 호이스팅(hoisting)과 스코프(scope)라는 개념을 자주 만나게 됩니다. 이 두 가지 개념은 JavaScript에서 특히 중요한데, 호이스팅은 변수와 함수의 선언이 어디에 위치하든지 상관없이 해당 스코프의 최상단으로 끌어올려지는 것을 말하며, 스코프는 변수와 함수가 유효한 범위를 말합니다.

호이스팅

호이스팅은 JavaScript 엔진이 소스 코드를 실행하기 전에 변수와 함수 선언을 메모리에 올리는 과정을 의미합니다. 즉, 변수나 함수를 선언하기 전에 참조할 수 있는 것처럼 동작하는 것입니다.

예를 들어, 다음과 같은 코드가 있다고 가정해봅시다.

console.log(x); // undefined

var x = 5;

이 코드는 변수 x를 선언한 후, console.log를 사용하여 출력하는데, x는 선언 전에 사용되었음에도 불구하고 오류가 발생하지 않고 undefined가 출력됩니다. 이는 호이스팅으로 인해 변수 선언이 최상단으로 올려져서 console.log가 실행되기 전에 x가 이미 메모리에 할당되었기 때문입니다.

함수의 경우에도 호이스팅이 발생합니다. 다음과 같은 코드를 예로 들어보겠습니다.

foo(); // "Hello, world!"

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

위 코드에서 foo 함수를 호출하기 전에 정의되지 않았는데도 불구하고 정상적으로 실행되는 것을 볼 수 있습니다. 이는 함수 선언이 호이스팅되어 최상단으로 올라간 후에 사용될 수 있기 때문입니다.

스코프

스코프는 변수와 함수의 유효 범위를 말합니다. JavaScript에서는 전역 스코프(global scope)와 블록 스코프(block scope), 함수 스코프(function scope), 그리고 렉시컬 스코프(lexical scope) 등 다양한 스코프가 있습니다.

전역 스코프는 스크립트 전체에서 접근할 수 있는 범위를 말하며, 블록 스코프는 중괄호 {}로 감싸진 범위를 의미합니다. 함수 스코프는 함수 내에서 정의된 변수와 함수가 해당 함수 내부에 유효한 범위를 가지는 것을 의미하며, 렉시컬 스코프는 변수가 선언된 위치에 의해 결정되는 것을 말합니다.

스코프는 변수의 유효 범위를 제한하여 변수 이름의 충돌을 방지하고 코드의 가독성을 높이는 역할을 합니다.

결론

호이스팅과 스코프는 JavaScript에서 중요한 개념이며, 이를 이해하고 활용하는 것은 효율적인 프로그래밍을 위해 필요합니다. 호이스팅으로 인해 변수와 함수의 선언이 끌어올려지고, 스코프로 인해 변수와 함수의 유효 범위가 정해지는 것을 이해하면 좀 더 쉽고 명확한 코드를 작성할 수 있을 것입니다.

#JavaScript #호이스팅 #스코프