JavaScript - var 키워드

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript의 변수 세계로 흥미로운 여정을 떠납니다. 특히 var 키워드에 대해 집중적으로 배울 것입니다. 여러분의 친절한 이웃 컴퓨터 선생님으로서, 저는 여러분의 프로그래밍 모험을 기초로 삼을 중요한 개념을 안내해 드리겠습니다. 그러니 가상의魔杖(키보드)을 손에 들고, 함께 뛰어들어 보겠습니다!

문법

먼저 기초를 배워보겠습니다. JavaScript에서는 var 키워드를 사용하여 변수를 선언합니다. 변수는 다양한 유형의 정보를 담을 수 있는 마법의 컨테이너라고 생각해 보세요. 다음은 그 创建 방법입니다:

var magicNumber = 42;
var wizardName = "Merlin";
var isWizard = true;

이 예제에서 우리는 세 가지 변수를 생성했습니다:

1. magicNumber는 숫자(42)를 담습니다.
2. wizardName은 문자열("Merlin")을 담습니다.
3. isWizard는 부울 값(true)을 담습니다.

기억하세요, JavaScript는 도움이 되는 어시스턴트처럼 - 당신이 저장하고 있는 데이터 유형을 지정할 필요가 없습니다. 그것을 스스로 파악할 수 있습니다!

JavaScript 변수 범위

이제 좀 더 고급 내용에 대해 이야기해 보겠습니다 - 변수 범위. JavaScript의 마법적인 세계에서, 변수는 다양한 영역에서 존재하는 것으로 알려져 있습니다. 이를 범위라고 합니다.

전역 범위

어떤 함수 밖에서 변수를 선언할 때, 그것은 전역 변수가 됩니다. 이는 호그와트의 대각실에서 무언가를 선언하는 것과 같아 - 모두가 그것을 들을 수 있습니다!

var globalSpell = "Lumos";

function castSpell() {
console.log(globalSpell); // 출력: "Lumos"
}

castSpell();
console.log(globalSpell); // 출력: "Lumos"

함수 범위

함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근할 수 있습니다. 이는 비밀의 주문을 속삭이는 것과 같아 - 함수 내부에 있는 사람들만 그것을 들을 수 있습니다.

function learnSecretSpell() {
var secretSpell = "Alohomora";
console.log(secretSpell); // 출력: "Alohomora"
}

learnSecretSpell();
console.log(secretSpell); // 오류: secretSpell이 정의되지 않았습니다

JavaScript 변수 올리기

이제 JavaScript가 좀 더 복잡해 보이는 행동을 보일 때입니다. 올리기(hoisting)라는 특이한 행동이 있습니다. 상상해 보세요,魁地奇 경기 전에 모든扫帚가 그라운드 위로 떠오릅니다. JavaScript는 var 선언을 그렇게 처리합니다!

console.log(magicWand); // 출력: 정의되지 않음
var magicWand = "Elder Wand";

JavaScript는 선언(하지만 초기화는 아님)을 맨 위로 올립니다. 코드가 다음과 같이 작성된 것처럼 보입니다:

var magicWand;
console.log(magicWand); // 출력: 정의되지 않음
magicWand = "Elder Wand";

'var' 키워드로 정의된 변수의 재선언

일부 엄격한 프로그래밍 언어와 달리, JavaScript는 var를 사용하여 변수를 여러 번 선언하는 데 매우寬容합니다. 이는 반려 새를 여러 번 이름을 바꾸는 것과 같아 - 아무 문제가 되지 않습니다!

var owl = "Hedwig";
console.log(owl); // 출력: "Hedwig"

var owl = "Errol";
console.log(owl); // 출력: "Errol"

단일 문장으로 여러 변수 선언

시간을 절약하고(그리고 손가락이 뻐끔하지 않도록) 여러 변수를 한 번에 선언할 수 있습니다. 이는 한 번의 손짓으로 여러 주문을 내리는 것과 같아!

var spell1 = "Expelliarmus",
spell2 = "Expecto Patronum",
spell3 = "Wingardium Leviosa";

루프에서 'var' 키워드 사용

var 키워드는 루프에서 특히 유용합니다. 마법의 카운터로서, 그것은 여러분의 주문을 추적합니다:

for (var i = 1; i <= 3; i++) {
console.log("주문을 내립니다 " + i);
}
// 출력:
// 주문을 내립니다 1
// 주문을 내립니다 2
// 주문을 내립니다 3

하지만 조심하세요! 루프 변수 i는 루프가 끝난 후에도 여전히 존재합니다. 이는 항상 원하는 결과가 되지 않을 수 있습니다.

구조 분해를 사용한 선언

마지막으로, 구조 분해라는 더 고급 기술을 살펴보겠습니다. 이는 마법의 상자를 한 번에 여러 가지 마법 아이템을 꺼내는 것과 같아:

var [spell, wand, potion] = ["Lumos", "Holly", "Felix Felicis"];
console.log(spell);  // 출력: "Lumos"
console.log(wand);   // 출력: "Holly"
console.log(potion); // 출력: "Felix Felicis"

이는 한 줄의 코드로 배열에서 여러 변수를 할당할 수 있게 합니다. 정말 마법 같죠?

이제 우리가 배운 모든 방법을 편리한 표로 요약해 보겠습니다:

방법	설명	예제
기본 선언	단일 변수 선언	var magicNumber = 42;
전역 범위	어디서나 접근 가능한 변수 선언	var globalSpell = "Lumos";
함수 범위	함수 내부에서만 접근 가능한 변수 선언	function() { var secretSpell = "Alohomora"; }
올리기	변수 선언이 맨 위로 이동	console.log(x); var x = 5;
재선언	동일한 변수를 여러 번 선언	var owl = "Hedwig"; var owl = "Errol";
여러 선언	여러 변수를 한 번에 선언	var spell1 = "Expelliarmus", spell2 = "Expecto Patronum";
루프 선언	for 루프에서 var 사용	for (var i = 0; i < 5; i++) { ... }
구조 분해	배열에서 여러 변수 할당	var [spell, wand] = ["Lumos", "Holly"];

그렇습니다, 젊은 마법사 여러분! 여러분은 JavaScript의 var 키워드에 대한 첫 번째 수업을 마친 것입니다. 마법의 기술을 습득하는 것처럼, JavaScript에 능숙해지는 것도 연습이 필요합니다. 그러니 계속 코딩하고, 실험하고, 가장 중요한 것은 즐겁게 만들어 보세요! 다음 수업까지, 여러분의 코드가 버그가 없고, 변수가 항상 올바르게 선언되기를 바랍니다!

Credits: Image by storyset