πŸ“•μ±…/λ”₯λ‹€μ΄λΈŒ

15μž₯ let,const ν‚€μ›Œλ“œμ™€ 블둝 레벨 μŠ€μ½”ν”„

eazyseon 2023. 11. 21. 23:51
λ°˜μ‘ν˜•


15.1 var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜μ˜ 문제점 
-λ³€μˆ˜ μ€‘볡 μ„ μ–Έ ν—ˆμš© 
var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” 쀑볡 선언이 κ°€λŠ₯ν•˜λ‹€. 
μ΄ˆκΈ°ν™”λ¬Έμ΄ μ—†λŠ” λ³€μˆ˜ 선언문은 λ¬΄μ‹œλœλ‹€.  μ—λŸ¬λŠ” λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€.

var x = 1
var y = 1;

var x = 100;
var y;//μ΄ˆκΈ°ν™”λ¬Έμ΄ μ—†λŠ” λ³€μˆ˜ 선언문은 λ¬΄μ‹œλœλ‹€. 

console.log(x);//100
console.log(y);//1


 -ν•¨μˆ˜ λ ˆλ²¨ μŠ€μ½”ν”„ 
var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” μ˜€λ‘œμ§€ ν•¨μˆ˜μ˜ μ½”λ“œ λΈ”λ‘λ§Œμ„ μ§€μ—­ μŠ€μ½”ν”„λ‘œ μΈμ •ν•œλ‹€.  

κ·Έλž˜μ„œ ifλ¬Έμ΄λ‚˜ forλ¬Έμ—μ„œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” μ „μ—­ λ³€μˆ˜κ°€ λœλ‹€. 

- λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…
var ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ λ³€μˆ˜ μ„ μ–Έλ¬Έμ΄ μŠ€μ½”ν”„μ˜ μ„ λ‘λ‘œ 
λŒμ–΄ μ˜¬λ €μ§„ κ²ƒμ²˜λŸΌ λ™μž‘ν•œλ‹€. κ·Έλž˜μ„œ μ„ μ–Έλ¬Έ 이전에 μ°Έμ‘°ν•˜λ©΄ undefinedλ₯Ό λ°˜ν™˜ν•œλ‹€. 

15.2 let ν‚€μ›Œλ“œ 
-λ³€μˆ˜ μ€‘볡 μ„ μ–Έ κΈˆμ§€ 
let으둜 λ³€μˆ˜λ₯Ό μ€‘볡 μ„ μ–Έν•˜λ©΄ λ¬Έλ²• μ—λŸ¬κ°€ λ°œμƒν•œλ‹€. 

let a = 100;
let a = 200;//SyntaxError: Identifier 'a' has already been declared.


-블둝 λ ˆλ²¨ μŠ€μ½”ν”„
let으둜 μ„ μ–Έν•œ λ³€μˆ˜λŠ” λͺ¨λ“  μ½”λ“œ 블둝을 μ§€μ—­ μŠ€μ½”ν”„λ‘œ μΈμ •ν•œλ‹€. 

let foo = 1;
{
  let foor = 2;
  let bar = 3;
}
console.log(foo); //1
console.log(bar);


μ „μ—­μ—μ„œ μ„ μ–Έλœ foo와 μ½”λ“œ 블둝 λ‚΄μ˜ fooλŠ” λ‹€λ₯Έ λ³„κ°œμ˜ λ³€μˆ˜λ‹€.
ν•¨μˆ˜ λ‚΄μ˜ μ½”λ“œ λΈ”둝은 ν•¨μˆ˜ λ ˆλ²¨ μŠ€μ½”ν”„μ— μ€‘μ²©λœλ‹€. 

- λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ… 
let ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ” κ²ƒμ²˜λŸΌ λ™μž‘ν•œλ‹€. 

console.log(foo);//ReferenceError: foo is not defined
let foo;


let ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” μ„ μ–Έκ³Ό μ΄ˆκΈ°ν™”κ°€ λΆ„λ¦¬λ˜μ–΄ μ§„ν–‰λœλ‹€. 
λŸ°νƒ€μž„ μ΄μ „에 μ„ μ–Έλ‹¨κ³„κ°€ μ‹€ν–‰λ˜μ§€λ§Œ μ΄ˆκΈ°ν™”λŠ” λ³€μˆ˜ μ„ μ–Έλ¬Έμ— λ„λ‹¬ν–ˆμ„ λ•Œ μ‹€ν–‰λœλ‹€. 

console.log(foo);//ReferenceError: foo is not defined
let foo;
console.log(foo)//undefined


μŠ€μ½”ν”„μ˜ μ‹œμž‘ μ§€μ λΆ€ν„° μ΄ˆκΈ°ν™” λ‹¨κ³„ μ‹œμž‘ μ§€μ κΉŒμ§€ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  μˆ˜ μ—†λ‹€. 
이 κ΅¬κ°„을 μΌμ‹œμ  μ‚¬κ°μ§€λŒ€ (TDZ)라고 λΆ€λ₯Έλ‹€. 

15.3 const ν‚€μ›Œλ“œ 

const ν‚€μ›Œλ“œλŠ” μƒμˆ˜λ₯Ό μ„ μ–Έν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•œλ‹€.

 

- μ„ μ–Έκ³Ό μ΄ˆκΈ°ν™”
const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” 블둝 레벨 μŠ€μ½”ν”„λ₯Ό κ°€μ§€λ©°, λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜μ§€ μ•ŠλŠ” κ²ƒμ²˜λŸΌ λ™μž‘ν•œλ‹€. 
 
-μž¬ν• λ‹Ή κΈˆμ§€ 

const둜 μ„ μ–Έν•œ λ³€μˆ˜λŠ” μž¬ν• λ‹Ήμ΄ κΈˆμ§€λœλ‹€. 

const foo = 1;
foo = 2;//TypeError: Assignment to constant variable.

 

- const ν‚€μ›Œλ“œμ™€ 객체 

const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έλœ λ³€μˆ˜μ— 객체λ₯Ό ν• λ‹Ήν•œ 경우 값을 λ³€κ²½ν•  수 μžˆλ‹€. 

λ³€κ²½ λΆˆκ°€λŠ₯ν•œ μ›μ‹œ 값은 μž¬ν• λ‹Ή 없이 λ³€κ²½ν•  수 μ—†μ§€λ§Œ κ°μ²΄λŠ” μž¬ν• λ‹Ή 없이도 직접 변경이 κ°€λŠ₯ν•˜κΈ° λ•Œλ¬Έμ΄λ‹€. 

const person = {
  name : 'Lee'
};

person.name = 'Kim';

console.log(person);//{ name: 'Kim' }

 

 

일단 const ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μž!

λ°˜μ‘ν˜•