Skip to content

Latest commit

ย 

History

History
222 lines (152 loc) ยท 6.26 KB

Interview_practice_6.md

File metadata and controls

222 lines (152 loc) ยท 6.26 KB

JavaScript ES6 ๋ณ€๊ฒฝ๋œ ๋‚ด์šฉ

ES6?

๐Ÿ’ก ์ƒˆ๋กœ์šด ์–ธ์–ด ๊ธฐ๋Šฅ์ด ํฌํ•จ๋œ ์ฃผ์š” ์—…๋ฐ์ดํŠธ

โ†’ 2009๋…„๋„์— ํ‘œ์ค€ํ™”๋œ ES5 ์ดํ›„๋กœ ์–ธ์–ด ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์ฒซ ์—…๋ฐ์ดํŠธ

ES6 ๊ธฐ๋Šฅ

  • const and let
    • const
      • ๋ณ€์ˆ˜ ์„ ์–ธ์„ ์œ„ํ•œ ES6์˜ ์ƒˆ๋กœ์šด ํ‚ค์›Œ๋“œ
      • ์‚ฌ์šฉ๋˜๋ฉด ๋ณ€์ˆ˜๋ฅผ ๋‹ค์‹œ ํ• ๋‹นํ•  ์ˆ˜ ์—†์Œ
      • ๊ฐ์ฒด์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ๋•Œ๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜!
    • let
      • ์ƒˆ๋กœ์šด ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜๋„ ์žˆ๊ณ  ์žฌํ• ๋‹นํ•  ์ˆ˜๋„ ์žˆ์Œ
      • ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜๊ฐ€ ์ƒ์„ฑ
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
    • map, filter, reduce ๋“ฑ ๋‚ด์žฅ ํ•จ์ˆ˜์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด
    • ๋ฐฑํ‹ฑ์„ ์‚ฌ์šฉํ•ด ๋ฌธ์ž์—ด ๋‚ด์—์„œ ๋ณ€์ˆ˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ๊ธฐ๋ณธ ๋งค๊ฐœ ๋ณ€์ˆ˜
    • ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์“ฐ์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋งค๊ฐœ ๋ณ€์ˆ˜๊ฐ€ ์ด๋ฏธ ๊ธฐ๋ณธ๊ฐ’์— ์ •์˜๋˜์–ด ์žˆ์Œ
    • ๋”ฐ๋ผ์„œ ์ •์˜๋˜์ง€ ์•Š์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐ˜ํ™˜๋˜์ง€ ์•Š์Œ
  • ๋ฐฐ์—ด ๋ฐ ๊ฐ์ฒด ๋น„๊ตฌ์กฐํ™”
    • ๋น„๊ตฌ์กฐํ™”๋กœ ๋ฐฐ์—ด ๋˜๋Š” ๊ฐ์ฒด์˜ ๊ฐ’์„ ์ƒˆ ๋ณ€์ˆ˜์— ๋” ์‰ฝ๊ฒŒ ํ• ๋‹น ๊ฐ€๋Šฅ
  • import and export
  • Promise
    • ๋น„๋™๊ธฐ ์ฝ”๋“œ ์“ฐ๋Š” ๋ฐฉ๋ฒ•
    • api์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์‹คํ–‰ํ•˜๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋Š” ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๋•Œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ๋‚˜๋จธ์ง€ ๋งค๊ฐœ ๋ณ€์ˆ˜ ๋ฐ ํ™•์‚ฐ ์—ฐ์‚ฐ์ž
    • ๋‚˜๋จธ์ง€ ๋งค๊ฐœ ๋ณ€์ˆ˜๋Š” ๋ฐฐ์—ด์˜ ์ธ์ˆ˜๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ƒˆ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ
    • ํ™•์‚ฐ ์—ฐ์‚ฐ์ž๋Š” ๋‚˜๋จธ์ง€ ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ๊ตฌ๋ฌธ์ด ๋™์ผํ•˜์ง€๋งŒ ์ธ์ˆ˜ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ฐฐ์—ด ์ž์ฒด๋ฅผ ๊ฐ€์ง
  • Class
    • OOP์˜ ํ•ต์‹ฌ
    • ์ฝ”๋“œ๋ฅผ ๋”์šฑ ์•ˆ์ „ํ•˜๊ฒŒ ์บก์Šํ™” ๊ฐ€๋Šฅ
    • ์ฝ”๋“œ ๊ตฌ์กฐ๊ฐ€ ์ข‹์•„์ง€๊ณ  ๋ฐฉํ–ฅ ์œ ์ง€

ES6 ๋ฒ„์ „ ํ˜ธํ™˜์ด ์•ˆ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

ํด๋ฆฌํ•„

ํŠน์ • ๊ธฐ๋Šฅ์ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋˜์ง€ ์•Š์„ ๋•Œ ๊ธฐ๋Šฅ์„ ๋Œ€์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

โ†’ ES6 ์ด์ƒ์˜ ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ์ตœ์‹  ๊ธฐ๋Šฅ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

โ†’ ๋ชจ๋“  ์‚ฌ์šฉ์ž์—๊ฒŒ ์ถ”๊ฐ€๋˜๋Š” ์ฝ”๋“œ๋ผ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์Œ

โ†’ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฑฐ ์ถ”์ฒœ

ํŠธ๋žœ์ŠคํŒŒ์ผ

์ตœ์‹  JS ์ฝ”๋“œ๋ฅผ ํ•˜์œ„ ํ˜ธํ™˜๋˜๋Š” ๋ฒ„์ „์˜ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์ž‘์—…

โ†’ ์ด๋ฅผ ์œ„ํ•ด Babel ๊ฐ™์€ ํŠธ๋žœ์Šค ํŒŒ์ผ๋Ÿฌ ๋„๊ตฌ ์‚ฌ์šฉ

โ†’ Babel?

  • ES6 ์ด์ƒ์˜ ์ฝ”๋“œ๋ฅผ ES5 ๋ฒ„์ „์˜ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ด์คŒ
  • ํ”„๋กœ์ ํŠธ์— babel ์„ค์ • ํ›„ ์ด๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ๋ณ€ํ™˜
  • webpack ๊ฐ™์€ ๋ฒˆ๋“ค๋Ÿฌ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ด ๋นŒ๋“œ ํ”„๋กœ์„ธ์Šค์—์„œ ์ž๋™์œผ๋กœ ํŠธ๋žœ์ŠคํŒŒ์ผ๋ง ๊ฐ€๋Šฅ

โ†’ Babel ์‚ฌ์šฉ ์‹œ ๋ณ€ํ™˜๋œ ์ฝ”๋“œ์˜ ์„ฑ๋Šฅ์ด ์›๋ณธ ์ฝ”๋“œ๋ณด๋‹ค ๋‚ฎ์„ ์ˆ˜ ์žˆ์Œ

โ†’ ํŠน์ • ES6 ๊ธฐ๋Šฅ์€ ์ด๊ฑธ๋กœ ์ง€์›๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํด๋ฆฌํ•„๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ•„์š”ํ• ์ง€๋„

var, let, const ์ฐจ์ด์ 

var

  • ์ค‘๋ณต ์„ ์–ธ๊ณผ ์žฌํ• ๋‹น ๋ชจ๋‘ ๊ฐ€๋Šฅ
  • ๋งˆ์ง€๋ง‰์— ํ• ๋‹น๋œ ๊ฐ’์ด ์ตœ์ข…์œผ๋กœ ๋ณ€์ˆ˜์˜ ๊ฐ’์œผ๋กœ ์ €์žฅ๋จ
  • ํ•จ์ˆ˜ ๋‹จ์œ„ ์Šค์ฝ”ํ”„
  • var๊ฐ€ ์„ ์–ธ๋œ ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ ์–ด๋””์„œ๋“  ์ฐธ์กฐ ๊ฐ€๋Šฅ, ์™ธ๋ถ€๋กœ๋Š” ์ฐธ์กฐ ๋ถˆ๊ฐ€๋Šฅ
  • ํ˜ธ์ด์ŠคํŒ… ๋ฐœ์ƒ โ†’ ๋’ค์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜๊ฐ€ ์•ž์— ์ฐธ์กฐ๋˜์–ด๋„ ์—๋Ÿฌ๊ฐ€ ์•„๋‹Œ undefined ํ˜ธ์ถœ

let

  • ์ค‘๋ณต ์„ ์–ธ ํ—ˆ์šฉ x
  • ์ค‘๋ณต ์„ ์–ธํ•  ๊ฒฝ์šฐ SyntaxError ๋ฐœ์ƒ
  • ๋ธ”๋ก ๋‹จ์œ„ ์Šค์ฝ”ํ”„
  • { } ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์™ธ๋ถ€์—์„œ ์ฐธ์กฐ x
  • ํ˜ธ์ด์ŠคํŒ… ๋ฐœ์ƒ (๋‹ค๋ฅด๊ฒŒ ์ž‘๋™) โ†’ ๋’ค์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜๊ฐ€ ์•ž์— ์ฐธ์กฐํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์—๋Ÿฌ ๋ฐœ์ƒ
  • ํ˜ธ์ด์ŠคํŒ…์„ ๋ฐœ์ƒํ•˜์ง€๋งŒ ๊ฐ’์„ ์ฐธ์กฐํ•  ์ˆ˜ ์—†์–ด์„œ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž„

const

  • ์ค‘๋ณต ์„ ์–ธ ํ—ˆ์šฉ x
  • ์žฌํ• ๋‹น x
  • ๋ธ”๋ก ๋‹จ์œ„ ์Šค์ฝ”ํ”„
  • { } ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์™ธ๋ถ€์—์„œ ์ฐธ์กฐ x
  • ํ˜ธ์ด์ŠคํŒ… ๋ฐœ์ƒ (๋‹ค๋ฅด๊ฒŒ ์ž‘๋™) โ†’ ๋’ค์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜๊ฐ€ ์•ž์— ์ฐธ์กฐํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์—๋Ÿฌ ๋ฐœ์ƒ
  • ํ˜ธ์ด์ŠคํŒ…์„ ๋ฐœ์ƒํ•˜์ง€๋งŒ ๊ฐ’์„ ์ฐธ์กฐํ•  ์ˆ˜ ์—†์–ด์„œ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ž„

var, let์˜ ๋ฒ”์œ„ ์ฐจ์ด

๐Ÿ’ก **var**๋Š” ****๋ณ€์ˆ˜๋ฅผ ๋ธ”๋ก์„ ๊ณ ๋ คํ•˜์ง€ ์•Š๊ณ  ํ˜„์žฌ ํ•จ์ˆ˜ ์–ด๋””์—์„œ๋‚˜ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ **let**์€ ****๋ธ”๋ก ๋ช…๋ น๋ฌธ์ด๋‚˜ let์„ ์‚ฌ์šฉํ•œ ํ‘œํ˜„์‹ ๋‚ด๋กœ ๋ฒ”์œ„๊ฐ€ ์žฌํ•œ๋˜๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ

TDZ

TDZ๋ž€?

Temporal Dead Zone = ์ผ์‹œ์  ์‚ฌ๊ฐ ์ง€๋Œ€

const dog = "๋ˆ„๋ฃฝ"
console.log(dog)
console.log(dog)
const dog = "๋ˆ„๋ฃฝ"

โ‡’ TDZ๋ž€ ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐ ์ดˆ๊ธฐํ™” ์ „ ์‚ฌ์ด์˜ ์‚ฌ๊ฐ์ง€๋Œ€

โ‡’ ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐ ์ดˆ๊ธฐํ™” ํ•˜๊ธฐ ์ „์— ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด TDZ ์ƒํƒœ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋ผ ReferenceError๊ฐ€ ๋œธ

TDZ์˜ ์˜ํ–ฅ

์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๊ฒƒ

const, let, class โ†’ ์ˆœ์„œ ์ฃผ์˜

TDZ๋Š” ์„ ์–ธํ•˜๊ธฐ ์ „์— ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š์Œ

์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ๊ฒƒ

var, function, import

var๋Š” ์„ ์–ธ ์ „์—๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด ์ฝ”๋“œ๊ฐ€ ์—‰ํ‚ค๊ฑฐ๋‚˜ ์˜ค๋ฅ˜์˜ ์›์ธ์ด ๋  ์ˆ˜๋„.. ๋”ฐ๋ผ์„œ var๋Š” ํ”ผํ•˜๊ณ  let๊ณผ const ์‚ฌ์šฉ์„ ์ฃผ๋กœ ํ•˜๋Š”๊ฑธ๋กœ!

ํ˜ธ์ด์ŠคํŒ…

ํ˜ธ์ด์ŠคํŒ…?

๐Ÿ’ก ์ธํ„ฐํ”„๋ฆฌํ„ฐ๊ฐ€ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์„ ์–ธ ์ „์— ๋ฏธ๋ฆฌ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ์„ ์–ธ ์ˆœ์„œ์— ์ƒ๊ด€ ์—†์ด ์ˆœ์„œ๊ฐ€ ๋Œ์–ด์˜ฌ๋ ค์ง„ ๋“ฏํ•œ ํ˜„์ƒ

  • var๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜์˜ ๊ฒฝ์šฐ ํ˜ธ์ด์ŠคํŒ… ์‹œ undefined๋กœ ๋ณ€์ˆ˜ ์ดˆ๊ธฐํ™”
  • let๊ณผ const๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜์˜ ๊ฒฝ์šฐ ํ˜ธ์ด์ŠคํŒ… ์‹œ ๋ณ€์ˆ˜ ์ดˆ๊ธฐํ™” x

ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…

Nurung();

function Nurung() {
	document.writeln("Nurung!");
}

Nurung();

ํ˜ธ์ด์ŠคํŒ… ๊ฐœ๋… ์—†์ด ์ƒ๊ฐํ•ด๋ณด๋ฉด ์‹คํ–‰๋˜์ง€ ์•Š์•„์•ผ ํ•˜์ง€๋งŒ,,

JS ํ•จ์ˆ˜๋Š” Hoistingํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ตœ์ƒ๋‹จ์˜ Nurung()์ฝ”๋“œ๋„ ์ •์ƒ ์ž‘๋™

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

var๋กœ ์„ ์–ธ

console.log(nurung);
var nurung = "nurungss";
console.log(nurung);

โ†’ undefined ์ถœ๋ ฅ

const, let์œผ๋กœ ์„ ์–ธ

console.log(nurung);
const nurung = "nurungss";

console.log(nurung);
let nurung = "nurungss";

โ†’ ReferenceError

์—๋Ÿฌ๋Š” ๋ฐœ์ƒํ–ˆ์ง€๋งŒ ํ˜ธ์ด์ŠคํŒ…์ด ์•ˆ๋˜๋Š”๊ฒŒ ์•„๋‹˜.. let, const๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ํ˜ธ์ด์ŠคํŒ… ๋˜์—ˆ์ง€๋งŒ ์ ‘๊ทผ๋งŒ ํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ๋œ ๊ฒƒ!! (TDZ)

ํ˜„์žฌ ์žˆ๋Š” ๊ณณ์„ ๊ฐ์ฒด๋กœ ์ถ”์ƒํ™”ํ•˜๋ฉด?

๊ต์‹ค

๊ฐ์ฒด์˜ ์†์„ฑ

  • ์ด๋ฆ„
  • ํ•™์ƒ ๋ชฉ๋ก
  • ์„ ์ƒ๋‹˜
  • ์ตœ๋Œ€ ์ˆ˜์šฉ ์ธ์›
  • ๊ณผ๋ชฉ

๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ

  • ํ•™์ƒ ์ถ”๊ฐ€
  • ํ•™์ƒ ์ œ๊ฑฐ
  • ํ•™์ƒ ๋ชฉ๋ก ์กฐํšŒ
  • ๊ต์‹ค ์ •๋ณด ์กฐํšŒ
  • ์ˆ˜์—… ์‹œ์ž‘