λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive λμμ 15μ₯μ μ 리νμμ΅λλ€.
var ν€μλλ‘ μ μΈν λ³μλ μ€λ³΅ μ μΈμ΄ κ°λ₯νλ€.
var x = 1;
var x = 100;
console.log(x); // 100
λμΌν μ΄λ¦μ λ³μκ° μ΄λ―Έ μ μΈλμ΄ μλ κ²μ λͺ¨λ₯΄κ³ λ³μλ₯Ό μ€λ³΅ μμΈ νλ©΄μ κ°κΉμ§ ν λΉνλ€λ©΄ λ¨Όμ μ μΈλ λ³μ κ°μ΄ λ³κ²½λλ λΆμμ©μ΄ λ°μνλ€.
var ν€μλλ‘ μ μΈν λ³μλ μ€μ§ ν¨μμ μ½λ λΆλ‘
λ§μ μ§μ μ€μ½νλ‘ μΈμ νλ€. λ°λΌμ ν¨μ μΈλΆμμ μ μΈν λ³μλ μ½λ λΈλ‘ λ΄μμ μ μΈν΄λ λͺ¨λ μ μ λ³μκ° λλ€.
var i = 10;
for(var i = 0; i<5; i++){
console.log(i);// 0 1 2 3 4
}
console.log(i); //5
λ³μ νΈμ΄μ€ν
μ μν΄ var ν€μλλ‘ μ μΈν λ³μλ λ³μ μ μΈλ¬Έ μ΄μ μ μ°Έμ‘°ν μ μλ€. λ¨ ν λΉλ¬Έ μ΄μ μ λ³μλ₯Ό μ°Έμ‘°νλ©΄ undefined
λ₯Ό λ°ννλ€.
console.log(x); // undefined
x = 123;
console.log(x); //123
var x;
λ³μ μ μΈλ¬Έ μ΄μ μ λ³μλ₯Ό μ°Έμ‘°νλ κ²μ νλ‘κ·Έλ¨ νλ¦μ λ§μ§ μμ λΏλλ¬ κ°λ μ±μ λ¨μ΄λ¨λ¦¬κ³ μ€λ₯λ₯Ό λ°μμν¬ μ¬μ§λ₯Ό λ¨κΈ΄λ€.
let ν€μλλ‘ μ΄λ¦μ΄ κ°μ λ³μλ₯Ό μ€λ³΅ μ μΈνλ©΄ SyntaxError(λ¬Έλ²μλ¬)κ° λ°μνλ€.
let a = 123;
let a = 456; // SyntaxError
let ν€μλλ‘ μ μΈν λ³μλ λͺ¨λ μ½λ λΈλ‘(ν¨μ, ifλ¬Έ, for, whileλ¬Έ λ±)
μ μ§μ μ€μ½νλ‘ μΈμ νλ λΈλ‘ λ 벨 μ€μ½νλ₯Ό λ°λ₯Έλ€.
let i = 100;
function foo(){
let i = 100;
for(let i = 0; i<3; i++){
console.log(i); //1 2
}
console.log(i); //100
}
foo();
console.log(i); //10
let ν€μλλ‘ μ μΈν λ³μλ λ³μ νΈμ΄μ€ν μ΄ λ°μ νμ§ μλ κ²μ²λΌ λμνλ€.
console.log(x); //ReferenceError: x is not defined
let x;
var ν€μλ
λ‘ μ μΈν λ³μ
let ν€μλ
λ‘ μ μΈν λ³μ
λ§μ½, μ΄κΈ°ν λ¨κ³κ° μ€νλκΈ° μ΄μ μ λ³μμ μ κ·Όνλ €κ³ νλ©΄ μ°Έμ‘° μλ¬κ° λ°μνλ€.
let ν€μλλ‘ μ μΈν λ³μλ μ€μ½νμ μμμ§μ λΆν° λ³μ μ μΈλ¬ΈκΉμ§ λ³μλ₯Ό μ°Έμ‘°ν μ μλ€. μ΄ κ΅¬κ°μ μΌμμ μ¬κ°μ§λ(TDZ)λΌκ³ λΆλ₯Έλ€.
// λ°νμ μ΄μ μ μ μΈ λ¨κ³ μ€ν(λ³μ μ΄κΈ°ν X)
// μ΄κΈ°ν μ΄μ μ μΌμμ μ¬κ°μ§λ(TDZ)μμλ λ³μλ₯Ό μ°Έμ£Όν μ μλ€.
console.log(foo); //ReferenceError
let foo; //μ΄κΈ°ν λ¨κ³
console.log(foo); //undefined
foo = 1; //ν λΉ λ¨κ³
ππ» μ¬κΈ°μ μ κΉ!
let ν€μλλ‘ μ μΈν λ³μλ λ³μ νΈμ΄μ€ν
μ΄ λ°μνμ§ μλ κ²μ²λΌ 보μ΄μ§λ§ μλλ€!
lef foo = 1;
{
console.log(foo); //ReferenceError
let foo = 2;
}
μμ μ½μμμ fooμ κ°μ΄ 1μ΄ λμ¬ κ² μ²λΌ 보μ΄μ§λ§ λΈλ‘ μμμ νΈμ΄μ€ν
μ΄ λ°μνκΈ° λλ¬Έμ ReferenceErrorκ° λ°μνλ€.
-> ES6μμ λμ
λ λͺ¨λ μ μΈμ νΈμ΄μ€ν
νλ€.
varν€μλλ‘ μ μΈν μ μ λ³μμ μ μ ν¨μ, κ·Έλ¦¬κ³ μ μΈνμ§ μμ λ³μμ κ°μ ν λΉν μ묡μ μ μ
μ μ μ κ°μ²΄ windowμ νλ‘νΌν°κ° λλ€.
// μ΄ μμ λ λΈλΌμ°μ νκ²½μμ μ€νν΄μΌ νλ€.
var x = 1;
y = 2;
function foo(){}
console.log(window.x); //1 : var ν€μλλ‘ μ μΈν΄μ windowμ νλ‘νΌν°κ° λ¨.
console.log(x); //μ μ κ°μ²΄ windowμ νλ‘νΌν°λ μ μ λ³μμ²λΌ μ¬μ©ν μ μλ€.
// μ묡μ μ μ
console.log(window.y); //2
console.log(y); //2
// ν¨μ μ μΈλ¬ΈμΌλ‘ μ μν μ μ ν¨μλ μ μ κ°μ²΄ windowμ νλ‘νΌν°λ€.
console.log(window.foo);
console.log(foo); //f foo(){}
μ μΈνμ§ μμ μλ³μμ κ°μ ν λΉνλ©΄ μ μκ°μ²΄μ νλ‘νΌν°
κ° λλ€. μ΄λ λ³μκ° μλλ€.
λ°μ μμμ²λΌ window.y = 2
μ²λΌ ν΄μλμ΄, μ μκ°μ²΄μ νλ‘νΌν°κ° λλ κ²μ΄λ€. μ΄λ¬ν νμμ μ묡μ μ μμ΄λΌκ³ λ§νλ€.
var x = 10;
function foo(){
y = 20; //window.y
console.log(x+y); //30
}
foo(); // 30
λ°μ μμμ²λΌ yλ λ³μκ° μλλ―λ‘ νΈμ΄μ€ν μ΄ λ°μνμ§ μλλ€!
// μ μ λ³μ xλ νΈμ΄μ€ν
μ΄ λ°μνλ€.
console.log(x); // undefined
// μ μ λ³μκ° μλλΌ λ¨μ§ μ μ νλ‘νΌν°μΈ yλ νΈμ΄μ€ν
μ΄ λ°μνμ§ μλλ€.
console.log(y); // ReferenceError: y is not defined
var x = 10; // μ μ λ³μ
function foo () {
// μ μΈνμ§ μμ λ³μ
y = 20;
console.log(x + y); //30
}
foo(); // 30
λλΆλΆ let ν€μλμ λμΌν νΉμ§μ κ°μ§λ€.
const ν€μλλ‘ μ μΈν λ³μλ λ°λμ μ μΈκ³Ό λμμ μ΄κΈ°νν΄μΌ νλ€.
κ·Έλ μ§ μμΌλ©΄ SyntaxError(λ¬Έλ² μλ¬)κ° λ°μνλ€. κ·Έλ¦¬κ³ let ν€μλλ‘ μ μΈν λ³μμ λ§μ°¬κ°μ§λ‘ λΈλ‘ λ 벨 μ€μ½ν
λ₯Ό κ°μ§λ©°, λ³μ νΈμ΄μ€ν
μ΄ λ°μνμ§ μλ κ²μ²λΌ λμνλ€.
var λλ let ν€μλλ‘ μ μΈν λ³μλ μ¬ν λΉμ΄ μμ λ‘μ°λ const ν€μλλ‘ μ μΈν λ³μλ μ¬ν λΉμ΄ κΈμ§λλ€.
const foo = 1;
foo = 2; //TypeError: Assignment to constant variable.
λ³μμ μλ κ°λ
μΌλ‘ μ¬ν λΉμ΄ κΈμ§λ λ³μλ₯Ό λ§νλ€. μμλ κ°μ μ μ₯νκΈ° μν λ©λͺ¨λ¦¬ 곡κ°μ΄ νμνλ―λ‘ λ³μλΌκ³ ν μ μλ€. λ¨, λ³μλ μΈμ λ μ§ μ¬ν λΉμ ν΅ν΄ λ³μ κ°μ λ³κ²½ν μ μμ§λ§ μμλ μ¬ν λΉμ΄ κΈμ§λλ€. μμλ μν μ μ§μ κ°λ
μ±, μ μ§λ³΄μμ νΈμ
μ μν΄ μ κ·Ήμ μΌλ‘ μ¬μ©ν΄μΌ νλ€.
μ¦, const ν€μλλ‘ μ μΈλ λ³μμ μμ κ°μ ν λΉν κ²½μ° μμκ°μ λ³κ²½ν μ μλ κ°μ΄κ³ const ν€μλλ μ¬ν λΉμ΄ κΈμ§λλ―λ‘ ν λΉλ κ°μ λ³κ²½ν λ°©λ²μ΄ μλ€.
μλ μμμ²λΌ 0.1μ μ΄λ€ μλ―Έλ‘ μ¬μ©νλμ§ λͺ
ννκ² μκΈ° μν΄μ μμλ‘ μ μν΄μ μ¬μ©νλ λ°©λ²λ μλ€.
μ¬λ¬ λ¨μ΄λ‘ μ΄λ£¨μ΄μ§ κ²½μ°λ μ€λ€μ΄ν¬ μΌμ΄μ€('_'λ‘ κ΅¬λΆ)λ‘ νννλ κ²μ΄ μΌλ°μ μ΄λ€.
const TAX_RATE = 0.1; // μΈμ¨
let preTaxPrice = 100; // μΈμ κ°κ²©
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE) // μΈν κ°κ²©
console.log(afterTaxPrice); //110
const ν€μλλ‘ μ μΈλ λ³μμ κ°μ²΄λ₯Ό ν λΉν κ²½μ°μλ κ°μ λ³κ²½ν μ μλ€.
const person = {
name: 'Lee'
}
// κ°μ²΄λ λ³κ²½ κ°λ₯ν κ°μ΄λ€. λ°λΌμ μ¬ν λΉ μμ΄ λ³κ²½μ΄ κ°λ₯νλ€.
person.name = 'Kim';
console.log(person); //{name:'Kim'}
-> const ν€μλλ μ¬ν λΉμ κΈμ§ν λΏ λΆλ³μ μλ―Ένλ κ²μ μλλ€. μ¦, μλ‘μ΄ κ°μ μ¬ν λΉνλ κ²μ κΈμ§νμ§λ§ νλ‘νΌν° λμ μμ±, μμ , νλ‘νΌν° κ°μ λ³κ²½μ ν΅ν΄ κ°μ²΄λ₯Ό λ³κ²½
νλ κ²μ κ°λ₯νλ€.
λ³μ μ μΈμλ κΈ°λ³Έμ μΌλ‘ const
λ₯Ό μ¬μ©νκ³ let
μ μ¬ν λΉμ΄ νμν κ²½μ°μ νμ ν΄ μ¬μ©νλ κ²μ΄ μ’λ€.
- ES6λ₯Ό μ¬μ©νλ€λ©΄ var ν€μλλ μ¬μ©νμ§ μλλ€.
- μ¬ν λΉμ΄ νμν κ²½μ°μλ§ νμ νμ¬ let ν€μλλ₯Ό μ¬μ©νλ€. μ΄λ λ³μμ μ€μ½νλ μ΅λν μ’κ² λ§λ λ€.
- λ³κ²½μ΄ λ°μνμ§ μκ³ μ½κΈ° μ μ©μΌλ‘ μ¬μ©νλ(μ¬ν λΉμ΄ νμ μλ μμ) μμκ°κ³Ό κ°μ²΄μλ constλ₯Ό μ¬μ©νλ€.
λ³μλ₯Ό μ μΈνλ μμ μλ μ¬ν λΉμ΄ νμνμ§ μ λͺ¨λ₯΄λ κ²½μ°κ° λ§λ€. λ°λΌμ μΌλ¨ const ν€μλ
λ₯Ό μ¬μ©νκ³ μ¬ν λΉμ΄ νμνλ€λ©΄(λ°λμ νμνμ§ κΌ μκ°) κ·Έλ const ν€μλλ₯Ό let ν€μλλ‘ λ³κ²½νμ.