๐Ÿ“– var, let, const

๊ธฐ๋ก์ผ๊ธฐ๐Ÿ“ซยท2020๋…„ 12์›” 13์ผ
1

Javascript ๊ฐœ๋…์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
5/15

var, let ๊ทธ๋ฆฌ๊ณ  const


์ด๋ฒˆ ํฌ์ŠคํŒ…์—๋Š” var์™€ let, const์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด์ž. ๐Ÿ˜Š

๐Ÿ’ก ๊ธฐ์กด์— ์‚ฌ์šฉํ•ด์™”๋˜ var์™€ ES6์—์„œ ์ƒˆ๋กญ๊ฒŒ ๋“ฑ์žฅํ•œ ํ‚ค์›Œ๋“œ์ธ let, const์˜ ์ฐจ์ด์  ์œ„์ฃผ๋กœ ์ž‘์„ฑํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.


var vs let, const

๊ธฐ์กด ES6 ๋„์ž… ์ „์—๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ ํ‚ค์›Œ๋“œ๋กœ var๋งŒ ์กด์žฌํ–ˆ์—ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด const์™€ let์ด ๋“ฑ์žฅํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ์€ ๋ฌด์—‡์ผ๊นŒ? var๋กœ๋Š” ํ•ด๊ฒฐํ•˜๊ธฐ ํž˜๋“  ์–ด๋–ค ๋ฌธ์ œ์ ์ด ์žˆ์—ˆ๋˜ ๊ฒƒ์ผ๊นŒ?

1. scope

var์™€ let, const๊ฐ€ ๊ฐ€์ง€๋Š” ๊ฐ€์žฅ ํฐ ์ฐจ์ด์  ์ค‘ ํ•˜๋‚˜๋Š” scope์ด๋‹ค. scope๋ž€ ๋Œ€๋ถ€๋ถ„์˜ ์–ธ์–ด์—์„œ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐœ๋…์œผ๋กœ, ์‹๋ณ„์ž๊ฐ€ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๋งํ•œ๋‹ค.

var

์šฐ์„  var์—์„œ์˜ scope๋ฅผ ์‚ดํŽด๋ณด์ž. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ var์€ ๋ธ”๋ก ๋ ˆ๋ฒจ scope๊ฐ€ ์•„๋‹Œ ํ•จ์ˆ˜ ๋ ˆ๋ฒจ์˜ scope๋งŒ ์ธ์ •ํ•œ๋‹ค. ์ฆ‰ ํ•จ์ˆ˜์˜ ์ฝ”๋“œ ๋ธ”๋ก๋งŒ์„ ์ง€์—ญ scope๋กœ ์ธ์ •ํ•œ๋‹ค!

๋”ฐ๋ผ์„œ, ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ if๋ฌธ์ด๋‚˜ for๋ฌธ ์•ˆ์— ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋“ค๋„ ๋ชจ๋‘ ์ „์—ญ๋ณ€์ˆ˜๊ฐ€ ๋œ๋‹ค. ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด์ž.

var x = 1;

if (true) {
  var x = 10 // ๋ธ”๋ก scope๊ฐ€ ์ธ์ •๋˜์ง€ ์•Š๋Š”๋‹ค.
}
console.log(x); // 10

for (var i = 0; i < 100; i++) {
  // do nothing
}
console.log(i); // 100

์œ„ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด ๋ณด๋ฉด, if๋ฌธ ๋ธ”๋ก ์•ˆ์— ์„ ์–ธ๋œ x์™€ for ๋ธ”๋ก์•ˆ์— ์„ ์–ธ๋œ i๊ฐ€ ์ „์—ญ ๋ณ€์ˆ˜๋กœ์„œ ์ทจ๊ธ‰ ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด์ฒ˜๋Ÿผ var์„ ์„ ์–ธํ•˜๋ฉด ์˜๋„์น˜ ์•Š๊ฒŒ ๋‹ค์ˆ˜์˜ ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜๊ณ , ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๊ณ  ๋ณต์žกํ•ด์ง€๋ฉด ์˜ˆ์ƒํ•˜์ง€ ๋ชปํ•œ ์Šค์ฝ”ํ”„๋กœ ์ธํ•ด ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„ํ•˜์ง€ ์•Š์€ ๋ฒ„๊ทธ๋กœ ์ด์–ด์งˆ ์œ„ํ—˜์„ฑ์ด ์žˆ๋‹ค.


let, const

let๊ณผ const ํ‚ค์›Œ๋“œ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ scope๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์ด๋‹ค.

let x= 1;  // ์ „์—ญ๋ณ€์ˆ˜
const y = 2;

if (true) {
  let x = 10 //์ง€์—ญ๋ณ€์ˆ˜
  const y = 20;
  console.log(x) // 10
  console.log(y) // 20
}

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

์œ„์˜ ์ฝ”๋“œ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด if๋ฌธ ์•ˆ์—์„œ ์„ ์–ธ๋œ x, y๋Š” ์ง€์—ญ๋ณ€์ˆ˜๋กœ์„œ ์ „์—ญ ๋ธ”๋ก์— ์„ ์–ธ๋œ x, y์™€ ๊ตฌ๋ณ„๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

let ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ๋ชจ๋“  ์ฝ”๋“œ ๋ธ”๋ก์„ ์ง€์—ญ scope๋กœ ์ธ์ •ํ•˜๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ scope๋ฅผ ๋”ฐ๋ฅธ๋‹ค! const๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค.


2. ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…

์ด๋ฒˆ์—๋Š” ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ… ๊ด€์ ์—์„œ var๊ณผ let,const์˜ ์ฐจ์ด๋ฅผ ์•Œ์•„๋ณด์ž!

var

var ํ‚ค์›Œ๋“œ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์— ์˜ํ•ด ๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์ด ์Šค์ฝ”ํ”„์˜ ์„ ๋‘๋กœ ๋Œ์–ด ์˜ฌ๋ ค์ง„ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ๋Ÿฐํƒ€์ž„ ์ด์ „์— ์ฝ”๋“œ๋ฅผ ์ฝ์œผ๋ฉฐ var๋กœ ์„ ์–ธ๋œ ๋ชจ๋“  ๋ณ€์ˆ˜๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ๋งŒ๋“ค๊ณ  undefined๋กœ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค. ์ฆ‰, ์„ ์–ธ์€ ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€๋งŒ ํ• ๋‹น์€ ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€ ์•Š๋Š”๋‹ค.

console.log(foo) // undefined
foo = 123
console.log(foo) /// 123
var foo;

์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋Š” ์‹ค์ œ๋กœ ๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์ด ์„ ๋‘๋กœ ๋Œ์–ด ์˜ฌ๋ ค์ง€๊ฒŒ ๋˜์–ด, ์•„๋ž˜์™€ ๊ฐ™์ด ๋™์ž‘ํ•œ๋‹ค.

var foo = undefined;
console.log(foo); // undefined
foo = 123;
console.log(foo) // 123

let

let๋„ ๋Ÿฐํƒ€์ž„ ์ด์ „์— ์„ ์–ธ์ด ์‹คํ–‰๋˜๋ฉฐ ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒํ•œ๋‹ค. ํ•˜์ง€๋งŒ let์€ ์ฝ”๋“œ๊ฐ€ ๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์— ๋„์ฐฉํ•˜๊ธฐ ์ „์—๋Š” ์ดˆ๊ธฐํ™”๊ฐ€ ์ง„ํ–‰๋˜์ง€ ์•Š์œผ๋ฉฐ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค!

๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์— ๋„์ฐฉํ•ด์„œ์•ผ undefined๋กœ ์ดˆ๊ธฐํ™”๊ฐ€ ์ง„ํ–‰๋œ๋‹ค.

console.log(foo) 
// ReferenceError: Cannot access 'foo' before initialization
// var๊ณผ ๋‹ฌ๋ฆฌ ์„ ์–ธ๋ฌธ ์ „์— ์ ‘๊ทผํ•˜๋ ค๊ณ  ํ•˜๋ฉด error๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค.

let foo; // ์ด ๋ผ์ธ์ด ์ง€๋‚˜์•ผ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
console.log(foo) // undefined

foo = 1;
console.log(foo) // 1

const

const์˜ ๊ฒฝ์šฐ๋„ let๊ณผ ๊ฐ™์ง€๋งŒ ์„ ์–ธ๊ณผ ๋™์‹œ์— ์ดˆ๊ธฐํ™”๋ฅผ ํ•ด์•ผํ•œ๋‹ค๋Š” ์ฐจ์ด์ ์ด ์žˆ๋‹ค.

console.log(foo) // ReferenceError: Cannot access 'foo' before initialization

const foo = 1; // ์—ฌ๊ธฐ์—์„œ์•ผ ๋ณ€์ˆ˜๊ฐ€ ์ดˆ๊ธฐํ™” ๋จ
console.log(foo) // 1

ํ•˜์ง€๋งŒ ์—ญ์‹œ const๋„ ์ฒ˜์Œ console.log(foo) ๋ผ์ธ์ด ReferenceError: Cannot access 'foo' before initialization ๋ฅผ ๋ฐœ์ƒ ์‹œํ‚ค๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์•„ ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์ด ๋ฐœ์ƒ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.


++ 20-12-25 ์ถ”๊ฐ€!
์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ณต๋ถ€ํ–ˆ๋”๋‹ˆ ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…์˜ ์›๋ฆฌ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. (์ž์„ธํ•œ ์›๋ฆฌ๊ฐ€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํฌ์ŠคํŒ…์„ ์ฝ์–ด๋ณด์„ธ์š”!)


3. ์ „์—ญ๊ฐ์ฒด

var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•œ ์ „์—ญ ๋ณ€์ˆ˜, ์ „์—ญ ํ•จ์ˆ˜, ๊ทธ๋ฆฌ๊ณ  ์„ ์–ธํ•˜์ง€ ์•Š์€ ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•œ ์•”๋ฌต์  ์ „์—ญ์€ ์ „์—ญ ๊ฐ์ฒด window์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋œ๋‹ค

var x = 1;
console.log(window.x); // 1
console.log(x); // 1

๋ฐ˜๋ฉด let๊ณผ const ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•œ ์ „์—ญ ๋ณ€์ˆ˜๋Š” ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์•„๋‹ˆ๋‹ค.

let x = 1;
const y = 2;

console.log(window.x); // undefined
console.log(x); // 1

console.log(window.y); // undefined
console.log(y); //2

๋งˆ์น˜๋ฉฐ

var์ด ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋˜ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด let๊ณผ const๊ฐ€ ๋‚˜์˜จ ๋งŒํผ,
ES6์—์„œ๋Š” var ์‚ฌ์šฉ์„ ์ง€์–‘ํ•˜๊ณ  let๊ณผ const๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜์ž!

0๊ฐœ์˜ ๋Œ“๊ธ€