🍁변수 선언하기
var, let, const를 JavaScript에서 사용할 수 있다.
var과 let은 변수를 선언할 때, const는 상수(final 변수)를 선언할 때 사용한다.
1. var
var은 BOM때부터 있었고, DOM에 와서도 여전히 지원하며 사용하고 있다.
var변수는 function-scoped이기 때문에 제어문을 영역으로 인식 불가능하다.
var a = 10;
var a = 20;
console.log(a);var변수는 중복 선언이 가능하다. 하지만 의도적으로 안 할 뿐이며, 상수 선언을 할 수 없다.
2. let
let변수는 ES6(ECMAScript 2015) 때 만들어진 변수이다.
let변수는 block-scoped를 가지므로 함수와 제어문에서 사용할 수 있다.
let은 변수를 선언할 때 사용하며, 중복 선언이 불가능하다.
만약 중복 선언을 하면 위와 같이 오류가 발생한다.
let a = 10; //전역 변수
function m1() {
let b = 20; //지역 변수(m1)
}if (a > 0) {
let c = 30; //지역 변수(if)
var d = 40; //전역 변수
}
console.log(c); //c is not defined
console.log(d);let변수는 함수 내에 선언하면 지역 변수가 되므로, var보다 우리가 알고 있는 변수의 사용법에 더 가깝다.
3. const
ES6(ECMAScript 2015) 때 만들어진 변수를 만드는 키워드이다.
const변수는 let변수와 마찬가지로 block-scoped를 가지므로 함수와 제어문에서 사용할 수 있다.
중복 선언이 불가능하며 상수(final 변수) 선언이 가능하다.
const PI = 3.14;
PI = 3.3333;
상수는 수정할 수 없으므로 수정하려고 하면 에러가 발생한다.
🍁Hoisting
호이스팅(Hoisting)에는 변수 호이스팅과 함수 호이스팅이 있다.
일반적으로 호이스팅은 함수 호이스팅을 말하는 것이다.
호이스팅은 자바 스크립트를 실행하기 전에, 코드를 재배치하여 변수/함수 선언문을 해당 스코프의 최상단으로 끌어올린다.
함수 호이스팅
function m1() {
alert('m1');
}
m1();
m2();
function m2() {
alert('m2');
}
코드는 위에서부터 아래로 실행하는데, 위 코드는 함수를 선언하기 전에 호출하기 때문에 말이 안 되는 코드이다.
m1만 호출이 되어야 할 상황이지만, m2도 alert로 호출이 된다. m2가 호출되는 이유는 함수 호이스팅이 발생하여 함수가 있는 코드를 잘라서 최상단으로 붙여 넣었기 때문이다.
개발자 스스로가 이렇게 코드를 작성하는 경우는 거의 없기 때문에 큰 영향을 미치는 것은 아니다. 그래서 호이스팅이라는 존재를 몰라도 아무 문제가 없다.
변수 호이스팅
function m3() {
alert(a);
var a = 10;
}
m3();
not defined variable는 변수가 선언이 되지 않았을 때 발생하고, undefined는 변수는 선언을 했지만 초기화하지 않았을 때 발생한다.
변수 호이스팅 결과
function m3() {
var a;
alert(a);
a = 10;
}
m3();이 코드는 위와 같이 선언문만 위로 올라가고 초기화하는 부분만 아래에 남게 된다.
let변수의 변수 호이스팅
function m3() {
alert(a);
let a = 10; //not defined variable a (X)
}
m3();
let으로 선언한 변수도 변수 호이스팅이 발생하기는 하지만, 명시적으로 에러가 발생한다.
