[Javascript] ES6 `template literal, string, var, let, const`๐Ÿ˜„

14675 ๋‹จ์–ด constTILvarJavaScriptletJavaScript

๐Ÿ’ก 'var', 'let', 'const'์˜ ์ฐจ์ด์  + hosting



hosting

varํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ์ „์—ญ์ ์ธ ๋ฒ”์œ„๋กœ, ์ด๋Ÿฌํ•œ ํŠน์„ฑ์€ ํ˜ผ๋™์„ ์ฃผ๋ฉฐ ์˜ค๋ฅ˜์˜ ์›์ธ์ด ๋˜๊ธฐ๋„ ํ•œ๋‹ค. var๋ณ€์ˆ˜์˜ ์„ ์–ธ์€ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— ์ฒ˜๋ฆฌ๋˜๋Š”๋ฐ, ์–ด๋Š ๊ณณ์—์„œ ์„ ์–ธ์„ ํ•˜๋˜ ๋งจ ์œ„์—์„œ ์„ ์–ธ ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด '๋Œ์–ด์˜ฌ๋ ค' ๊ฐ’์„ ๋Œ€์ž…ํ•œ๋‹ค.

a = 1;
var a;
console.log(a);
// output 1

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์œ„์—์„œ๋ถ€ํ„ฐ ์•„๋ž˜๋กœ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๊ฐ€ ๋‚  ๊ฒƒ ๊ฐ™์ง€๋งŒ ์ •์ƒ์ ์œผ๋กœ 1์ด๋ผ๋Š” ๊ฐ’์„ ์ถœ๋ ฅํ•œ๋‹ค. hosting๋˜์–ด var๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ๋Œ๊ณ  ์˜ฌ๋ผ์™”๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.


var

ES6 ์ด์ „์˜ javascript์—์„œ๋Š” varํ‚ค์›Œ๋“œ๊ฐ€ ์œ ์ผํ•œ ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐฉ๋ฒ•์ด์˜€๋‹ค.
ES6์ดํ›„์—” var, let, const ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ๋ฐฐํฌ์ฝ”๋“œ์—๋งŒ varํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ถ”์„ธ์ด๋‹ค.
ํ•จ์ˆ˜ ๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„ (function-Level Scope)๊ฐ€ ์ ์šฉ๋˜๋ฉฐ,
var๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ์ค‘๋ณตํ•ด์„œ ์„ ์–ธ(์ดˆ๊ธฐํ™”)์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
์ด ๊ฒฝ์šฐ, ๋งˆ์ง€๋ง‰์— ํ• ๋‹น๋œ ๊ฐ’์ด ๋ณ€์ˆ˜์— ์ ์šฉ๋˜๋Š”๋ฐ
๊ธฐ์กด์— ์„ ์–ธํ•ด๋‘” ๋ณ€์ˆ˜์˜ ์กด์žฌ๋ฅผ ๊นŒ๋จน๊ธฐ ์‰ฝ๊ณ , ๊ฐ’์„ ์žฌํ• ๋‹นํ•˜๊ฒŒ ๋˜๋Š” ๋“ฑ์˜ ์‹ค์ˆ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์‰ฝ๋‹ค.

var varTest = 25;     // (๋ณ€์ˆ˜ ์„ ์–ธ)
varTest = 18;         // (๋ณ€์ˆ˜ ์žฌํ• ๋‹น)
var varTest = 30;     // (๋ณ€์ˆ˜ ์žฌ์„ ์–ธ)
console.log(varTest); // 30

if๋ฌธ ์˜ˆ์‹œ

var varTest = 18;      // (๋ณ€์ˆ˜ varTest ์„ ์–ธ, ๊ฐ’ = 18 ํ• ๋‹น)
console.log(varTest);  // 18
if (true) {
  var varTest = 25;    // ('if ๋ธ”๋Ÿญ ๋‚ด' ๋ณ€์ˆ˜ varTest ์žฌ์„ ์–ธ, ๊ฐ’ = 25 ํ• ๋‹น)
  console.log(varTest);// 25
}
console.log(varTest);  // 25
  • if๋ฌธ ์•ˆ์—์„œ ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๊ฐ€ ์ ์šฉ๋˜๋Š” var์˜
    ์ง€์—ญ๋ณ€์ˆ˜ ์žฌ์„ ์–ธ์‹œ if ๋ธ”๋Ÿญ ๋‚ด์—์„œ ์žฌํ• ๋‹น ๋œ ๊ฐ’์ด ์ถœ๋ ฅ๋œ๋‹ค.



let

๋ธ”๋ก ๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„(Block-Level Scope)๊ฐ€ ์ ์šฉ๋˜๋ฉฐ, ๋ธ”๋ก ๋‚ด์— ์„ ์–ธํ•œ ์ง€์—ญ๋ณ€์ˆ˜๋Š” ๋ธ”๋ก ๋ฐ–์˜ ์ „์—ญ๋ณ€์ˆ˜์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค.

let letTest = 25;     // (๋ณ€์ˆ˜ ์„ ์–ธ)
letTest = 18;         // (๋ณ€์ˆ˜ ์žฌ ํ• ๋‹น)
let letTest = 30;     // (Uncaught SyntaxError: Identifier 'age' has already been declared)
console.log(age);

if๋ฌธ ์˜ˆ์‹œ

let letTest = 10;       // (๋ณ€์ˆ˜ letTest ์„ ์–ธ, ๊ฐ’ = 10 ํ• ๋‹น )
console.log(letTest);   // 10
if(true) {
  let letTest = 100;    // ( 'if ๋ธ”๋Ÿญ ๋‚ด' ์ง€์—ญ๋ณ€์ˆ˜ letTest ์„ ์–ธ, ๊ฐ’ = 100 ํ• ๋‹น )
  console.log(letTest); // 100
}
console.log(letTest);   // 10
  • var์™€ ๋‹ฌ๋ฆฌ ๋ธ”๋Ÿญ ๋ฐ”๊นฅ์˜ letTest ๊ฐ’์ด ๋ณ€ํ•˜์ง€ ์•Š์•˜๋‹ค.
    if๋ฌธ ๋‚ด์˜ let(์ง€์—ญ๋ณ€์ˆ˜)๋Š” ๋ฐ”๊นฅ์˜ let(์ „์—ญ๋ณ€์ˆ˜)์™€ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์ด๊ณ 
    if๋ฌธ์ด ๋๋‚˜๋Š” ์‹œ์ ์—์„œ if๋ฌธ ๋‚ด let์˜ ์œ ํšจ๋ฒ”์œ„๋Š” ๋๋‚˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.


const

const ์„ ์–ธ์€ Constant(์ƒ์ˆ˜) ์ฆ‰, 'ํ•ญ์ƒ ๊ฐ™์€ ์ˆ˜'๋ฅผ ๋งํ•œ๋‹ค.
๋ธ”๋ก ๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„(Block-Level Scope) ์ ์šฉ, ์„ ์–ธ๊ณผ ๋™์‹œ์— ๊ฐ’์„ ๋Œ€์ž…(์ดˆ๊ธฐํ™”)ํ•ด์ค˜์•ผ ํ•œ๋‹ค. ๊ฐ’ ์žฌํ• ๋‹น, ์žฌ์„ ์–ธ์ด ๋ถˆ๊ฐ€ํ•˜๋‹ค. let๊ณผ ๊ฐ™์ด ์žฌ์„ ์–ธ์‹œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

const constTest = 25; // ( ๋ณ€์ˆ˜ constTest ์„ ์–ธ, ๊ฐ’ = 25 ํ• ๋‹น )
contTest = 18;	      // ( ์˜ค๋ฅ˜ )
const constTest = 30; // ( Uncaught SyntaxError: Identifier 'constTest' has already been declared )
console.log(constTest);

if๋ฌธ ์˜ˆ์‹œ

const constTest = 30;     // (๋ณ€์ˆ˜ constTest ์„ ์–ธ, ๊ฐ’ = 30 ํ• ๋‹น )
console.log(constTest);   // 30
if(true) {
  const constTest = 300;  // ( 'if ๋ธ”๋Ÿญ ๋‚ด' ์ง€์—ญ๋ณ€์ˆ˜ constTest ์„ ์–ธ, ๊ฐ’ = 100 ํ• ๋‹น )
  console.log(constTest); // 300
}
console.log(constTest);   // 30


const๋กœ ์„ ์–ธ ๋œ ๋ณ€์ˆ˜์— ์žฌ์„ ์–ธ๊ณผ ์žฌํ• ๋‹น์€ ๋ถˆ๊ฐ€๋Šฅํ•˜์ง€๋งŒ,
const์— ํ• ๋‹น ๋œ ๊ฐ์ฒด์˜ ๋‚ด์šฉ(ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€, ์‚ญ์ œ, ๊ฐ’์˜ ๋ณ€ํ™”)์€ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.

const Object = {
name1: "coffee",
name2: "and",
name3: "frim",
name4: "DunkinDonuts"
};
Object.name3 = "donuts";  // ( const๋กœ ์„ ์–ธ ๋œ Object ๋ณ€์ˆ˜์˜ ๊ฐ์ฒด name3์˜ ๋‚ด์šฉ ๋ณ€๊ฒฝ )
console.log(Object); 	  // ( name1: "coffee", name2: "and", name3: "donuts", name4: "DunkinDonuts" )



ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด(Template Literal)์ด๋ž€?

javascript์—์„œ ๋ฌธ์ž์—ด์„ ์ž…๋ ฅํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ, ES6 ์ด์ „์—๋Š” var str = 'Hello ES6!' ์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ–ˆ์œผ๋‚˜ ES6์—์„œ๋Š” ๋ฐฑํ‹ฑ(Back-tick)์ด๋ผ๋Š” ๊ธฐํ˜ธ (`)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•œ๋‹ค.

ES6 ์ด์ „์˜ ๋ฌธ์ž์—ด ์„ ์–ธ ๋ฐฉ์‹์˜ ๋ฌธ์ œ์ 

''๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธด ๋ฌธ์ž์—ด์„ ์„ ์–ธ ์‹œ ์ž๋™์œผ๋กœ ๊ฐœํ–‰์ด ๋˜์ง€ ์•Š์•„ \n (line breaker)๋ฅผ ์ค‘๊ฐ„ ์ค‘๊ฐ„ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฌธ์žฅ์ด ๊ธธ์–ด์งˆ ์ˆ˜๋ก + ์™€ \n์„ ๊ณ„์† ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ–ˆ๋‹ค.

var a = 20;
var b = 5;
var c = "javascript";

var str = "์ €๋Š” " + (a + b) + "์‚ด์ด๊ณ  " + c + "๋ฅผ ๋ฐฐ์šฐ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.";

console.log(str);   //์ €๋Š” 25์‚ด์ด๊ณ  javascript๋ฅผ ๋ฐฐ์šฐ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.

ES6 ์ดํ›„์˜ ๋ฌธ์ž์—ด ์„ ์–ธ ๋ฐฉ์‹

๋ฌธ์ž์—ด์„ ์„ ์–ธํ•  ๋•Œ์— +์™€ \n์„ ์ถ”๊ฐ€ํ•ด์ค„ ํ•„์š” ์—†์ด ๋ฐฑํ‹ฑ์œผ๋กœ ๋ฌถ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

let a = 20;
let b = 5;
let c = "javascript";

let str = `์ €๋Š” ${a+b}์‚ด์ด๊ณ  ${c}๋ฅผ ๋ฐฐ์šฐ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.`;

console.log(str);   //์ €๋Š” 25์‚ด์ด๊ณ  javascript๋ฅผ ๋ฐฐ์šฐ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.





๊ฒฐ๋ก 

  1. ๋” ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•˜์ž.
  2. const(์ƒ์ˆ˜) ์ตœ์šฐ์„ ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์ž.
  3. let์€ ๋ณ€์ˆ˜ ๊ฐ’ ์žฌํ™œ๋‹น ์‹œ์— ์‚ฌ์šฉํ•˜์ž.
  4. var ์“ฐ๋Š” ์นœ๊ตฌ๊ฐ€ ์žˆ๋‹ค๋ฉด ์•Œ๋ ค์ฃผ๋„๋ก ํ•˜์ž.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ