자바스크립트 변수 선언 이해하기

(자바만 공부하다가 자바스크립트도 공부해보려고 하는데 헷갈리는 점이 너무 많아서 .. 아예 정리하면서 처음부터 다시 공부해보기로 결심 !!)

변수는 프로그래밍에서 데이터를 저장하고 관리하는 데 중요한 역할을 합니다. 자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있습니다. 각 키워드는 선언된 변수의 특성과 사용 방식을 결정하며, 적절한 변수를 선택하여 사용하는 것이 중요합니다. 이번 섹션에서는 자바스크립트의 변수 선언 방식과 각 키워드의 차이점에 대해 자세히 알아보겠습니다.

그리고 '호이스팅(Hoisting)' 이라는 개념이 나올텐데, 모르시는 분들을 위해 미리 정의하고 넘어가겠습니다.

 

호이스팅(Hoisting)

•  자바스크립트에서 변수나 함수의 선언이 코드의 실행 컨텍스트 상단으로 끌어올려지는 동작

1. var 키워드

• 특징: var는 ES6(ECMAScript 2015) 이전에 변수를 선언하는 유일한 방법이었습니다. 함수 스코프를 가지며, 재선언과 재할당이 가능합니다.
• 스코프: var로 선언된 변수는 함수 스코프를 가지며, 블록 스코프를 따르지 않습니다. 이는 for나 if 블록 내부에서 선언된 변수가 블록 외부에서도 접근 가능함을 의미합니다.
• 호이스팅(Hoisting): var로 선언된 변수는 선언이 코드의 최상단으로 끌어올려지는 호이스팅이 발생합니다. 하지만 변수의 초기화는 끌어올려지지 않아, 초기화 전에 변수를 사용하면 undefined로 평가됩니다.

console.log(x); // undefined (호이스팅으로 인해 선언은 끌어올려짐)
var x = 10;
console.log(x); // 10

⭐중요 : var는 함수 스코프를 갖기 때문에 블록 스코프 내에서 사용하면 예기치 않은 버그를 유발할 수 있습니다. 가급적 최신 코드에서는 let이나 const를 사용하세요!

2. let 키워드

• 특징: let은 블록 스코프를 가지며, 재선언이 불가능하지만 재할당은 가능합니다. ES6에서 새롭게 추가된 키워드로, 코드의 가독성과 안정성을 높여줍니다.
• 스코프: let으로 선언된 변수는 블록 스코프를 가집니다. 즉, 중괄호 {} 내에서만 접근 가능하며, 블록 외부에서는 접근할 수 없습니다.
• 호이스팅(Hoisting): let 역시 호이스팅되지만, 선언과 초기화가 동시에 이루어지지 않아 선언 전에 접근하면 ReferenceError가 발생합니다.

let y = 5;
if (true) {
    let y = 10; // 블록 스코프 내에서만 유효한 변수
    console.log(y); // 10
}
console.log(y); // 5

⭐중요 : let은 중복 선언이 불가능하며, 블록 스코프를 준수하여 코드의 안정성을 높여줍니다. 재할당이 필요한 변수를 선언할 때 사용합니다.

3. const 키워드

• 특징: const는 블록 스코프를 가지며, 재선언 및 재할당이 불가능한 상수를 선언할 때 사용됩니다. 선언과 동시에 초기화해야 하며, 초기화 이후 값을 변경할 수 없습니다.
• 스코프: const는 블록 스코프를 따르며, 중괄호 {} 내에서만 유효합니다.
• 호이스팅(Hoisting): const 역시 호이스팅되지만, 선언과 초기화가 동시에 이루어지지 않아 선언 전에 접근하면 ReferenceError가 발생합니다.

const z = 15;
z = 20; // TypeError: Assignment to constant variable.

⭐중요 : const는 상수를 선언할 때 사용하며, 선언과 동시에 값을 할당해야 합니다. 재할당이 필요하지 않은 변수, 특히 객체나 배열의 참조를 변경하지 않을 때 사용하세요.

변수 선언 키워드 요약

키워드	스코프	재선언	재할당	호이스팅	사용 권장 시점
var	함수 스코프	가능	가능	선언만 호이스팅	기존 코드와의 호환성을 유지할 때 사용
let	블록 스코프	불가능	가능	선언만 호이스팅	재할당이 필요한 변수 선언 시 사용
const	블록 스코프	불가능	불가능	선언만 호이스팅	상수 값이나 참조를 변경하지 않는 경우

변수 선언 시 고려할 점

• var는 블록 스코프를 따르지 않기 때문에 함수 스코프를 넘어서 접근할 수 있습니다. 가급적 최신 코드에서는 사용을 피하는 것이 좋습니다.
• let과 const는 블록 스코프를 따르며, 더 안전한 코드 작성에 기여합니다. 재할당이 필요할 때는 let을, 불필요할 때는 const를 사용하는 것이 일반적입니다.
• 코드를 읽기 쉽게 하고 예기치 않은 오류를 방지하기 위해, 변수 선언 시에는 항상 스코프와 재할당 가능 여부를 고려해야 합니다.