97 lines
3.3 KiB
Markdown
97 lines
3.3 KiB
Markdown
# 자바스크립트의 변수와 상수
|
|
자바스크립트에서 **변수(variable)**와 **상수(constant)**는 데이터를 저장하고 다루는 핵심 개념입니다. 이 둘을 제대로 이해하는 것은 자바스크립트 프로그래밍의 기초를 닦는 데 필수적입니다.
|
|
|
|
## 변수
|
|
변수는 데이터를 저장할 수 있는 이름 붙은 컨테이너입니다. 이를 통해 프로그래머는 프로그램 실행 중 데이터를 동적으로 변경하거나 활용할 수 있습니다.
|
|
자바스크립트에서는 변수를 선언하기 위해 `var`, `let`, `const` 키워드를 사용합니다.
|
|
|
|
* const: 값을 변경할 필요가 없는 경우, 예를 들어 상수나 불변 데이터를 선언할 때 사용합니다.
|
|
* let: 값이 변할 가능성이 있는 변수에 사용합니다.
|
|
* var: 가능한 사용을 피합니다. (호이스팅과 함수 스코프 문제가 디버깅을 어렵게 만듭니다.)
|
|
|
|
```javascript
|
|
// 상수를 사용해 변하지 않는 값을 저장
|
|
const PI = 3.14159;
|
|
|
|
// 변수를 사용해 변하는 값 저장
|
|
let radius = 5;
|
|
|
|
// 원의 면적 계산
|
|
let area = PI * radius * radius;
|
|
console.log(`원의 면적은 ${area}입니다.`);
|
|
|
|
// 반지름을 변경
|
|
radius = 7;
|
|
area = PI * radius * radius;
|
|
console.log(`반지름이 바뀐 후 면적은 ${area}입니다.`);
|
|
```
|
|
|
|
## var
|
|
var는 ES6 이전부터 사용되던 변수 선언 키워드입니다.
|
|
* 함수 스코프를 가집니다. 즉, 변수는 함수 내부에서만 유효하며 블록({})을 무시합니다.
|
|
* 선언 전에 사용할 수 있지만, 이는 **호이스팅(hoisting)**에 의해 `undefined`로 초기화됩니다.
|
|
|
|
```javascript
|
|
console.log(x); // undefined
|
|
var x = 10;
|
|
console.log(x); // 10
|
|
```
|
|
|
|
## let
|
|
let은 ES6에서 도입된 변수 선언 방식으로, 기존 `var`의 단점을 보완했습니다.
|
|
|
|
* 블록 스코프를 가집니다. 변수는 선언된 블록({}) 내에서만 유효합니다.
|
|
* 같은 스코프 내에서 동일한 이름의 변수를 중복 선언할 수 없습니다.
|
|
* 선언 전에 접근하려 하면 **참조 에러(ReferenceError)**가 발생합니다.
|
|
|
|
```javascript
|
|
{
|
|
let y = 20;
|
|
console.log(y); // 20
|
|
}
|
|
// console.log(y); // ReferenceError
|
|
```
|
|
|
|
## const
|
|
const는 **상수(constant)**를 선언할 때 사용합니다.
|
|
|
|
* 선언 이후 값을 변경할 수 없습니다. 하지만 객체나 배열은 내부 데이터를 수정할 수 있습니다.
|
|
* 블록 스코프를 가집니다.
|
|
* 선언과 동시에 초기화를 해야 합니다.
|
|
|
|
```javascript
|
|
const z = 30;
|
|
console.log(z); // 30
|
|
// z = 40; // TypeError: Assignment to constant variable
|
|
|
|
const obj = { a: 1 };
|
|
obj.a = 2; // 객체의 속성은 변경 가능
|
|
console.log(obj); // { a: 2 }
|
|
```
|
|
|
|
## 호이스팅(Hoisting)
|
|
|
|
* var로 선언된 변수는 선언이 코드의 최상단으로 끌어올려진 것처럼 동작합니다.
|
|
* let과 const는 호이스팅되지만, 초기화가 되지 않아 선언 전에 접근 시 에러가 발생합니다.
|
|
|
|
```javascript
|
|
console.log(a); // undefined
|
|
var a = 10;
|
|
|
|
console.log(b); // ReferenceError
|
|
let b = 20;
|
|
```
|
|
|
|
## 중복 선언 금지
|
|
|
|
let과 const는 동일한 스코프 내에서 동일한 이름의 변수를 선언할 수 없습니다.
|
|
```javascript
|
|
let x = 1;
|
|
let x = 2; // SyntaxError
|
|
```
|
|
|
|
## 선언과 초기화의 타이밍
|
|
|
|
* const는 선언과 동시에 초기화가 필요합니다.
|
|
* let은 선언 후 초기화가 가능합니다.
|