1.1.2 `let` - 더 안전하고 똑똑한 변수 만들기

📘 1.1.2 let - 더 안전하고 똑똑한 변수 만들기

여러분이 지난 시간에 var와 처음 만났을 때의 기억이 아직 남아 있으시죠? 그때 var의 독특한 성질들을 경험하면서, 때로는 우리가 예상하지 못한 일들이 일어나는 것도 보셨어요.

오늘은 그런 var의 아쉬운 점들을 따뜻하게 보완하고, 훨씬 더 안전한 코딩을 할 수 있게 도와주는 새로운 친구 let을 만나볼 거예요. 마치 오래된 자전거에서 새로운 자전거로 바꾸는 것 같은 설렘이 있을 거예요.

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

let을 마음으로 이해하는 데 도움이 되는 몇 가지 새로운 단어들을 부드럽게 풀어서 설명해드릴게요.

단어	마음으로 이해하기
let	2015년에 새로 태어난, 정해진 구역 안에서만 사용할 수 있는 안전한 변수를 만드는 방법이에요.
블록 범위 (Block Scope)	변수가 중괄호 { } 안에서만 살아 숨쉴 수 있는 특별한 규칙이에요. 마치 교실에서만 사용할 수 있는 물건 같아요.
중복 선언 방지 (Redeclaration)	이미 만든 변수와 같은 이름으로 다시 변수를 만들려고 하면 "잠깐요!"라고 말해주는 친절한 기능이에요.

let은 영어로 "허용하다"라는 뜻이에요. 이름처럼, 정해진 규칙 안에서는 자유롭게 값을 바꿀 수 있게 해주지만, var보다 훨씬 더 체계적이고 안전한 울타리를 가지고 있어요.

✨ let이 뭔지 알아보기

let은 자바스크립트가 성장하면서 나타난 현대의 지혜로운 방법이에요. 개발자들이 var를 사용하면서 "아, 이런 부분이 불편하네. 더 좋은 방법이 있을까?"라고 고민한 끝에 탄생한 소중한 결과물이죠.

var와 가장 큰 차이점은 let은 같은 이름으로 변수를 두 번 만드는 것을 허용하지 않아요. 마치 지혜로운 선생님이 "어? 그 이름은 이미 사용했잖아요. 다른 이름을 사용해주세요"라고 부드럽게 알려주는 것 같아요.

또한 let으로 만든 변수는 정해진 구역(블록 범위)에서만 사용할 수 있어요. 마치 우리 교실에 있는 물건은 우리 교실에서만 쓸 수 있는 것처럼 자연스럽게요.

이런 특징들 덕분에 var에 비해 코드가 어떻게 움직일지 훨씬 더 쉽게 예상할 수 있게 되었어요. 개발자는 변수가 어디서 어떻게 사용될지 더 명확하게 알 수 있고, 예상하지 못한 상황도 크게 줄일 수 있어요.

새로운 교실 시스템 이야기

let을 더 깊이 이해해보기 위해 '새로운 교실 시스템' 이야기를 들려드릴게요.

새 학교에서는 각 교실, 체육관, 도서관 등 구역이 아주 명확하게 나뉘어져 있어요. 3학년 1반에서 받은 서랍은 3학년 1반에서만 사용할 수 있고, 4학년 교실에서는 그 서랍을 찾을 수 없는 자연스러운 규칙이 있어요.

그리고 만약 3학년 1반에 '민지의 책가방'이라는 이름의 서랍을 이미 신청했는데, 또 '민지의 책가방' 서랍을 신청하려고 하면 학교 관리 시스템이 "안내: 이미 '민지의 책가방' 서랍이 있어요. 다른 이름을 사용해주세요!"라고 친절하게 알려주어서 혼란을 막아줘요.

이처럼 let은 변수가 있어야 할 곳을 명확히 하고, 같은 이름을 중복으로 사용하는 것을 예방해주어서 코드를 훨씬 더 깔끔하고 안전하게 만들어 줘요.

🎯 왜 let을 사용할까요?

개발자들이 var보다 let을 더 좋아하는 이유가 뭘까요? 여러 소중한 이유들이 있어요.

첫 번째로 코드가 훨씬 더 안전해져요. var의 고질적인 문제였던 "어? 내가 언제 이 변수를 또 만들었지?"라는 상황을 완전히 막아줘요. 마치 신중한 친구가 실수를 미리 막아주는 것 같아요.

두 번째로 변수를 관리하기가 훨씬 쉬워져요. 변수가 어느 구역에서 사용되는지가 명확하기 때문에, 코드를 읽을 때 "이 변수는 여기서만 사용되는구나"라고 자연스럽게 알 수 있어요.

세 번째로 실수를 미리 방지해줘요. 변수를 만들기 전에 사용하려고 하면 명확한 에러를 보여주어서, var의 호이스팅으로 인해 생기던 혼란스러운 상황을 따뜻하게 막아줘요.

마지막으로 let과 const는 이제 자바스크립트의 현대적인 표준이 되어서, 더 좋은 코드 품질과 다른 개발자들과의 협업을 가능하게 해줘요.

⚙️ let 사용법 배우기

let의 기본적인 사용법은 var와 정말 비슷해요. 하지만 움직이는 방식에는 소중한 차이점들이 있어요.

let 변수이름 = 넣을것;

실제 예시:

let name = "지수";
let age = 12;
let isStudent = true;

var와의 주요 차이점들:

가장 중요한 차이점은 중복으로 만들기 방지 부분이에요. let은 같은 이름으로 다시 변수를 만들면 "이미 있어요!"라고 알려주며 에러를 내요.

또한 사용 범위 측면에서도 달라요. let은 함수 전체가 아닌 중괄호 {} 구역만을 따라요.

호이스팅 부분에서도 차이가 있어요. let도 자동으로 위로 올라가긴 하지만, 실제로 변수가 만들어진 곳에 도달하기 전까지는 "아직 사용할 수 없어요!"라고 에러를 내며 보호해줘요.

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 let이 어떻게 살아 움직이는지 함께 지켜봐 볼게요.

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

첫 번째로는 let을 사용해서 변수를 만들고, 그 안에 우리가 소중히 여기는 정보를 넣은 다음, 나중에 다른 정보로 바꾸는 기본적인 과정을 알아볼게요.

// 'studentName' 이라는 변수를 let으로 만들고 이름을 저장해요.
var studentName = "수빈";

// 'classNumber' 라는 변수에 반 번호를 저장해요.
let classNumber = 3;

// 'isPresent' 라는 변수에 출석 여부를 참/거짓 값으로 저장해요.
let isPresent = true;

// console.log를 이용해서 각 변수에 저장된 값을 조용히 확인해요.
console.log(studentName);  // "수빈"이 나타나요.
console.log(classNumber);  // 3이 나타나요.
console.log(isPresent);    // true가 나타나요.

// 변수에 저장된 값은 언제든지 바꿀 수 있어요. (값 바꾸기)
studentName = "민서";
console.log(studentName);  // "민서"로 바뀐 값이 나타나요.

이 과정을 차근차근 들여다보면, 먼저 let 키워드로 여러 변수를 만들고 각각 다른 종류의 정보를 넣어요. 그다음 console.log를 통해서 처음에 넣은 값들이 잘 자리 잡았는지 확인해봐요. 마지막으로 이미 만들어진 변수에 새로운 정보를 넣어서(값 바꾸기) 값이 바뀌는 것을 확인해요. 중요한 점은 let이 값 바꾸기는 허용하지만, 같은 이름으로 새 변수를 또 만드는 것은 허용하지 않는다는 거예요.

🔹 두 번째 예시: let의 중복 방지 기능 확인하기

let이 어떻게 같은 이름 변수 만들기를 막아서 코드를 안전하게 지켜주는지 확인해 볼게요.

// 'score' 변수를 let으로 만들고 85를 넣어요.
let score = 85;
console.log(score); // 85가 나타나요.

// 만약 아래 주석을 지우고 실행하면 에러가 나요.
// let score = 90; // SyntaxError: 'score'라는 이름은 이미 사용 중이에요!

// 새로 만들기는 안 되지만, 값 바꾸기는 가능해요.
score = 90;
console.log(score); // 90이 나타나요.

이 예시를 통해서 let의 안전장치를 확인할 수 있어요.

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

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

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

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

💻 무료로 학습하러 가기

---