안녕하세요 오늘은 많은 분들이 헷갈려 하는 자바스크립트의 스코프와 호이스팅에 대해 설명해보려고 합니다.자바스크립트만의 핵심 개념인 만큼 정확하게 알아두는 것이 중요하겠죠. 그럼 시작하도록 하겠습니다.
자바스크립트의 핵심 개념 이해하기
자바스크립트에서 스코프와 호이스팅은 프로그래밍 시 반드시 이해해야 할 중요한 개념들입니다. 이들은 변수와 함수의 가시성, 생명주기, 그리고 접근성을 결정짓는 역할을 하며, 코드의 흐름과 오류를 이해하는 데 큰 도움을 줍니다.
스코프(Scope): 변수의 접근성 정의
스코프는 코드 내에서 변수와 함수가 접근 가능한 범위를 의미합니다. 자바스크립트에는 주로 글로벌 스코프와 로컬 스코프(함수 스코프 및 블록 스코프)가 있습니다.
글로벌 스코프(Global Scope)
글로벌 스코프에 선언된 변수는 어디서든 접근할 수 있습니다.
var globalVar = "전역 변수";
function checkScope() {
console.log(globalVar); // "전역 변수"
}
checkScope();로컬 스코프(Local Scope)
함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다. 이를 함수 스코프라고 합니다. ES6 이후 let과 const를 사용하면 블록 스코프를 가집니다.
function checkLocalScope() {
var localVar = "지역 변수";
console.log(localVar); // "지역 변수"
}
checkLocalScope();
console.log(localVar); // 오류: localVar is not defined호이스팅(Hoisting): 선언의 끌어올림
호이스팅은 자바스크립트에서 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 이는 선언된 위치와 관계없이 코드의 시작 부분에서 선언이 이루어진 것처럼 행동합니다.
변수 호이스팅
var로 선언된 변수는 호이스팅되어 undefined로 초기화됩니다. 반면, let과 const는 호이스팅되지만 초기화되지 않습니다.
console.log(hoistedVar); // undefined
var hoistedVar = "호이스팅된 변수";
console.log(hoistedLet); // 오류: Cannot access 'hoistedLet' before initialization
let hoistedLet = "호이스팅되지 않는 변수";함수 호이스팅
함수 선언도 호이스팅됩니다. 이는 함수를 선언하기 전에 호출할 수 있음을 의미합니다.
hoistedFunction(); // "호이스팅된 함수!"
function hoistedFunction() {
console.log("호이스팅된 함수!");
}스코프 체인과 클로저
스코프 체인은 내부 스코프에서 외부 스코프의 변수에 접근할 수 있게 하는 메커니즘입니다. 클로저는 함수가 선언된 스코프의 변수를 기억하고, 이를 활용하는 기능입니다.
function outerFunction() {
var outerVar = "외부 변수";
function innerFunction() {
console.log(outerVar); // "외부 변수"
}
return
innerFunction;
}
var inner = outerFunction();
inner(); // "외부 변수", 클로저를 통한 접근자바스크립트에서 스코프와 호이스팅을 이해하는 것은 코드의 동작을 예측하고 오류를 방지하는 데 매우 중요합니다. 이러한 개념들을 활용하시면 코드를 더 효율적이고 가독성 높게 작성할 수 있습니다. 감사합니다.
