// ์ฒซ๋ฒ์งธ ๋ณ์ ์ ์ธ+์ด๊ธฐํ
var a = 10;
console.log(a); // 10
// ๋๋ฒ์งธ ๋ณ์ ์ ์ธ+์ด๊ธฐํ
var a = 20;
console.log(a); // 20
// ์ธ๋ฒ์งธ ๋ณ์ ์ ์ธ(์ด๊ธฐํX)
var a;
console.log(a); // 20
// let ์ค๋ณต ์ ์ธ
let a = 10;
let a = 20; // SyntaxError: Identifier 'a' has already been declared
// const ์ค๋ณต ์ ์ธ
const b = 10;
const b = 20; // SyntaxError: Identifier 'b' has already been declared
var a = 10;
a = 20;
console.log(a); // 20
let b = 111;
b = 222;
console.log(b); // 222
const c = 111;
c = 222; // TypeError: Assignment to constant variable.
์ค์ฝํ๋ ์ ํจํ ์ฐธ์กฐ ๋ฒ์๋ฅผ ๋งํ๋ค.
์๋ฅผ ๋ค์ด, ํจ์ ๋ด๋ถ์์ ์ ์ธ๋ ๋ณ์๋ ํจ์ ๋ด๋ถ์์๋ง ์ฐธ์กฐ๊ฐ ๊ฐ๋ฅํ๋ค. ์ด ๊ฒฝ์ฐ ๋ณ์์ ์ค์ฝํ๋ ํจ์ ๋ด๋ถ๋ก ํ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ var๋ก ์ ์ธํ ๋ณ์์ ์ค์ฝํ์ let, const๋ก ์ ์ธํ ๋ณ์์ ์ค์ฝํ๊ฐ ๋ค๋ฅด๋ค.
var๋ ํจ์ ๋ด๋ถ์ ์ ์ธ๋ ๋ณ์๋ง ์ง์ญ๋ณ์๋ก ํ์ ํ๋ฉฐ, ๋๋จธ์ง๋ ๋ชจ๋ ์ ์ญ๋ณ์๋ก ๊ฐ์ฃผํ๋ค.
function hello(){
var a = 10;
console.log(a);
}
hello(); // 10
console.log(a); //ReferenceError: a is not defined
hello ํจ์ ๋ด๋ถ์์ ์ ์ธ๋ a๋ณ์๋ ํจ์ ๋ด๋ถ์์๋ง ์ฐธ์กฐ๊ฐ ๊ฐ๋ฅํ๊ณ , ์ธ๋ถ์์ ์ฐธ์กฐ์ ์๋ฌ ๋ฐ์
ํ์ง๋ง, ํจ์๋ฅผ ์ ์ธํ ์์ญ์์ var๋ก ์ ์ธํ ๋ณ์๋ ์ ์ญ๋ณ์
๋ก ์ทจ๊ธ
if(true) {
var a = 10;
console.log(a); // 10
}
console.log(a); // 10
์๋ฐ์คํฌ๋ฆฝํธ์์๋ if๋ฌธ, for๋ฌธ, while๋ฌธ, try/catch ๋ฌธ ๋ฑ์ ์ฝ๋ ๋ธ๋ญ{ ... } ๋ด๋ถ์์ var๋ก ์ ์ธ๋ ๋ณ์๋ฅผ ์ ์ญ ๋ณ์๋ก ๊ฐ์ฃผํ๋ค. ๊ทธ๋์ ๋ธ๋ญ ์ธ๋ถ์์๋ ์ด๋์์๋ ์ฐธ์กฐํ ์ ์๋ค. ๊ทธ๋ฌ๋, let๊ณผ const๋ ๋ค๋ฅด๋ค.
if(true) {
let a = 10;
console.log(a); // 10
}
console.log(a); // ReferenceError: a is not defined
if๋ฌธ์ ๋ธ๋ญ ๋ด๋ถ์์ let์ผ๋ก ์ ์ธ๋ ๋ณ์๋ ์ธ๋ถ์์ ์ฐธ์กฐ๋์ง ์์์ ์ ์ ์๋ค. ๋น์ฐํ ํจ์ ๋ด๋ถ์์ ์ ์ธ๋ ๋ณ์๋ ์ธ๋ถ์์ ์ฐธ์กฐํ ์ ์๋ค.
function hello() {
let a = 10;
console.log(a); // 10
}
console.log(a); // ReferenceError: a is not defined
์ ๋ฆฌํ์๋ฉด,
- var๋ ํจ์ ๋ด๋ถ์ ์ ์ธ๋ ๋ณ์๋ง ์ง์ญ ๋ณ์๋ก ์ธ์ ํ๋ ํจ์ ๋ ๋ฒจ ์ค์ฝํ์ด๋ค.
- let, const๋ ๋ธ๋ก ๋ด๋ถ์์ ์ ์ธ๋ ๋ณ์๊น์ง๋ ์ง์ญ๋ณ์๋ก ์ธ์ ํ๋ ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ์ด๋ค.
- ์ฐธ๊ณ ๋ก ๋ธ๋ก์ if๋ฌธ์ด๋ for๋ฌธ ๋ฑ์์ ์ค๊ดํธ{ } ๋ก ๋๋ฌ์ธ์ธ ์ฝ๋ ์์ญ์ ๋งํ๋ค.
์๋ฐ์คํด๋ฆฝํธ๋ ์ฝ๋๋ฅผ ์คํํ๊ธฐ ์ , ์ผ์ข
์ '์ฝ๋ ํ๊ฐ ๊ณผ์ '์ ๊ฑฐ์น๋๋ฐ,
์ด ๋ '๋ณ์ ์ ์ธ๋ฌธ'์ ๋ฏธ๋ฆฌ ์คํ๋๊ธฐ ๋๋ฌธ์ ๋ค์์ ์ ์ธ๋ ๋ณ์๋ ์์ ์ฝ๋์์ ์ฐธ์กฐํ ์ ์๊ฒ ๋๋ค. ์ด๋ฅผ ๋ณ์ ํธ์ด์คํ
์ด๋ผ๊ณ ํ๋ค.
console.log(a); // undefined
var a = 10;
console.log(a); // 10
๋ค์์ ์ ์ธ๋ ๋ณ์ a๊ฐ ์์์ ์ฐธ์กฐ๋์์์๋ ์๋ฌ๋ฅผ ๋ฐ์์ํค์ง ์๋๋ค. ์ฝ๋ ์คํ ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ๋ฏธ๋ฆฌ 1) ๋ณ์๋ฅผ ์ ์ธ, 2) undefined๋ก ์ด๊ธฐํ ํ๊ธฐ ๋๋ฌธ ==> ์ด๊ฒ์ด var๋ก ์ ์ธ๋ ๋ณ์์ ํธ์ด์คํ ์ด๋ค.
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;
๋ค์์ ์ ์ธ๋ ๋ณ์๋ฅผ ์์์ ์ฐธ์กฐํ๋ ค ํ๋ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.๋ง์น ํธ์ด์คํ ์ด ๋ฐ์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ธ๋ค.
์ด๋ฐ ํ์์ด ๋ฐ์ํ๋ ์ด์ ๋ let, const์ ํธ์ด์คํ ๊ณผ์ ์ด var์ ๋ค๋ฅด๊ฒ ์งํ๋๊ธฐ ๋๋ฌธ์ด๋ค.
let/const๋ก ๋ณ์๋ฅผ ์ ์ธํ๋ ๊ฒฝ์ฐ,
์ฝ๋ ์คํ ์ ์๋ 1) ๋ณ์ ์ ์ธ๋ง ํด๋๋ฉฐ, 2) ์ด๊ธฐํ๋ ์ฝ๋ ์คํ ๊ณผ์ ์์ ๋ณ์ ์ ์ธ๋ฌธ์ ๋ง๋ฌ์ ๋ ์ํํ๋ค.
๊ทธ๋์ ํธ์ด์คํ ์ ๋ฐ์ํ๊ธด ํ์ง๋ง, ๊ฐ์ ์ฐธ์กฐํ ์ ์์ด์ ๋ฐ์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋๊ฒ์ด๋ค. ๊ทธ๋ฌํ ์ผ์์ ์ผ๋ก ๋ณ์ ๊ฐ์ ์ฐธ์กฐํ ์ ์๋ ๊ตฌ๊ฐ์ TDZ(Temporal Dead Zone)๋ผ๊ณ ํ๋ค.
let a = 10;
if(true){
console.log(a);// 10
}
์ ์ญ๋ณ์๋ก ์ ์ธ๋ a์ ๊ฐ 10์ if๋ฌธ ๋ธ๋ญ์์ ์ฐธ์กฐํ์ฌ ์ถ๋ ฅํ๊ณ ์๋ค.
let a = 10; // ์ ์ญ๋ณ์ a์ ์ธ
if(true){
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 20; // ์ง์ญ๋ณ์ a ์ ์ธ
}
if๋ฌธ ๋ธ๋ญ ๋ด๋ถ์์ ์ง์ญ๋ณ์ a๋ฅผ ๋ค์ ์ ์ธ, ์ง์ญ๋ณ์ a์์์ console.log()๋ก ์ฐธ์กฐ์ ์๋ฌ๊ฐ ๋ฐ์!
์๋ํ๋ฉด ์ง์ญ๋ณ์ a๊ฐ ํธ์ด์คํ ๋๋ฉด์ TDZ ๊ตฌ๊ฐ์ด ๋ง๋ค์ด์ก๊ธฐ ๋๋ฌธ.
์ฆ, let์ผ๋ก ์ ์ธ๋ ๋ณ์๋ ํธ์ด์คํ ์ด ๋ฐ์ํจ์ ์ ์ ์๋ค.
var a =10;
console.log(window.a); //10
console.log(a); //10
๋ธ๋ผ์ฐ์ ํ๊ฒฝ(ํฌ๋กฌ ์ฝ์ ๋ฑ)์์ ์ ์ฝ๋ ์คํ ์,
var๋ก ์ ์ธํ ๋ณ์ a๋ ๋ธ๋ผ์ฐ์ ์ ์ญ๊ฐ์ฒด์ธ window์ ํ๋กํผํฐ๋ก ํ ๋น๋๋ค.
let a = 10;
console.log(window.a); // undefined
console.log(a); //10
๋ธ๋ผ์ฐ์ ํ๊ฒฝ(ํฌ๋กฌ ์ฝ์ ๋ฑ)์์ ์ ์ฝ๋ ์คํ ์,
let์ด๋ const๋ก ์ ์ธํ ๋ณ์ a๋ ๋ธ๋ผ์ฐ์ ์ ์ญ๊ฐ์ฒด์ธ window์ ํ๋กํผํฐ๋ก ํ ๋น๋์ง ์์์์ ์ ์ ์๋ค. (window.a = undefined)
1์์: const๋ฅผ ์ต์ฐ์ ์ ์ผ๋ก ์ฌ์ฉํ๋ค.
2์์: let์ ๋ณ์ ๊ฐ์ ์ฌํ ๋นํ ํ์๊ฐ ์์ ๋๋ง ์ฌ์ฉํ๋ค.
3์์: var๋ ES6 ์ดํ ๋ถํฐ... ํน๋ณํ ๊ฒฝ์ฐ๋ฅผ ์ ์ธํ๊ณค ์ธ ํ์๊ฐ ์์ด ๋ณด์ธ๋ค..
Use const and let
Declare all local variables with either const or let.
Use const by default, unless a variable needs to be reassigned.
The var keyword must not be used.
1. const์ let์ ์ด์ฉํด์ ๋ณ์๋ฅผ ์ ์ธํ๋ผ.
2. ๊ฐ์ ์ฌํ ๋นํ๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด, const๋ฅผ ๋ํดํธ๋ก ์ฌ์ฉํ๋ผ.
3. var๋ ์ ๋๋ก ์ฌ์ฉํ์ง ๋ง๋ผ.
์ถ์ฒ : https://google.github.io/styleguide/jsguide.html#features-use-const-and-let