자바스크립트 - 변수 범위

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 변수 범위의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 저는 여러분의 친절한 안내자가 되겠습니다. 이 개념을 함께 단계별로 탐구해보겠습니다. 그럼 가상의魔杖(키보드)을 잡고, 이제 시작해보겠습니다!

자바스크립트 변수 범위

변수 범위는 변수들이 놀 수 있는遊び场所와 같습니다. 이는 코드에서 어디서 변수가 가시적이고 사용될 수 있는지 결정합니다. 이를 변수의 "가시 범위"라고 생각해보세요. 간단한 예제로 시작해보겠습니다:

let globalVar = "everywhere에 나타날 수 있습니다!";

function sayHello() {
console.log(globalVar);
let localVar = "이 함수 내에서만 보일 수 있습니다!";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // 이 작동합니다
console.log(localVar);   // 이는 오류를 발생시킵니다

이 예제에서 globalVar은 학교에서 인기 많은 아이처럼 - 모두가 알고 이야기할 수 있습니다. 하지만 localVar은 더 이상 조숙하는 아이처럼 - (sayHello 함수) 동안만 나타납니다.

자바스크립트 블록 범위

이제 블록 범위에 대해 이야기해보겠습니다. 자바스크립트에서 블록은 중괄호 {}로 정의됩니다. let과 const로 선언된 변수는 블록 범위를 가지며, 선언된 블록 내에서만 가시적입니다.

if (true) {
let blockScopedVar = "이 블록 내에서만 보일 수 있습니다!";
console.log(blockScopedVar);  // 이 작동합니다
}

console.log(blockScopedVar);  // 이는 오류를 발생시킵니다

블록 범위를 비밀 클럽하우스라고 생각해보세요. 클럽 내부의 cool kids(변수)만 비밀 손인사를 알고 있습니다(변수에 접근할 수 있습니다).

자바스크립트 함수 범위

함수 범위는 변수들의 사적인 방과 같습니다. 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근할 수 있습니다. 예제를 보겠습니다:

function outer() {
let outerVar = "outer 함수 내에 있습니다!";

function inner() {
let innerVar = "inner 함수 내에 있습니다!";
console.log(outerVar);  // 이 작동합니다
console.log(innerVar);  // 이 작동합니다
}

inner();
console.log(outerVar);  // 이 작동합니다
console.log(innerVar);  // 이는 오류를 발생시킵니다
}

outer();

여기서 outerVar은 부모처럼 - 자식의 방(inner 함수)을 들여다볼 수 있지만, 자식의 장난감(innerVar)은 자식의 방에만 남아 있습니다.

자바스크립트 로컬 범위

로컬 범위는 코드의 특정 부분에서만 접근할 수 있는 변수를 의미합니다. 이는 함수(함수 범위)나 블록(블록 범위) 내에서 접근할 수 있습니다. 더 복잡한 예제를 보겠습니다:

let globalVar = "global입니다!";

function outerFunction() {
let outerVar = "outer 함수에서 왔습니다!";

if (true) {
let blockVar = "블록에서 왔습니다!";
var functionVar = "이 함수 내에서 모두에게 보일 수 있습니다!";

console.log(globalVar);    // 작동합니다
console.log(outerVar);     // 작동합니다
console.log(blockVar);     // 작동합니다
console.log(functionVar);  // 작동합니다
}

console.log(globalVar);    // 작동합니다
console.log(outerVar);     // 작동합니다
console.log(functionVar);  // 작동합니다
console.log(blockVar);     // 오류!
}

outerFunction();
console.log(globalVar);    // 작동합니다
console.log(outerVar);     // 오류!
console.log(functionVar);  // 오류!
console.log(blockVar);     // 오류!

이 예제는 큰 가족 모임과 같습니다. globalVar은 모두가 알고 있는 조상입니다. outerVar은 부모로, outerFunction 가족에게 알려져 있습니다. blockVar는 if 블록에서만 나타나는 조숙하는 조카입니다. functionVar는 var로 선언된 것으로, 함수 내의 모든 사람에게 보입니다.

이제 다양한 변수 선언과 그들의 범위를 요약한 표를 보겠습니다:

선언	범위	선언 상승	재할당 가능
var	함수	예	예
let	블록	아니요	예
const	블록	아니요	아니요

var은 옛날 스타일의 cool kid로, 예측할 수 없을 수 있습니다. let과 const는 새로운 kids로, 더 엄격한 규칙을 따릅니다.

변수 범위를 이해하는 것은 자바스크립트에서 매우 중요합니다. 이는 깨끗하고 효율적인 코드를 작성하고, 나쁜 버그를 피하는 데 도움이 됩니다. 항상 적절한 범위에서 변수를 선언하고, 어디서 접근하려고 하는지 신경 쓰세요.

이 강의를 마무리하며, 코드를 잘 정리된 도시로 생각해보세요. 전역 변수는 모두가 방문할 수 있는 공원입니다. 함수 범위는 다층 건물(블록)의 방과 같습니다. 로컬 범위는 각 방(로컬 범위)에 있는 것입니다. 변수를 적절한 "집"에 두면, 조화로운 자바스크립트 도시를 만들 수 있습니다!

계속 연습하고, 곧 변수 범위의 마스터가 될 것입니다. 다음 번에 만날 때까지, 즐거운 코딩을 하세요!

Credits: Image by storyset