728x90
변수란?
자바스크립트에서 변수는 데이터를 저장할 수 있는 이름 붙은 공간이다.
변수를 통해 숫자, 문자열, 객체와 같은 값을 저장하고 그 값을 나중에 다시 사용하거나 변경할 수 있다.
즉, 복잡한 로직을 작성할 때 중간 상태를 기억할 수 있다는 소리다.
자바스크립트에서는 이런 변수를 선언하는 방법이 3가지(var, let, const) 존재한다.
왜 3개나 되는지 한번 알아보도록 하겠다.
var
var의 경우 과거에 사용하던 방식이다.
var name = "홍길동";
위와 같은 방식으로 선언한다.
재선언이 가능하며, 재할당이 가능하다.
하지만 아래와 같은 이유로 요즘은 거의 사용하지 않는다.
함수 스코프 -> 블록 {}
을 무시하고 함수 단위로 작동한다.
- 함수 내부에 선언된 함수만 지역변수로 한정한다.
- 함수 밖에서 선언한 vsr 변수는 전역변수로 간주한다.
- 외부에서도 접근이 가능하다.
var 키워드를 생략할 수 있다.
- var 생략을 허용하기 때문에 의도치 않은 변수의 전역화가 이뤄질 수 있다.
중복 선언이 가능하다.
- 의도치않은 변수값을 변경할 수 있다.
변수 호이스팅으로 인해 변수를 선언하기 전에 참조가 가능하다.
- 모든 선언문이 해당 유효범위의 선두로 옮겨진 것처럼 동작하는 특성을 변수 호이스팅이라 한다.
- 즉, 모든 선언이 코드 맨 위로 끌어올려진다는 뜻이다.
let
let age = 25;
age = 30; // 재할당 가능
위와 같은 방식으로 선언한다.
재선언은 불가능하지만, 재할당은 가능하다.
블록 스코프 -> 블록 {}
단위로 지역변수로 처리한다.
호이스팅은 발생하지만, 초기화는 되지 않는다.
- 선언 이전에 참조하려 할 경우 참조 에러가 발생하게 된다.
- 이런식으로 초기화 이전의 구건을 TDZ라 부른다.
let에서의 호이스팅
console.log(num); // 참조 에러(ReferenceError)
let num = 10;
let num
선언은 호이스팅되어 위로 올라왔다.num
을 사용 할 수 있는 시점은 초기화 시점 즉,let num = 10;
부터 사용 가능하다.- 초기화 전까지는 접근하더라도 에러가 발생하는 TDZ 구간이다.
const
const PI = 3.14;
위와 같은 방식으로 선언한다.
재선언과 재할당 모두 다 불가능하다.
때문에, 선언할때 반드시 초기값을 지정해줘야한다.
값이 바뀌면 안 되는 상수, 설정값, 불변 객체와 같은곳에서 주로 사용한다.
블록 스코프 -> 블록 {}
단위로 지역변수로 처리한다.
728x90
'프론트' 카테고리의 다른 글
[HTML5] 웹 스토리지 (Web Storage) (0) | 2025.05.15 |
---|---|
[JavaScript] 이벤트 처리 및 DOM 조작 (0) | 2025.05.13 |
[CSS] 사용자 반응과 인터랙션 효과 구현 (0) | 2025.05.12 |
[CSS] 요소의 위치, 층, 표시 제어하는 방법 (0) | 2025.05.12 |
[CSS] 선택자란? (0) | 2025.05.11 |