자바스크립트 - let 선언문: 초보자 가이드

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 현대 자바스크립트에서 가장 중요한 개념 중 하나인 let 선언문에 대해 깊이 탐구해보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 선생님이자 저는 이 여정을 단계별로 안내해드리겠습니다. 여러분의 좋아하는 음료를 마시며 편안하게 앉아, 이 흥미로운 모험을 함께 떠나보겠습니다!

자바스크립트 let 선언문이란?

let 선언문은 자바스크립트에서 변수를 선언하는 방법입니다. 하지만 변수가 무엇인지 궁금하시겠군요? 변수는 정보를 저장하는 컨테이너라고 생각하시면 됩니다. 여러분이 좋아하는 장난감을 저장하는 상자를 사용하는 것처럼, 우리는 프로그램에서 데이터를 저장하기 위해 변수를 사용합니다.

예제를 보겠습니다:

let myName = "Alice";
console.log(myName); // 출력: Alice

이 코드에서 우리는 myName이라는 변수를 선언하고 "Alice" 값을 저장합니다. 그런 다음 console.log()를 사용하여 myName의 값을 표시합니다.

let 키워드는 ES6(ECMAScript 2015)에서 도입되었으며, 이제 자바스크립트에서 변수를 선언하는 데 가장 선호되는 방법입니다. 이는 새로운 아이처럼, 많은 경우에서 오래된 var 키워드를 대체하고 있습니다.

왜 let을 사용할까요?

1. 블록 스코프(곧 다룹니다)
2. 우연적인 재선언을 방지
3. 깨끗하고 예측 가능한 코드 작성을 도와줌

자바스크립트 블록 스코프 vs. 함수 스코프

이제 let의 슈퍼파워 중 하나인 블록 스코프에 대해 이야기해보겠습니다. 이를 이해하기 위해서는 먼저 자바스크립트에서 블록이 무엇인지 알아야 합니다.

블록은 대괄호 {}로 둘러싸인 코드의 부분입니다. 이는 if 문, for 루프, 또는 함수의 본문일 수 있습니다.

블록 스코프(let)와 함수 스코프(var)의 차이를 보기 위해 예제를 보겠습니다:

function scopeExample() {
if (true) {
var functionScoped = "I'm function scoped";
let blockScoped = "I'm block scoped";

console.log(functionScoped); // 출력: I'm function scoped
console.log(blockScoped);    // 출력: I'm block scoped
}

console.log(functionScoped); // 출력: I'm function scoped
console.log(blockScoped);    // 오류: blockScoped는 정의되지 않았습니다
}

scopeExample();

이 예제에서 functionScoped ( var로 선언됨)는 함수 전체에 접근할 수 있으며, if 블록에서 선언된 blockScoped ( let로 선언됨)는 if 블록 내에서만 접근할 수 있습니다.

이러한 let의 행동은 우연적인 변수 누출을 방지하고 코드가 더 예측 가능하고 이해하기 쉽게 만듭니다. 마치 여러분만 알고 있는 비밀의 은신처를 가지는 것처럼!

자바스크립트에서 변수 재선언

let과 var의 또 다른 중요한 차이는 변수 재선언 방식입니다. 예제를 보겠습니다:

var x = 1;
var x = 2; // 이는 허용됨

let y = 1;
let y = 2; // 이는 오류를 발생시킴

console.log(x); // 출력: 2

var의 경우, 같은 변수를 여러 번 선언할 수 있으며 오류가 발생하지 않습니다. 이는 예상치 못한 행동과 버그를 유발할 수 있습니다.

반면에 let은 같은 스코프 내에서 변수를 재선언하지 않도록 합니다. 같은 스코프 내에서 let로 선언된 변수를 다시 선언하려고 하면 자바스크립트가 오류를 발생시킵니다. 이는 잠재적 버그를 빨리 찾아내고 코드가 더 견고하게 만듭니다.

하지만 let으로 선언된 변수에 대해 값을 다시 할당하는 것은 가능합니다:

let z = 1;
console.log(z); // 출력: 1

z = 2;
console.log(z); // 출력: 2

이를 통해 우리는 필요할 때 변수를 업데이트할 수 있으며, 우연적인 재선언을 방지할 수 있습니다.

변수 호이스팅

마지막으로 호이스팅에 대해 이야기해보겠습니다. 호이스팅은 자바스크립트에서 변수와 함수 선언이 컴파일 단계에서 자신의 스코프 상단으로 이동되는 행위입니다.

let과 var의 호이스팅 행동은 다릅니다:

console.log(x); // 출력: undefined
var x = 5;

console.log(y); // 오류: y는 초기화되기 전에 접근할 수 없습니다
let y = 5;

var로 선언된 변수는 호이스팅되고 undefined로 초기화됩니다. 반면에 let로 선언된 변수는 호이스팅되지만 초기화되지 않습니다. 따라서 코드에서 선언 전에 let 변수를 사용하면 오류가 발생합니다.

이러한 let의 행동은 일반적인 버그의 원인을 방지하고 코드가 더 예측 가능하게 만듭니다. 마치 우리가 잘못된 장소에서 걸어가려고 할 때 우리를 잡아주는 안전망처럼!

메서드와 속성

여기서 자바스크립트에서 변수 선언과 관련된 일반적인 메서드와 속성을 요약한 표를 제공합니다:

메서드/속성	설명
let	블록 스코프 변수 선언
const	블록 스코프 상수 선언
var	함수 스코프 또는 전역 스코프 변수 선언
window.variableName	전역 변수에 접근( var를 전역 스코프에서 사용할 때)
Object.freeze()	객체의 속성을 수정할 수 없게 만듦
Object.seal()	객체에 새로운 속성을 추가할 수 없게 만듦

let과 const는 블록 스코프이며, var는 함수 스코프입니다. const는 let과 유사하지만 선언 후 재할당이 불가능합니다.

결론적으로, let 선언문은 현대 자바스크립트에서 깨끗하고 예측 가능한 코드를 작성하는 데 유용한 도구입니다. let을 이해하고 효과적으로 사용하면 여러분은 자바스크립트 개발자로서 큰 발걸음을 내딛는 것입니다. 계속 연습하고 호기심을 유지하며, 행복한 코딩을 하세요!

Credits: Image by storyset