자바스크립트 변수 선언과 const let 차이

자바스크립트 변수의 이해

프로그래밍에 있어 변수는 데이터를 저장하고 관리하는 fundamental한 요소입니다. 자바스크립트에서 변수는 고유한 이름을 가진 데이터 저장 공간을 의미하며, 이 공간은 다양한 형태의 정보를 담을 수 있습니다. 데이터는 필요에 따라 언제든지 수정하거나 재사용할 수 있습니다. 이번 글에서는 자바스크립트 변수의 선언 방법과 각 키워드의 특징에 대해 심층적으로 살펴보도록 하겠습니다.

변수 선언 방법

자바스크립트에서 변수를 선언하기 위해서는 var, let, const 세 가지 키워드를 사용합니다. 각 키워드는 변수의 범위와 재할당 가능성에 따라 차이를 보입니다.

var 키워드

var 키워드는 자바스크립트 초기부터 사용된 변수 선언 방식으로, 함수 범위(Function Scope)를 가집니다. 즉, var로 선언된 변수는 그 변수가 속한 함수 내에서만 유효합니다. 함수 외부에서는 접근이 불가능합니다.

• 변수의 중복 선언: 같은 변수를 함수 내에서 다시 선언할 수 있으며, 이 경우 후 선언된 값으로 변수 값이 변경됩니다.
• 호이스팅: 변수 선언은 스코프의 최상단으로 끌어올려지지만 초기화는 호이스팅되지 않아, 선언 이전에 해당 변수에 접근하면 undefined라는 값이 출력됩니다.

let 키워드

let은 ES6에서 새롭게 도입된 변수 선언 방법입니다. 이 키워드는 블록 범위(Block Scope)를 지원하여, 중괄호({ })로 묶인 블록 내에서만 유효한 변수를 생성합니다.

• 재선언 불가: 같은 블록 내에서 동일한 변수를 다시 선언할 수 없습니다.
• 초기화와 호이스팅: 변수 선언이 호이스팅되기는 하지만, 초기화가 이루어지지 않아서 선언 전에 접근하면 ReferenceError가 발생합니다.

const 키워드

또한 ES6에서 도입된 const 키워드는 상수를 선언하는 데 사용되며, 한 번 값이 할당되면 변경할 수 없는 특성을 가지고 있습니다. const로 선언된 변수도 블록 범위를 가지며, 해당 변수가 선언된 블록 내에서만 사용할 수 있습니다.

• 초기화 필수: const 변수를 선언하면 반드시 초기화해야 하며, 초기화 이후 재할당이 불가능합니다.
• 중복 선언 금지: 같은 블록에서 동일한 이름으로 다시 선언할 수 없습니다.

var, let, const의 차이점

이제까지 설명한 세 가지 키워드의 주요 차이점을 정리해 보겠습니다.

• 호이스팅: var는 호이스팅이 발생해 undefined로 초기화되지만, let과 const는 초기화 전 접근할 경우 오류가 발생합니다.
• 스코프: var는 함수 범위를 가지며, let과 const는 블록 범위를 지원합니다.
• 재선언: var는 중복 선언이 가능하지만, let과 const는 선언된 범위 내에서 중복 선언이 불가능합니다.
• 재할당: let는 재할당이 가능하지만, const는 재할당이 불가능한 특성을 지닙니다.

변수 초기화와 할당

변수 선언과 함께 값을 초기화할 수 있으며, 나중에 필요에 따라 재할당도 가능합니다. let과 const는 각각의 특성에 맞춰 적절한 상황에서 사용해야 합니다.

• 예: let age = 30; -> 나중에 age = 31;로 재할당 가능
• 예: const pi = 3.14; -> 재할당 시 오류 발생

변수명 작성 규칙

코드의 가독성을 높이기 위해 변수명을 작성할 때 유의해야 할 점들이 있습니다. 다음은 변수명을 작성할 때 지켜야 할 몇 가지 규칙입니다.

• 의미 있는 이름 사용: 변수명이 해당 변수를 어떻게 사용할 것인지 잘 나타내도록 합니다.
• camelCase 사용: 여러 단어로 구성된 변수명은 camelCase 스타일을 따릅니다.
• 예약어 피하기: 자바스크립트의 예약어는 변수명으로 사용할 수 없습니다.

결론

자바스크립트에서 변수는 중요한 역할을 하며, 데이터를 저장하고 조작하는 데 필수적인 도구입니다. var, let, const의 구분을 통해 효율적이고 안전한 코드를 작성할 수 있도록 최선을 다해야 합니다. 특히, let과 const의 사용은 코드의 가독성을 높이고, 예기치 않은 오류를 방지하는 데 크게 기여할 수 있습니다. 이 글이 여러분의 자바스크립트 이해에 도움이 되길 바랍니다.

자주 묻는 질문과 답변