자바스크립트란 프로그래밍 언어 중 하나로 웹 페이지의 동적인 기능을 구현하기 위해 개발되었습니다.
브라우저에서 자바스크립트를 주로 사용하는 이유는 역사적으로 웹 브라우저에서 실행되는 스크립트 언어로 사용되어 왔기 때문입니다.
그럼 이제 기초 문법을 알아보겠습니다.
변수는 숫자나 문자열 등의 값을 담는 상자라고 생각하면 됩니다.
변수를 선언할 때는 var, let, const를 사용합니다.
1. var
var은 ES5에서 도입된 변수 방식입니다.
함수 스코프(Function Scope)
- var로 선언된 변수는 함수 스코프를 가집니다. 즉, 변수가 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없습니다.
- var는 블록(예: if, for 등) 내에서 선언되어도 함수 단위로 유효합니다.
function example() {
var a = 10;
if (true) {
var b = 20;
console.log(a); // 10 (함수 내에서 유효)
console.log(b); // 20 (같은 함수 내에서 유효)
}
console.log(b); // 20 (b는 블록을 넘어 함수 내에서 유효)
}
example();
호이스팅(Hoisting)
- 호이스팅은 변수나 함수 선언이 실행되기 전에 코드의 최상단으로 끌어올려지는 자바스크립트의 동작 방식입니다. var로 선언된 변수는 호이스팅되지만, 초기화는 호이스팅되지 않습니다. 따라서 변수 선언 전에 접근하면 undefined가 출력됩니다.
console.log(a); // undefined (선언만 호이스팅되므로 값은 undefined)
var a = 5;
console.log(a); // 5
블록 스코프를 제대로 지원하지 않기 때문에 정확한 범위 관리가 불가능해 ES6에서 let과 const가 도입되었습니다.
2. let
let은 ES6 (ECMAScript 2015)에서 도입된 변수 방식입니다.
블록 스코프 (Block Scope)
- let으로 선언된 변수는 블록 스코프를 가집니다. 즉, 변수가 선언된 블록 내에서만 유효하며, 해당 블록 외부에서는 접근할 수 없습니다.
- 이는 var와 가장 큰 차이점으로, let은 블록(if, for, while 등) 내에서만 유효합니다.
if (true) {
let x = 10;
console.log(x); // 10 (블록 내에서 유효)
}
console.log(x); // ReferenceError: x is not defined (블록 외부에서는 접근 불가)- 위 코드에서 x는 if 블록 내에서만 유효하므로, 블록 외부에서 console.log(x)를 실행하면 오류가 발생합니다.
변수 재선언 불가 (No Variable Redeclaration)
- let으로 선언한 변수는 같은 범위 내에서 재선언할 수 없습니다.
let a = 10;
let a = 20; // SyntaxError: Identifier 'a' has already been declared- 위 코드에서 a는 이미 선언되었기 때문에, 같은 범위 내에서 다시 선언하려고 하면 문법 오류가 발생합니다.
호이스팅 (Hoisting)
- let도 호이스팅이 발생하지만, var와 달리 선언된 변수는 초기화되지 않은 상태로 호이스팅됩니다. 즉, 변수를 선언하기 전에 접근하면 참조 오류 (ReferenceError)가 발생합니다.
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 5;
console.log(a); // 5- let은 선언은 호이스팅되지만 초기화 전에 접근하면 오류가 발생하는데, 그 이유는 let이 TDZ (Temporal Dead Zone)을 가지기 때문입니다. 즉, let으로 선언된 변수는 초기화가 이루어지기 전까지는 "죽은 영역"에 있어서 변수에 접근할 수 없습니다.
3. const
const는 ES6에서 도입된 변수 선언 방식으로, 상수(변경되지 않는 값)를 선언할 때 사용됩니다. const는 재할당이 불가능한 변수를 선언할 때 사용하지만, 상수라는 이름 때문에 흔히 값이 변경되지 않는 변수를 만들 때 사용됩니다.
블록 스코프 (Block Scope)
- const로 선언된 변수는 let과 마찬가지로 블록 스코프를 가집니다. 즉, 변수는 선언된 블록 내에서만 유효하며, 그 밖의 범위에서는 접근할 수 없습니다.
if (true) {
const x = 10;
console.log(x); // 10 (블록 내에서 유효)
}
console.log(x); // ReferenceError: x is not defined (블록 외부에서는 접근 불가)
재할당 불가 (No Reassignment)
- const로 선언된 변수는 재할당이 불가능합니다. 즉, 값을 변경할 수 없다는 점에서 let과 다릅니다. 그러나 객체나 배열 같은 참조 타입의 값은 그 내부의 값은 변경 가능합니다.
- 원시 타입(예: number, string, boolean)은 재할당이 불가능합니다.
const a = 10;
a = 20; // TypeError: Assignment to constant variable.const person = { name: 'John' };
person.name = 'Doe'; // 가능 (객체 내부 값 변경)
console.log(person); // { name: 'Doe' }
const arr = [1, 2, 3];
arr.push(4); // 가능 (배열에 요소 추가)
console.log(arr); // [1, 2, 3, 4]호이스팅 (Hoisting)
- const도 호이스팅이 발생합니다. 하지만 let과 마찬가지로, 초기화되기 전에는 접근할 수 없습니다. const로 선언된 변수는 선언만 호이스팅되고, 초기화되기 전에는 TDZ(Temporal Dead Zone)에 위치하게 됩니다. 초기화 전에는 접근하면 ReferenceError가 발생합니다.
console.log(a); // ReferenceError: Cannot access 'a' before initialization
const a = 5;
console.log(a); // 5