💡 변수
자바스크립트에서의 변수선언은 var, let, const를 사용한다.
<자바스크립트에서의 변수선언의 단계>
- 선언단계 - 변수이름을 자바스크립트 엔진에 등록
- 초기화단계 - 값을
undefined로 할당해 초기화함
1. var
var를 통해 선언을 하면, 선언단계와 초기화단계가 동시에 진행된다.
console.log(score);
var score;JS코드는 위에서 아래로 실행되므로 console.log(score) 가 실행되고 var score가 실행된다.
하지만 console.log(score)에서는 score라는 변수의 선언이 이루어지지 않았으므로 참조에러가 일어날 것 같지만 발생하지않고 undefined가 출력된다.
그 이유는 변수선언이 소스코드가 순차적으로 실행되는 런타임이 아니라 그 이전단계에서 먼저 실행되기 때문이다. (실행컨텍스트의 변수환경 참고)
이렇게 변수 선언문이 코드의 맨위로 끌어올려진 것처럼 동작하는 것이 바로 호이스팅이다!!!
✅ 값의 할당
변수선언은 코드의 맨위, 즉 런타임이전에 먼저 실행되지만 값의 할당은 런타임에 실행된다.
console.log(score);
score = 80;
var score;
console.log(score);결과 값: undefined, 80
✅ 변수 중복선언 허용
var로 선언한 변수는 중복 선언이 가능하다.
✅ 함수레벨 스코프
var로 선언한 변수는 함수레벨 스코프를 따른다.
즉, 함수 내에서 선언된 변수는 해당 함수 내부에서만 접근 가능하다.
var x = 100; // 전역변수
{
var x = 1; // 전역변수
}
function ex(){
var x = 5; // 지역변수(함수 밖에서 접근 불가)
console.log(x);
}
console.log(x);결과 값: 5, 1
2. let
let를 이용해 변수선언을 하면, 선언단계와 초기화단계가 분리돼 진행된다.
console.log(score);
let score = 10;let으로 선언한 변수는 JS엔진에 의해 선언단계가 먼저 실행되지만,
초기화단계는 변수 선언문에 도달했을 때 실행되므로 참조에러가 난다.
즉, var와 다르게 선언과 동시에 undefined로 초기화되지 않는다.
이때, 변수 선언 라인부터 초기화 라인 사이 구간을 TDZ라고 부른다.
TDZ에 있는 변수 접근하려면 참조 에러가 발생한다.
let,const을 사용한 선언문은 호이스팅이 일어나지 않는 것처럼 작동한다!!!
✅ 변수 중복선언 금지
let으로 선언한 변수는 중복 선언이 불가능하다.
let x = 100;
let x = 101;
console.log(x);결과 값: SyntaxError(에러남)
✅ 블록레벨 스코프
let, const로 선언한 변수는 함수레벨 스코프를 따른다.
{ }로 둘러싸인 코드 블록 내에서 선언된 변수는 해당 블록 내에서만 접근 가능하다.
let x = 100; // 전역변수 x
{
let x = 1; // 지역변수 x(중괄호 밖에서 접근 불가)
let y = 3; // 지역변수 y
}
console.log(x);
console.log(y);결과 값: 100, ReferenceError(에러남)
3. const
상수를 선언하기 위해 사용한다.
✅ const로 선언한 변수는 반드시 선언과 동시에 초기화해야한다.
const x = 100; // 가능
const x; // SyntaxError(에러남)`✅ 상수이므로 재할당이 금지되지만 객체를 할당한 경우 값을 변경할 수 있다.
const x = 100;
x = 1; // TypeError(에러남)
const person = {
name = "코딩덕"
}
const person.name= "코딩베이비"; // 가능