자바스크립트 변수 선언과 활용 예제

자바스크립트에서 변수란 무엇인가?

프로그래밍 언어에서 데이터는 변수를 통해 다루어집니다. 자바스크립트에서도 변수라는 개념이 존재하며, 이는 데이터를 저장하는 용기로 비유할 수 있습니다. 개발자는 변수를 통해 다양한 값을 저장하고, 필요할 때 이를 활용하여 안전하고 효율적인 프로그램을 작성할 수 있습니다. 이번 포스팅에서는 자바스크립트에서 변수를 어떻게 선언하고 활용하는지에 대해 설명드리겠습니다.

변수 선언 방법

자바스크립트에서는 변수를 선언할 때 var, let, const라는 세 가지 키워드를 사용할 수 있습니다. 이들 각각은 특정한 특징을 가지고 있으며, 상황에 맞게 적절히 선택하여 사용해야 합니다.

var 키워드의 특징

var는 자바스크립트의 초기 버전에서부터 사용되어 온 변수 선언 방식입니다. 가장 큰 특징은 변수의 재선언이 가능하다는 점입니다. 예를 들어, 아래와 같은 코드를 보겠습니다.

var x = 10;
var x = 20; // 재선언 가능
console.log(x); // 20

위 코드에서 보듯, x라는 변수를 같은 스코프에서 다시 선언할 수 있으며, 이는 의도치 않은 결과를 초래할 수 있습니다.

var의 범위와 호이스팅

var로 선언된 변수는 함수 범위 또는 전역 범위를 가지며, 블록 내부에서 선언하더라도 해당 블록 외부에서도 접근할 수 있는 특성이 있습니다. 예를 들어, 아래 코드와 같은 경우를 살펴보겠습니다:

function example() {
  var x = 10; 
  if (true) {
    var y = 20;
    console.log(x); // 10
  }
  console.log(y); // 20
}
example(); // y는 함수 내부에서 사용 가능

위의 예시와 같이 if 블록 내에서 선언된 y는 여전히 example 함수 내에서 접근할 수 있습니다.

또한, 자바스크립트의 호이스팅 현상에 의해 변수 선언이 스코프의 최상단으로 끌어올려지기 때문에, 선언 전에도 이를 참조할 수 있습니다. 아래와 같은 코드에서 확인할 수 있습니다:

console.log(message); // undefined
var message = "hello world!";

이처럼 var는 다양한 특성을 지니고 있지만, 그로 인한 문제점이 발생할 수 있습니다. 이러한 이유로 ES6에서 새로운 변수 선언 방법이 도입되었습니다.

let과 const 키워드

ES6에서는 let과 const라는 두 가지 새로운 변수가 추가되었습니다. 이들 각각은 var와는 다른 사용법과 특성을 가지고 있습니다.

let의 특성과 사용법

let은 블록 스코프를 가지며, 재선언이 불가능합니다. 아래 예시와 같이 사용될 수 있습니다:

let x = 30;
// let x = 40; // Error: Identifier 'x' has already been declared
x = 40; // 재할당은 가능
console.log(x); // 40

이와 같이 let은 같은 블록 내에서 재선언을 허용하지 않아 코드의 안전성을 높이는 데 기여합니다.

const의 특징

const는 상수를 선언하는 데 사용되며, 선언과 동시에 값을 할당해야 하고, 이후 값을 변경할 수 없습니다. 다음은 const의 예시입니다:

const x = 30;
// x = 40; // Error: Assignment to constant variable.

const와 let 모두 블록 스코프를 가지며, 따라서 범위가 제한된다는 점에서 var와는 다릅니다.

변수 유효 범위

변수의 유효 범위는 해당 변수가 접근할 수 있는 영역을 의미합니다. 자바스크립트에서는 변수가 선언된 위치에 따라 전역 변수와 지역 변수로 나눌 수 있습니다.

전역 변수와 지역 변수

• 전역 변수: 함수 외부에서 선언된 변수로, 프로그램의 어느 곳에서나 접근 가능합니다.
• 지역 변수: 함수 내부에서 선언된 변수로, 해당 함수 내에서만 유효합니다.

예를 들어, 다음과 같은 코드에서는 전역 변수와 지역 변수가 어떻게 작동하는지 확인할 수 있습니다:

var globalVar = "I'm global!";
function example() {
  var localVar = "I'm local!";
  console.log(globalVar); // I'm global!
  console.log(localVar); // I'm local!
}
example();
// console.log(localVar); // Error: localVar is not defined

결론

자바스크립트에서 변수의 선언과 활용은 프로그래밍의 기본입니다. var, let, const 세 가지 키워드를 통해 각각 적합한 상황에 맞게 변수를 선언하고 사용하는 것이 중요합니다. 이러한 변수의 특성을 이해하면 더욱 안전하고 효율적인 코드를 작성할 수 있습니다. 자바스크립트를 학습하면서 변수를 올바르게 활용하여 실력 향상에 도움이 되길 바랍니다.

자주 묻는 질문 FAQ