-
[JavaScript] var, let, const ν€μλμ μ°¨μ΄TECH 2022. 3. 4. 21:20
var
1. μ€λ³΅ μ μΈ κ°λ₯
var x = 10; var y = 20; var x = 100; var y; // μ΄κΈ°νλ¬Έ μμΌλ©΄ 무μ console.log(x); // 100 console.log(y); // 20
2. ν¨μ λ 벨 μ€μ½ν
ν¨μμ μ½λ λΈλ‘μ μ§μ μ€μ½νλ‘ μΈμ νλ―λ‘ ν¨μ μΈλΆμμ var ν€μλλ‘ μ μΈν λ³μλ μ½λ λΈλ‘ λ΄μμ μ μΈν΄λ μ μ λ³μλ‘ μΈμ λ¨.
var a = 10; function callA() { console.log(a); } callA() // 10
3. λ³μ νΈμ΄μ€ν
var ν€μλλ‘ λ³μλ₯Ό μ μΈνλ©΄ νΈμ΄μ€ν μ μν΄ μ€μ½νμ μλ¨μ μμΉν κ²μ²λΌ λμ΄ μ¬λ €μ Έμ λμν¨.
console.log(foo); // undefined foo = 123; console.log(foo); // 123 var foo;
let
var
ν€μλμ λ¨μ μ 보μνκΈ° μν΄ ES6μμ λμ ν μλ‘μ΄ ν€μλ.1. μ€λ³΅ μ μΈ κΈμ§
var x = 10; var x = 100; console.log(x); // 100 let y = 20; let y = 200; // SyntaxError: Identifier 'y' has already been declared
2. λΈλ‘ λ 벨 μ€μ½ν
let
ν€μλλ‘ μ μΈν λ³μλ λͺ¨λ μ½λ λΈλ‘μ μ§μ μ€μ½νλ‘ μΈμ νλ λΈλ‘ λ 벨 μ€μ½νλ₯Ό λ°λ¦let a = 1; { let a = 10; let b = 20; } console.log(a); // 1 console.log(b); // ReferenceError: b is not defined
aλ μ μ λ³μ, λΈλ‘ μμ μλ aλ μ§μ λ³μ, bλ μ§μ λ³μ
3. ν¨μ νΈμ΄μ€ν
let
ν€μλλ‘ μ μΈν λ³μλ λ³μ νΈμ΄μ€ν μ΄ λ°μνμ§ μλ κ²μ²λΌ λμν¨console.log(foo); // ReferenceError: foo is not defined let foo = 123;
κ·Έλ μ§λ§ νΈμ΄μ€ν μ΄ λ°μνμ§ μλ κ²μ μλλ€.
let foo = 123; { console.log(foo); // ReferenceError: Cannot access 'foo' before initializtion let foo = 3; }
νΈμ΄μ€ν μ΄ λ°μνκΈ° λλ¬Έμ ReferenceErrorκ° λ°μνλ€.
μλ°μ€ν¬λ¦½νΈλ let, constλ₯Ό ν¬ν¨ν λͺ¨λ μ μΈ(var, let, const, function, function*, class)μμ λͺ¨λ νΈμ΄μ€ν μ΄ λ°μνμ§λ§ ES6μμ λμ λ let, const, classμμλ νΈμ΄μ€ν μ΄ λ°μνμ§ μλ κ²μ²λΌ λμνλ€.
const
1. μ μΈκ³Ό μ΄κΈ°ν
const
λ‘ μ μΈλ λ³μλ μ μΈκ³Ό λμμ μ΄κΈ°νν΄μΌ νλ€.const foo = 1; (o) const foo; (x)
let
κ³Ό λ§μ°¬κ°μ§λ‘ λΈλ‘ λ 벨 μ€μ½νλ₯Ό κ°μ§κ³ , νΈμ΄μ€ν μ΄ λ°μνμ§ μλ κ²μ²λΌ λμνλ€.2. μ¬ν λΉ κΈμ§
const
λ‘ μ μΈν λ³μλ μ¬ν λΉμ΄ κΈμ§λλ€.const foo = 1; foo = 2; // TypeError: Assignment to constant variable.
3. μμ
const
ν€μλμ λλ¬Έμ μ΄λ¦μ μ¬μ©ν΄ μμμμ λνλΈλ€.const DISCOUNT_RATE = 0.1; let price = 10000; let discountPrice = price - (price * DISCOUNT_RATE) console.log(discountPrice)
4. κ°μ²΄
const
ν€μλλ‘ μ μΈν κ°μ²΄μ κ²½μ° κ°μ λ³κ²½ν μ μλ€.const myself = { name: 'ttaerrim' } myself.name = 'leetaerim'; console.log(myself) // {name: 'leetaerim'}
var vs let vs const
λ³μλ κΈ°λ³Έμ μΌλ‘
const
λ₯Ό μ¬μ©νκ³ μ¬ν λΉμ΄ νμν κ²½μ°μ νν΄let
μ μ¬μ©νλ κ²μ΄ μ’λ€. κΈ°λ³Έμ μΌλ‘λconst
ν€μλλ‘ λ³μλ₯Ό μ μΈνλ κ²μ΄ μμ νλ€.- ES6μμλ
var
ν€μλλ₯Ό μ¬μ©νμ§ μλλ€. - μ¬ν λΉμ΄ νμν κ²½μ°μ νν΄
let
ν€μλλ₯Ό μ¬μ©νκ³ μ΄λ λ³μμ μ€μ½νλ μ΅λν μ’κ² λ§λ λ€. - μ¬ν λΉμ΄ νμ μλ κ°μλ
const
ν€μλλ₯Ό μ¬μ©νλ€.
μ°μ
const
λ₯Ό μ¬μ©νκ³ μ¬ν λΉμ΄ λ°μνλ κ²½μ°λΌλ©΄ κ·Έλlet
ν€μλλ‘ μμ νλ κ²μ μΆμ²νλ€.μ°Έκ³
λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive
'TECH' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[JavaScript] λ λμ λΉλκΈ° ν΅μ (0) 2022.03.27 [React] Redux κ°λ μ 리 (0) 2022.03.13 [React] Checkbox (2) β λ²νΌμΌλ‘ μ ν ν΄μ νκΈ° (0) 2022.02.21 [React] Checkbox (1) β Context APIλ‘ Checkbox μν κ΄λ¦¬νκΈ° (0) 2022.02.19 CLOVA Summary API νμ΄μ¬μΌλ‘ μ¬μ©νκΈ° (0) 2021.08.23 - ES6μμλ