JavaScript 변수(Variable) 사용법: 초보자를 위한 완벽 가이드

변수(Variable) 사용법

JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 이 언어의 기본적인 구성 요소 중 하나는 바로 변수입니다. 변수를 이해하는 것은 JavaScript를 배우는 데 있어 매우 중요합니다. 이 글에서는 JavaScript 변수의 선언, 타입, 이름 규칙, 할당, 범위, 호이스팅, 스코프, 형 변환에 대해 자세히 설명하겠습니다.

변수 선언

JavaScript에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다. 각 키워드는 변수의 특성과 사용 용도에 따라 다릅니다.

1 var

var 키워드는 ES5 이전부터 사용된 변수 선언 방법입니다. var로 선언한 변수는 재선언이 가능하며, 함수 스코프를 가집니다.

var a = 1; // 변수 a 선언 및 초기화
var a = 2; // 변수 a 재선언 가능

2 let

let 키워드는 ES6에서 도입된 변수 선언 방법으로, 블록 스코프를 가집니다. 즉, 중괄호 {}로 묶인 코드 블록 내에서만 유효합니다. let으로 선언한 변수는 재선언이 불가능하지만, 재할당은 가능합니다.

let b = 2; // 변수 b 선언 및 초기화
b = 3; // 변수 b 재할당 가능
// let b = 4; // 오류 발생: 변수 b는 재선언할 수 없음

3 const

const는 상수를 선언할 때 사용합니다. const로 선언한 변수는 재선언과 재할당이 모두 불가능합니다. 따라서, 상수 값을 유지해야 할 때 사용합니다.

const c = 3; // 상수 c 선언 및 초기화
// c = 4; // 오류 발생: 상수 c는 재할당할 수 없음

변수 타입

JavaScript에서 변수는 다양한 타입을 가질 수 있습니다. 주요 타입은 다음과 같습니다.
number: 숫자 타입. 정수와 부동 소수점을 포함합니다.
string: 문자열 타입. 텍스트 데이터를 나타냅니다.
boolean: 참(true) 또는 거짓(false) 값을 가집니다.
null: 값이 없음을 나타내는 타입입니다.
undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
object: 객체 타입. 여러 값을 하나의 단위로 묶을 수 있습니다.
array: 배열 타입. 여러 값을 순서대로 저장할 수 있는 객체입니다.

변수 이름 규칙

변수 이름을 정할 때는 몇 가지 규칙을 따라야 합니다.

변수명은 문자, 숫자, 언더스코어(_), 달러 기호($)로 구성할 수 있습니다.
변수명은 숫자로 시작할 수 없습니다.
변수명은 대소문자를 구분합니다. 즉, myVar와 myvar는 서로 다른 변수입니다.
JavaScript의 예약어(예: this, if, for 등)는 변수명으로 사용할 수 없습니다.

변수 할당

변수에 값을 할당할 때는 할당 연산자 =를 사용합니다. 예를 들어, 다음과 같이 변수를 선언하고 값을 할당할 수 있습니다.

let a = 1; // 변수 a에 1을 할당

변수 재할당

변수에 새로운 값을 할당하는 것을 재할당이라고 합니다. let과 var로 선언한 변수는 재할당이 가능합니다.

let a = 1; // 변수 a에 1을 할당
a = 2; // 변수 a에 2를 재할당

변수 참조

변수에 할당된 값을 참조하는 것은 매우 간단합니다. 변수명을 사용하여 해당 값을 가져올 수 있습니다.

let a = 1; // 전역 변수 a

function test() {
    console.log(a); // 1 출력: 전역 변수 a에 접근
}

변수 범위

변수의 범위(Scope)는 변수가 유효한 범위를 나타냅니다. JavaScript에서는 전역 변수와 지역 변수가 있습니다.

1 전역 변수

전역 변수는 코드의 어디에서나 접근할 수 있는 변수입니다. 예를 들어:

let a = 1; // 변수 a에 1을 할당
let b = a; // 변수 b에 변수 a의 값을 할당
console.log(b); // 1 출력

2 지역 변수

지역 변수는 함수 내에서만 유효한 변수입니다. 함수 외부에서는 접근할 수 없습니다.

function test() {
    let b = 2; // 지역 변수 b
    console.log(b); // 2 출력
}

test();
console.log(b); // 오류 발생: b는 지역 변수이기 때문에 접근할 수 없음

변수 호이스팅

변수 호이스팅(Hoisting)은 변수를 선언하기 전에 참조할 수 있는 현상입니다. var로 선언한 변수는 호이스팅이 발생하여, 선언 부분이 코드의 최상단으로 끌어올려집니다.

console.log(a); // undefined 출력
var a = 1; // 변수 a 선언 및 초기화

위 코드에서 console.log(a)는 undefined를 출력합니다. 이는 var a의 선언이 호이스팅 되어 최상단으로 끌어올려지기 때문입니다.

변수 스코프

변수 스코프는 변수의 유효 범위를 나타냅니다. let과 const로 선언한 변수는 블록 스코프를 가지며, 해당 블록 내에서만 유효합니다.

let a = 1; // 전역 변수 a

function test() {
    let b = 2; // 지역 변수 b
    console.log(a); // 1 출력: 전역 변수 a에 접근
    console.log(b); // 2 출력: 지역 변수 b에 접근
}

test();
console.log(a); // 1 출력: 전역 변수 a에 접근
// console.log(b); // 오류 발생: b는 지역 변수이기 때문에 접근할 수 없음

변수 형 변환

JavaScript에서는 변수의 타입을 다른 타입으로 변환할 수 있습니다. 주요 형 변환 방법은 다음과 같습니다.

1 숫자로 변환

문자열을 숫자로 변환할 때는 Number() 함수를 사용할 수 있습니다.

const a = '1';
const b = '2';

console.log(a + b); // 12 출력: 문자열 결합
console.log(Number(a) + Number(b)); // 3 출력: 숫자 덧셈

2 문자열로 변환

숫자를 문자열로 변환할 때는 String() 함수를 사용할 수 있습니다.

const a = 1;
const b = 2;

console.log(a + b); // 3 출력: 숫자 덧셈
console.log(String(a) + String(b)); // 12 출력: 문자열 결합

3 불리언으로 변환

비교 연산의 결과를 불리언으로 변환할 때는 Boolean() 함수를 사용할 수 있습니다.

const a = 1;
const b = 2;

console.log(a === b); // false 출력: a와 b가 같지 않음
console.log(Boolean(a === b)); // false 출력: 불리언으로 변환

결론

JavaScript에서 변수를 이해하는 것은 프로그래밍의 기초를 다지는 데 매우 중요합니다. 변수의 선언, 타입, 이름 규칙, 할당, 범위, 호이스팅, 스코프, 형 변환에 대한 이해는 JavaScript를 효과적으로 사용하는 데 필수적입니다. 이 글을 통해 JavaScript 변수에 대한 기본 개념을 확립하고, 실제 코드 작성에 적용해 보시기 바랍니다. JavaScript의 매력을 느끼고, 더 나아가 웹 개발의 세계로 나아가길 바랍니다