1.1.1 `var` - 자바스크립트에서 처음 만난 정보 저장하기

📘 1.1.1 var - 자바스크립트에서 처음 만난 정보 저장하기

여러분이 이 글을 읽고 있는 지금, 마음 한편으로는 조금 설레기도 하고 조금은 걱정도 되시죠? 새로운 것을 배운다는 건 언제나 그런 마음을 불러일으키는 것 같아요. 저도 처음 자바스크립트를 만났을 때 그랬거든요.

오늘 우리가 함께 들여다볼 것은 var라는 작은 단어예요. 이 단어는 컴퓨터에게 "여기 정보를 담아둘 공간을 하나 만들어줘"라고 부탁하는 방법이에요. 마치 새로운 집에 이사를 가서 짐을 넣을 서랍을 하나씩 만들어가는 것처럼요.

🧠 새로운 단어들과 친해지기

코딩의 세계에는 처음 보는 단어들이 많이 있어요. 하지만 우리가 어릴 때 새로운 한글을 하나씩 배웠던 것처럼, 이것들도 천천히 익숙해질 거예요.

단어	마음으로 이해하기
var	자바스크립트에서 정보를 담을 공간을 만드는 오래된 방법이에요. 할머니가 사용하시던 오래된 찻잔처럼, 오랫동안 사랑받아온 방식이죠.
변수 (variable)	숫자나 글자 같은 여러 가지 정보를 넣어둘 수 있는 공간이에요. 계절에 따라 다른 옷을 넣어두는 옷장처럼, 그때그때 다른 값을 담을 수 있어요.

var라는 단어는 "variable(변수)"라는 영어 단어에서 왔어요. 긴 단어를 줄여서 부르는 건 우리가 "안녕하세요"를 "안녕"이라고 줄여 부르는 것과 같은 마음이겠죠.

✨ var가 뭔지 알아보기

var는 자바스크립트가 세상에 처음 나왔을 때부터 함께해온 오래된 동반자예요. 마치 할아버지의 낡은 연장 같은 존재죠. 지금은 let이나 const라는 더 편리한 도구들이 나왔지만, 여전히 많은 곳에서 var를 만날 수 있어요.

왜 var를 배워야 할까요? 이미 더 좋은 방법들이 있는데도 말이에요. 그건 마치 오래된 집의 구조를 이해해야 새 집의 좋은 점을 더 깊이 알 수 있는 것과 같아요. 인터넷에 있는 수많은 웹사이트들이 아직도 var의 언어로 이야기하고 있거든요.

서랍장을 만드는 이야기

var를 조금 더 마음으로 이해해보기 위해, 작은 이야기를 하나 들려드릴게요.

여러분이 새 학기를 맞아 책상 위 서랍장을 정리한다고 생각해보세요. 각각의 서랍에는 작은 이름표를 붙이고, 그 안에 연필, 지우개, 노트 같은 것들을 넣어두죠. var도 이와 똑같아요.

var로 만든 변수는 컴퓨터 안에 있는 서랍 같은 존재예요. 우리가 원하는 이름을 붙이고, 그 안에 숫자나 글자 같은 소중한 정보를 넣어둘 수 있어요. 그리고 나중에 필요할 때 그 이름을 불러서 안에 있는 것을 꺼내 쓸 수 있죠.

🎯 왜 var를 배워야 할까요?

여러분이 마음속으로 궁금해하실 것 같아요. "더 좋은 방법이 있다면서 왜 옛날 방법을 배워야 하나요?"

첫 번째 이유는 세상의 많은 코드를 이해하기 위해서예요. 우리가 매일 보는 웹사이트들 중에는 아직도 var로 만들어진 것들이 정말 많거든요.

두 번째로는 기초를 단단히 하기 위해서예요. var의 성질들을 알고 나면 자바스크립트가 어떻게 숨 쉬고 움직이는지 더 깊이 이해할 수 있어요.

마지막으로, var의 아쉬운 점들을 경험해보면 let과 const가 얼마나 소중한 개선인지 자연스럽게 깨달을 수 있어요. 마치 불편한 신발을 신어봐야 편한 신발의 고마움을 알 수 있는 것처럼요.

⚙️ var 사용법 배우기

var를 사용해서 변수를 만드는 방법은 놀라울 정도로 간단해요. 이렇게 생겼어요:

var 변수이름 = 넣을값;

실제 예시:
이제 실제로 var를 사용해서 이름, 나이, 그리고 기분을 각각 저장해볼게요.

var name = "철수";
var age = 10;
var isHappy = true;

이렇게 간단한 방법으로 우리가 간직하고 싶은 어떤 정보든 저장해둘 수 있어요. 마음이 좀 편안해지시나요?

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 var가 어떻게 살아 움직이는지 함께 살펴볼게요.

🔹 첫 번째 예시: 변수 만들고 값 넣기

첫 번째로는 var를 사용해서 변수를 만들고, 그 안에 우리가 소중히 여기는 정보를 넣는 가장 기본적인 방법을 배워볼게요.

// 'studentName'이라는 이름의 작은 공간을 var로 만들어요.
var studentName = "민지";

// 'studentAge'라는 나이를 담을 공간을 만들어요.
var studentAge = 11;

// 좋아하는 과목을 저장할 'favoriteSubject' 공간을 만들어요.
var favoriteSubject = "수학";

// console.log를 이용해서 각 공간에 뭐가 들어있는지 조용히 확인해 봐요.
console.log(studentName);      // "민지"가 나타나요.
console.log(studentAge);       // 11이 나타나요.
console.log(favoriteSubject);  // "수학"이 나타나요.

이 과정을 차근차근 설명해드릴게요. 먼저 var 키워드로 변수를 만들면서 동시에 그 안에 값을 넣어요. 그다음에 console.log라는 친절한 도구를 사용해서 각 변수에 제대로 값이 자리 잡았는지 확인해봐요.

🔹 두 번째 예시: 같은 이름으로 변수를 또 만들기

var의 특별한 성질 중 하나는 같은 이름으로 변수를 여러 번 만들 수 있다는 거예요. 어떤 일이 일어나는지 함께 지켜봐볼까요?

// 첫 번째 'score' 변수를 만들고 80을 넣어요.
var score = 80;
console.log(score); // 80이 나타나요.

// 어? 또 같은 이름으로 변수를 만들어도 되나요? var는 허용해준답니다!
var score = 95;
console.log(score); // 95가 나타나요. 이전 값은 조용히 사라져버렸어요.

// 이번에는 새로 만들지 말고 그냥 안에 있는 것만 바꿔볼게요.
score = 100;
console.log(score); // 100이 나타나요.

이 예시에서 우리는 var의 독특한 성격을 확인할 수 있어요. 첫 번째 score 변수를 만들고 확인한 다음, 같은 이름으로 변수를 다시 만들어도 에러가 나지 않아요. 마지막에는 새로 만들지 않고 기존 변수의 마음만 바꿔봐요.

🔹 세 번째 예시: 값 바꾸기 연습

한 번 만든 변수의 값을 나중에 바꾸는 것도 물론 가능해요.

// 날씨 변수를 만들고 "맑음"을 넣어요.
var weather = "맑음";
console.log(weather); // "맑음"이 나타나요.

// 날씨가 바뀌었어요! 값을 바꿔볼게요.
weather = "흐림";
console.log(weather); // "흐림"이 나타나요.

// 또 바뀔 수 있어요.
weather = "비";
console.log(weather); // "비"가 나타나요.

이렇게 한 번 만든 변수는 언제든지 새로운 값으로 바꿀 수 있어요. 마치 서랍에 넣어둔 물건을 꺼내고 새로운 물건을 넣는 것처럼 자연스럽게요.

🔄 var 사용하는 순서 정리하기

지금까지 함께 배운 var 사용 과정을 마음으로 정리해볼게요.

첫 번째 단계는 변수 만들기예요. var 변수이름; 이렇게 해서 정보를 담을 소중한 공간을 만드는 거죠. 두 번째 단계는 값 넣기예요. 변수이름 = 넣을값; 이렇게 해서 변수 안에 우리가 간직하고 싶은 정보를 넣는 거예요. 물론 변수를 만들면서 동시에 값을 넣는 것도 가능해요.

세 번째 단계는 값 꺼내 쓰기예요. 코드에서 변수이름을 쓰면 변수 안의 정보를 꺼내서 사용할 수 있어요. 마지막으로 기억해둘 것은 특별한 성질 간직하기예요. var는 같은 이름으로 여러 번 만들 수 있다는 점을 마음에 새겨두세요.

삶에는 때로 같은 일을 반복해야 할 때가 있어요. 하지만 그 반복 속에서도 조금씩 다른 의미를 발견할 수 있는 것처럼, 이런 연습들도 그런 의미가 있어요.

📦 기본 연습문제

배운 내용을 직접 손으로 만져보면서 확실히 익혀볼게요.

연습문제 1: 자기소개 변수 만들기

var를 사용해서 여러분의 이름과 나이를 저장하고 화면에 출력해보세요.

// 여러분의 이름을 저장할 작은 공간을 만들어보세요
var myName = "지수";

// 여러분의 나이를 저장할 공간을 만들어보세요  
var myAge = 12;

// 만든 공간들의 내용을 조용히 확인해보세요
console.log(myName);  // "지수"가 나타나요
console.log(myAge);   // 12가 나타나요

연습문제 2: 좋아하는 것 저장하고 바꾸기

var로 좋아하는 음식을 저장하고, 나중에 다른 음식으로 마음을 바꿔보세요.

// 좋아하는 음식을 저장하세요
var favoriteFood = "피자";
console.log(favoriteFood); // "피자"가 나타나요

// 마음이 바뀌어서 다른 음식으로 바꿔보세요
favoriteFood = "치킨";
console.log(favoriteFood); // "치킨"이 나타나요

연습문제 3: var의 특별한 성질 체험하기

같은 이름으로 var를 두 번 만들어보고 어떤 일이 일어나는지 확인해보세요.

// 첫 번째 color 변수 만들기
var color = "빨강";
console.log(color); // "빨강"이 나타나요

// 같은 이름으로 또 만들어보기 (var의 특별한 성질!)
var color = "파랑";
console.log(color); // "파랑"이 나타나요 (이전 값이 조용히 사라졌어요)

🤔 연습문제

이제 조금 더 생각이 깊어지는 문제들을 풀어보면서 var에 대한 이해를 더욱 단단하게 해봐요.

문제 1: 중복 선언 문제 찾기

이 코드에서 주의깊게 살펴봐야 할 부분이 있다면 무엇이고, 어떻게 하면 더 아름다울까요?

var score = 80;
var score = 90;
console.log(score);

정답: 같은 이름으로 var를 두 번 선언한 것이 주의할 점이에요.

해설: 기술적으로는 에러가 나지 않지만, 이렇게 하면 첫 번째 값(80)이 완전히 사라져버려서 나중에 혼란스러울 수 있어요. 두 번째 줄을 score = 90;으로 바꾸면 첫 번째 변수의 값만 바뀌어서 더 안전해요.

문제 2: 값 예상하기

다음 코드를 실행하면 마지막 console.log는 무엇을 출력할까요?

var number = 5;
number = number + 3;
console.log(number);

정답: 8

해설: 처음에 number에 5를 저장하고, 그 다음에 number의 값(5)에 3을 더한 결과(8)를 다시 number에 저장해요. 그래서 마지막에는 8이 출력돼요.

💡 심화 연습 문제

조금 더 깊이 있게 var를 이해했는지 확인해보는 문제들이에요.

심화문제 1: var의 핵심 특징 정리하기

var의 가장 중요한 특징 2가지를 기억나는 대로 써보세요.

정답: 1) 같은 이름으로 여러 번 선언할 수 있어요, 2) 오래된 방법이라서 요즘에는 let과 const를 더 많이 써요

해설: 이 두 가지가 var의 가장 중요한 특징이에요. 요즘 사용하는 let과 const는 이런 특징들을 개선해서 더 안전하게 만들어졌어요.

심화문제 2: 변수 이름 규칙

좋은 변수 이름의 예시를 3개 만들어보세요.

정답: studentName, myAge, favoriteColor 등

해설: 변수 이름은 의미를 알 수 있게 짓는 것이 좋아요. 영어 단어를 사용하고, 두 개 이상의 단어를 붙일 때는 두 번째 단어의 첫 글자를 대문자로 써요.

🌟 보너스: 특별한 현상 맛보기

var에는 "호이스팅"이라는 신기한 현상이 있어요. 이건 조금 어려운 내용이라서 지금 완전히 이해하지 못해도 괜찮아요. 마치 어른들의 이야기를 어깨너머로 듣는 것처럼, 그냥 이런 게 있구나 정도로만 느껴보세요.

// 아직 myPet이라는 변수를 만들지 않았는데, 먼저 확인해봐요.
console.log(myPet); // 에러가 나는 대신 'undefined'라고 나타나요.

// 이제 myPet 변수를 만들고 애완동물을 넣어봐요.
var myPet = "강아지";

// 다시 한번 확인해봐요.
console.log(myPet); // "강아지"가 정상적으로 나타나요.

이 현상을 "호이스팅"이라고 하는데, 나중에 더 자세히 배우게 될 거예요. 지금은 "아, 이런 신기한 일도 일어나는구나!" 정도로만 마음에 담아두시면 돼요.

✅ 소단원 검토 체크리스트

이 단원에서 함께 나눈 이야기들을 모두 마음으로 이해했는지 확인해볼게요.

체크 항목	확인
var가 무엇인지 따뜻한 말로 설명할 수 있어요	☐
var로 변수를 만드는 기본 방법을 알고 있어요	☐
변수에 값을 넣고 바꾸는 방법을 알아요	☐
var의 중복 선언 특성을 알고 있어요	☐
var를 사용한 간단한 코드를 작성할 수 있어요	☐
왜 요즘에는 let과 const를 더 많이 쓰는지 이해해요	☐

지금까지 var에 대해 함께 알아봤어요. 처음에는 어색할 수도 있지만, 천천히 연습하다 보면 자연스럽게 익숙해질 거예요. 다음 시간에는 var보다 더 안전하고 편리한 let에 대해 배워볼 예정이에요. 오늘도 함께 해주셔서 고마워요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---