โ 2009๋ ๋์ ํ์คํ๋ ES5 ์ดํ๋ก ์ธ์ด ๊ธฐ๋ฅ์ ๋ํ ์ฒซ ์ ๋ฐ์ดํธ
- const and let
- const
- ๋ณ์ ์ ์ธ์ ์ํ ES6์ ์๋ก์ด ํค์๋
- ์ฌ์ฉ๋๋ฉด ๋ณ์๋ฅผ ๋ค์ ํ ๋นํ ์ ์์
- ๊ฐ์ฒด์ ํจ๊ป ์ฌ์ฉํ ๋๋ฅผ ์ ์ธํ๊ณ ๋ ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๋ณ์!
- let
- ์๋ก์ด ๊ฐ์ ๊ฐ์ง ์๋ ์๊ณ ์ฌํ ๋นํ ์๋ ์์
- ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ณ์๊ฐ ์์ฑ
- const
- ํ์ดํ ํจ์
- map, filter, reduce ๋ฑ ๋ด์ฅ ํจ์์ ํจ๊ป ์ฌ์ฉ ๊ฐ๋ฅ
- ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด
- ๋ฐฑํฑ์ ์ฌ์ฉํด ๋ฌธ์์ด ๋ด์์ ๋ณ์ ์ฌ์ฉ ๊ฐ๋ฅ
- ๊ธฐ๋ณธ ๋งค๊ฐ ๋ณ์
- ๋งค๊ฐ ๋ณ์๋ฅผ ์ฐ์ง ์์ ๊ฒฝ์ฐ ๋งค๊ฐ ๋ณ์๊ฐ ์ด๋ฏธ ๊ธฐ๋ณธ๊ฐ์ ์ ์๋์ด ์์
- ๋ฐ๋ผ์ ์ ์๋์ง ์์ ์ค๋ฅ๊ฐ ๋ฐํ๋์ง ์์
- ๋ฐฐ์ด ๋ฐ ๊ฐ์ฒด ๋น๊ตฌ์กฐํ
- ๋น๊ตฌ์กฐํ๋ก ๋ฐฐ์ด ๋๋ ๊ฐ์ฒด์ ๊ฐ์ ์ ๋ณ์์ ๋ ์ฝ๊ฒ ํ ๋น ๊ฐ๋ฅ
- import and export
- Promise
- ๋น๋๊ธฐ ์ฝ๋ ์ฐ๋ ๋ฐฉ๋ฒ
- api์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋ ์คํํ๋๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ํจ์๋ฅผ ๊ฐ์ง๊ณ ์์ ๋ ์ฌ์ฉ ๊ฐ๋ฅ
- ๋๋จธ์ง ๋งค๊ฐ ๋ณ์ ๋ฐ ํ์ฐ ์ฐ์ฐ์
- ๋๋จธ์ง ๋งค๊ฐ ๋ณ์๋ ๋ฐฐ์ด์ ์ธ์๋ฅผ ๊ฐ์ ธ์ค๊ณ ์ ๋ฐฐ์ด์ ๋ฐํํ๋๋ฐ ์ฌ์ฉ
- ํ์ฐ ์ฐ์ฐ์๋ ๋๋จธ์ง ๋งค๊ฐ๋ณ์์ ๊ตฌ๋ฌธ์ด ๋์ผํ์ง๋ง ์ธ์ ๋ฟ๋ง ์๋๋ผ ๋ฐฐ์ด ์์ฒด๋ฅผ ๊ฐ์ง
- Class
- OOP์ ํต์ฌ
- ์ฝ๋๋ฅผ ๋์ฑ ์์ ํ๊ฒ ์บก์ํ ๊ฐ๋ฅ
- ์ฝ๋ ๊ตฌ์กฐ๊ฐ ์ข์์ง๊ณ ๋ฐฉํฅ ์ ์ง
ํด๋ฆฌํ
ํน์ ๊ธฐ๋ฅ์ด ๋ธ๋ผ์ฐ์ ์์ ์ง์๋์ง ์์ ๋ ๊ธฐ๋ฅ์ ๋์ ํ ์ ์๋ ์ฝ๋๋ฅผ ์ ๊ณตํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โ ES6 ์ด์์ ๊ธฐ๋ฅ์ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ์์๋ ์ต์ ๊ธฐ๋ฅ ์ฌ์ฉ ๊ฐ๋ฅ
โ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ถ๊ฐ๋๋ ์ฝ๋๋ผ ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์์
โ ์ฌ์ฉํ์ง ์๋๊ฑฐ ์ถ์ฒ
ํธ๋์คํ์ผ
์ต์ JS ์ฝ๋๋ฅผ ํ์ ํธํ๋๋ ๋ฒ์ ์ ์ฝ๋๋ก ๋ณํํ๋ ์์
โ ์ด๋ฅผ ์ํด Babel ๊ฐ์ ํธ๋์ค ํ์ผ๋ฌ ๋๊ตฌ ์ฌ์ฉ
โ Babel?
- ES6 ์ด์์ ์ฝ๋๋ฅผ ES5 ๋ฒ์ ์ ์ฝ๋๋ก ๋ณํํด์ค
- ํ๋ก์ ํธ์ babel ์ค์ ํ ์ด๋ฅผ ํตํด ์ฝ๋ ๋ณํ
- webpack ๊ฐ์ ๋ฒ๋ค๋ฌ์ ํจ๊ป ์ฌ์ฉํด ๋น๋ ํ๋ก์ธ์ค์์ ์๋์ผ๋ก ํธ๋์คํ์ผ๋ง ๊ฐ๋ฅ
โ Babel ์ฌ์ฉ ์ ๋ณํ๋ ์ฝ๋์ ์ฑ๋ฅ์ด ์๋ณธ ์ฝ๋๋ณด๋ค ๋ฎ์ ์ ์์
โ ํน์ ES6 ๊ธฐ๋ฅ์ ์ด๊ฑธ๋ก ์ง์๋์ง ์์ผ๋ฏ๋ก ํด๋ฆฌํ๊ณผ ํจ๊ป ์ฌ์ฉํ๋ ๊ฒ์ด ํ์ํ ์ง๋
- ์ค๋ณต ์ ์ธ๊ณผ ์ฌํ ๋น ๋ชจ๋ ๊ฐ๋ฅ
- ๋ง์ง๋ง์ ํ ๋น๋ ๊ฐ์ด ์ต์ข ์ผ๋ก ๋ณ์์ ๊ฐ์ผ๋ก ์ ์ฅ๋จ
- ํจ์ ๋จ์ ์ค์ฝํ
- var๊ฐ ์ ์ธ๋ ํจ์ ๋ด๋ถ์ ์ด๋์๋ ์ฐธ์กฐ ๊ฐ๋ฅ, ์ธ๋ถ๋ก๋ ์ฐธ์กฐ ๋ถ๊ฐ๋ฅ
- ํธ์ด์คํ ๋ฐ์ โ ๋ค์ ์ ์ธ๋ ๋ณ์๊ฐ ์์ ์ฐธ์กฐ๋์ด๋ ์๋ฌ๊ฐ ์๋ undefined ํธ์ถ
- ์ค๋ณต ์ ์ธ ํ์ฉ x
- ์ค๋ณต ์ ์ธํ ๊ฒฝ์ฐ SyntaxError ๋ฐ์
- ๋ธ๋ก ๋จ์ ์ค์ฝํ
- { } ๋ธ๋ก ๋ด๋ถ์์ ์ ์ธ๋ ๋ณ์๋ ์ธ๋ถ์์ ์ฐธ์กฐ x
- ํธ์ด์คํ ๋ฐ์ (๋ค๋ฅด๊ฒ ์๋) โ ๋ค์ ์ ์ธ๋ ๋ณ์๊ฐ ์์ ์ฐธ์กฐํ๋ ค๊ณ ํ๋ฉด ์๋ฌ ๋ฐ์
- ํธ์ด์คํ ์ ๋ฐ์ํ์ง๋ง ๊ฐ์ ์ฐธ์กฐํ ์ ์์ด์ ๋์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋ณด์
- ์ค๋ณต ์ ์ธ ํ์ฉ x
- ์ฌํ ๋น x
- ๋ธ๋ก ๋จ์ ์ค์ฝํ
- { } ๋ธ๋ก ๋ด๋ถ์์ ์ ์ธ๋ ๋ณ์๋ ์ธ๋ถ์์ ์ฐธ์กฐ x
- ํธ์ด์คํ ๋ฐ์ (๋ค๋ฅด๊ฒ ์๋) โ ๋ค์ ์ ์ธ๋ ๋ณ์๊ฐ ์์ ์ฐธ์กฐํ๋ ค๊ณ ํ๋ฉด ์๋ฌ ๋ฐ์
- ํธ์ด์คํ ์ ๋ฐ์ํ์ง๋ง ๊ฐ์ ์ฐธ์กฐํ ์ ์์ด์ ๋์ํ์ง ์๋ ๊ฒ์ฒ๋ผ ๋ณด์
Temporal Dead Zone = ์ผ์์ ์ฌ๊ฐ ์ง๋
const dog = "๋๋ฃฝ"
console.log(dog)
console.log(dog)
const dog = "๋๋ฃฝ"
โ TDZ๋ ๋ณ์ ์ ์ธ ๋ฐ ์ด๊ธฐํ ์ ์ฌ์ด์ ์ฌ๊ฐ์ง๋
โ ๋ณ์ ์ ์ธ ๋ฐ ์ด๊ธฐํ ํ๊ธฐ ์ ์ ์ฌ์ฉํ๊ฒ ๋๋ฉด TDZ ์ํ์์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ผ ReferenceError๊ฐ ๋ธ
์ํฅ์ ๋ฏธ์น๋ ๊ฒ
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)
๊ต์ค
- ์ด๋ฆ
- ํ์ ๋ชฉ๋ก
- ์ ์๋
- ์ต๋ ์์ฉ ์ธ์
- ๊ณผ๋ชฉ
- ํ์ ์ถ๊ฐ
- ํ์ ์ ๊ฑฐ
- ํ์ ๋ชฉ๋ก ์กฐํ
- ๊ต์ค ์ ๋ณด ์กฐํ
- ์์ ์์