๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์๊ฐํฉ๋๋ค. ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ ์ฐจ ํ๋์ ์ด๊ณ ์ค์ฉ์ ์ผ๋ก ๋ณํํ๊ณ ์๋ ECMAScript ์ ์ ์ํ๋ ๋ฐฉ๋ฒ์ ์๋ ค์ค๋๋ค.
ํ์ฌ ๊ธ์ ์ฐ๊ณ ์๋ ์์ ์ธ 2020๋ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ด๋ฏธ ํ๋ถํ ํ์ค ๋ด์ฅ ๊ฐ์ฒด(Standard built-in objects)๋ค์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋๋ถ์ ์ฐ๋ฆฌ๋ ๋ ์ด์ ์ ํต์ ์ด๊ณ ๊ฑฐ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(lodash ์ ๊ฐ์)๋ค์ ์ฌ์ฉํ ํ์์ฑ์ด ์ค์ด๋ค๊ณ ์์ต๋๋ค.
์ฐธ๊ณ : ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ES6+ ํ๊ฒฝ์์ ์งํ๋ฉ๋๋ค.
- ๊ฐ๋ฐ์์ ์ค์ ์ค์ด๊ธฐ
- ์๋์น ์์ ๋์ ๋ฐฉ์ง
- ๊ฐ๊ฒฐํ๊ณ ์ฝ๊ธฐ ์ฌ์ด ์ฝ๋ ์์ฑ
- ๋จ์ํจ
- ๊ฐ๋ฒผ์
- ๋ณธ์ง
- MDN ๋ฌธ์
- TC39
- ๋ณต์กํจ
- ๋ฌด๊ฑฐ์
- ์ฅํฉํจ (Verbose)
- ๋ถํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ
๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋ ๊ฐ๋ ๋ค์ ๋ณธ์ง์ ์ต๋ ํ๋ ๋ฌธ์ฅ ์ด๋ด๋ก ๊ฐ๋จ ๋ช ๋ฃํ๊ฒ ์ค๋ช ํฉ๋๋ค. ๋ณธ์ง์ ๊ฟฐ๋ซ์ผ๋ฉด ๊ธธ๊ฒ ์ค๋ช ํ ํ์๋ ์์ต๋๋ค.
๋ธ๋ก ๋ ๋ฒจ ์ ํจ ๋ฒ์๋ฅผ ๊ฐ๋ ์ง์ญ ๋ณ์๋ฅผ ์ ์ธํฉ๋๋ค.
let
์ผ๋ก ์ ์ธํ ๋ณ์๋ ์ฌ์ ์ธํ ์ ์์ต๋๋ค.
let
์ผ๋ก ์ ์ธํ ๋ณ์๋ ๊ฐ์ ์ฌํ ๋น ํ ์ ์์ต๋๋ค.
let
์ ๋ธ๋ก ๋ ๋ฒจ ์ ํจ ๋ฒ์๋ฅผ ๊ฐ์ง๋๋ค. ๋ธ๋ก ๋ ๋ฒจ์ ๋ชจ๋ ์ฝ๋ ๋ธ๋ก์ ์๋ฏธํฉ๋๋ค. ์๋ฅผ ๋ค์ด ํจ์
, if
, switch
, for
, while
, try-catch
, ... ๋ด๋ถ์์ ์ ์ธ๋ let
๋ณ์๋ ์ธ๋ถ์์ ์ ๊ทผํ ์ ์์ต๋๋ค.
let
์ผ๋ก ์ ์ธ๋ ๋ณ์๋ค์ ์ฝ๋๋ฅผ ์ฝ์ ๋ ๋ณํจ(mutable
)์ ๊ธฐ๋ํ๊ฒ ๋ง๋ญ๋๋ค. ์ด๋ ์ฝ๋ ๋ฆฌ๋ทฐ์ด๊ฐ ํด๋น ๋ณ์๊ฐ ์ธ์ ๋ฐ๋๋์ง ๊ณ์ํด์ ์ถ์ ํ๊ฒ ๋ง๋ญ๋๋ค. ์ด๋ ๊ต์ฅํ ํผ๊ณคํ ์ผ์
๋๋ค. ๋ฐ๋ผ์ ๋ณํ์ง ์๋ ๋ณ์๋ค์ ์ธ์ ๋ ์์(const
)๋ก ์ ์ธํ์ธ์.
๐์๋๋ฆฌ์ค: let
์ด var
๊ณผ ๋ค๋ฅด๊ฒ ์ฌ์ ์ธ ํ ์ ์๋ค๋ ๊ฑธ ์ฆ๋ช
ํ์ธ์.
var a
var a // ์ฌ์ ์ธ ํต๊ณผ
let b
let b // -> SyntaxError: Identifier 'b' has already been declared ๐
๐์๋๋ฆฌ์ค: let
์ด const
์ ๋ค๋ฅด๊ฒ ์ฌํ ๋น ๊ฐ๋ฅํ ๊ฑธ ์ฆ๋ช
ํ์ธ์.
let a = 1
a = 2 // ์ฌํ ๋น ๊ฐ๋ฅ ๐
const b = 1
b = 2 // -> TypeError: Assignment to constant variable.
๐์๋๋ฆฌ์ค: let
์ด var
๊ณผ ๋ค๋ฅด๊ฒ ๋ธ๋ก ์ ํจ ๋ฒ์๋ฅผ ๊ฐ์ง๋๊ฑธ ์ฆ๋ช
ํ์ธ์.
if (true) {
var a = 1
let b = 1
}
console.log(a) // -> 1
console.log(b) // -> ReferenceError: b is not defined ๐
๋ธ๋ก ๋ ๋ฒจ ์ ํจ ๋ฒ์๋ฅผ ๊ฐ๋ ์์๋ฅผ ์ ์ธํฉ๋๋ค.
const
๋ ์ ์ธ๊ณผ ๋์์ ํ ๋นํด์ผ ํฉ๋๋ค. ์ฆ ์ธ์ ๋ ์ด๊น๊ฐ์ ํ์๋ก ํฉ๋๋ค.
const
๋ ์ฌํ ๋น ํ ์ ์์ต๋๋ค.
const
๋ let
๊ณผ ๋์ผํ๊ฒ ๋ธ๋ก ๋ ๋ฒจ ์ ํจ ๋ฒ์๋ฅผ ๊ฐ์ง๋๋ค.
๐์๋๋ฆฌ์ค: const
๊ฐ ์ ์ธ๊ณผ ๋์์ ํ ๋นํด์ผ ํจ์ ์ฆ๋ช
ํ์ธ์.
const a = 1
const b // -> SyntaxError: Missing initializer in const declaration
๐์๋๋ฆฌ์ค: const
๊ฐ ์ฌํ ๋น ๋ถ๊ฐ๋ฅํจ์ ์ฆ๋ช
ํ์ธ์.
const a = 1
a = 2 // -> TypeError: Assignment to constant variable
๐์๋๋ฆฌ์ค: const
๊ฐ let
๊ณผ ๋์ผํ๊ฒ ๋ธ๋ก ๋ ๋ฒจ ์ ํจ ๋ฒ์๋ฅผ ๊ฐ์ง๋ ๊ฒ์ ์ฆ๋ช
ํ์ธ์.
if (true) {
var a = 1
const b = 1
}
console.log(a) // -> 1
console.log(b) // -> ReferenceError: b is not defined ๐
Spread Syntax ๋ ํน์ ๊ฐ์ฒด ํน์ ๋ฐฐ์ด์ ๋๋จธ์ง ์์๋ค์ ์ด๋ค ๊ฐ์ฒด ํน์ ๋ฐฐ์ด ๋ฆฌํฐ๋ด์ ํ์ด ๋์ต๋๋ค.
Spread Syntax ๋ก ์๋ก์ด ๋ณ์๊ฐ ์ ์ธ๋์ง ์์ต๋๋ค.
๐ ์๋๋ฆฌ์ค: arr1
๊ณผ ๋๊ฐ์ arr2
๋ฅผ ๋ง๋์ธ์.
๐ ์กฐ๊ฑด: arr1
์ ๋ณํ์ด arr2
์ ์ํฅ์ ๋ฏธ์น์ง ์๊ฒ ํ์ธ์.
const arr1 = [1, 2, 3]
const arr2 = arr1 // arr2 ๋ arr1 ๋ฅผ ์ฐธ์กฐํฉ๋๋ค.
arr1.push(4)
console.log(arr1) // -> [ 1, 2, 3, 4 ]
console.log(arr2) // -> [ 1, 2, 3, 4 ] arr2 ๊น์ง ๋ณํ๋์ต๋๋ค. ๐
const arr1 = [1, 2, 3]
const arr2 = [...arr1] // arr1 ๋ฅผ ๊ตฌ์กฐ ๋ถํด์์ผ '์๋ก์ด' ๋ฐฐ์ด์ ๋ง๋ญ๋๋ค. ๐
arr1.push(4)
console.log(arr1) // -> [ 1, 2, 3, 4 ]
console.log(arr2) // -> [ 1, 2, 3 ] ๐
๐ ์๋๋ฆฌ์ค: ์ฃผ์ด์ง obj1
์ obj2
๋ฅผ ๋ณํฉํ์ธ์.
๐ ์กฐ๊ฑด1: ์ค๋ณต ํ๋๊ฐ ์๋ค๋ฉด obj2
์ ๊ฐ์ผ๋ก ๋ฎ์ด์์ฐ์ธ์.
๐ ์กฐ๊ฑด2: ์ฃผ์ด์ง ๊ฐ์ฒด๋ฅผ ๋ณํํ์ง ๋ง์ธ์.
const obj1 = { a: 1, b: 1 }
const obj2 = { b: 2, c: 2 }
// ๋์์ง ์์ต๋๋ค๋ง obj1 ์ด ์์ ๋ฉ๋๋ค. ๐
const merged = Object.assign(obj1, obj2)
const obj1 = { a: 1, b: 1 }
const obj2 = { b: 2, c: 2 }
// ๋ชจ๋ ์กฐ๊ฑด์ ๋ง์กฑํ๋ฉฐ ์ฌํํฉ๋๋ค! ๐
const merged = { ...obj1, ...obj2 }
๋ฐฐ์ด์ด๋ ๊ฐ์ฒด์ ์์ฑ์ ํด์ฒดํ์ฌ ๊ทธ ๊ฐ์ ๊ฐ๋ณ ๋ณ์์ ๋ด์ต๋๋ค.
๊ฐ์ฒด๋ฅผ ๊ตฌ์กฐ ๋ถํดํด๋ด ์๋ค.
๐ ์๋๋ฆฌ์ค: me
๊ฐ์ฒด๋ฅผ ์ถ๋ ฅํ์ธ์.
๐ ์กฐ๊ฑด: me.car
๊ฐ ์กด์ฌํ์ง ์์ผ๋ฉด ์์
์ ์ถ๋ ฅํ์ธ์.
const me = {
firstName: '๋น๊ทผ',
lastName: '์',
hobby: ['๐ณ', '๐', '๐', '๐ผ'],
location: '์ง๊ตฌ',
car: 'ํ
์ฌ๋ผ'
}
// ์ฝ... ๋ด ๋...!
console.log('์ด๋ฆ', me.lastName, me.firstName)
console.log('์ง์ญ', me.location)
console.log('์ทจ๋ฏธ', me.hobby)
// ๋ ์ฌํํ๊ฒ ์๋ ๊น์?
if (me.car) {
console.log('์๋์ฐจ', me.car)
} else {
console.log('์๋์ฐจ', '์์')
}
const me = {
firstName: '๋น๊ทผ',
lastName: '์',
hobby: ['๐ณ', '๐', '๐', '๐ผ'],
location: '์ง๊ตฌ',
car: 'ํ
์ฌ๋ผ'
}
const { firstName, lastName, hobby, location, car = '์์' } = me // ์ข์ต๋๋ค. ๐
console.log('์ด๋ฆ', lastName, firstName)
console.log('์ง์ญ', location)
console.log('์ทจ๋ฏธ', hobby)
console.log('์๋์ฐจ', car)
๋ฐฐ์ด์ ๊ตฌ์กฐ ๋ถํดํด๋ด ์๋ค.
๐ ์๋๋ฆฌ์ค: ๋ฐฐ์ด arr
์ ์ฒซ ๋ฒ์งธ์ ์ธ ๋ฒ์งธ ์์๋ฅผ ๊ฐ๊ฐ first
์ third
๋ณ์์ ํ ๋น ๋ฐ ์ ์ธํ์ธ์.
const arr = [1, 2, 3, 4]
const first = arr[0] // ์ข ๋ ์ฌํํ๊ฒ ์๋ ๊น์?
const third = arr[2] // ์ธ๋ฑ์ค๋ก ์ ๊ทผํ์ง ์์ผ๋ฉด์์
const arr = [1, 2, 3, 4]
const [first, , third] = arr // ์ข์ต๋๋ค. ๐
Rest Parameters ๋ ์ ํด์ง์ง ์์ ์ ๋งค๊ฐ๋ณ์๋ฅผ ์ค์ ๋ฐฐ์ด๋ก ๋ํ๋ผ ์ ์๊ฒ ํฉ๋๋ค.
๐ ์๋๋ฆฌ์ค: ๊ฐ์๊ฐ ์ ํด์ง์ง ์์ ๋งค๊ฐ๋ณ์๋ฅผ ์ ๋ ฅ ๋ฐ์ ์ด์ ์ด ํฉ์ ๊ตฌํ๋ ํจ์๋ฅผ ์์ฑํ์ธ์.
function sum (a, b, ... y, z) {
return a + b + ... + y + z
} // [a-z] ๊น์ง ์
๋ ฅ๋ฐ์ ์ ์์ต๋๋ค. ์ฆ ๋งค๊ฐ๋ณ์์ ๊ฐ์๊ฐ ์ ํด์ ธ ์์ต๋๋ค. ๐
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8)) // [i-z] ๊น์ง undefined, ๋๋ฌธ์ NaN ์ถ๋ ฅ ๐
function sum (...params) {
return params.reduce((prev, curr) => prev + curr)
} // ๋งค๊ฐ๋ณ์๊ฐ ๋ช ๊ฐ๋ ํฉ์ ์ ๊ตฌํฉ๋๋ค.
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) // -> 55 ๐
๐ ์๋๋ฆฌ์ค: ์ฒซ๋ฒ์งธ ๋งค๊ฐ๋ณ์์ ๋๋จธ์ง ๋งค๊ฐ๋ณ์๋ฅผ ๊ณฑํ ๋ฐฐ์ด์ ๋ฐํํ๋ ํจ์๋ฅผ ์์ฑํ์ธ์.
function multiply (multiplier, ...params) {
return params.map(param => multiplier * param)
}
console.log(multiply(5, 1, 2, 3, 4)) // -> [ 5, 10, 15, 20 ] ๐
arguments
๋ ์ ์ฌ ๋ฐฐ์ด์
๋๋ค. ๋๋ฌธ์ map, reduce, forEach
์ ๊ฐ์ ๋ฐฐ์ด ๋ฉ์๋๋ฅผ ํธ์ถ ํ ์ ์์ต๋๋ค.
function sum (a, b, c) {
// -> TypeError: arguments.reduce is not a function
return arguments.reduce((prev, curr) => prev + curr)
}
sum(1, 2, 3)
Rest Elements ๋ ๊ฐ์ฒด๋ ๋ฐฐ์ด์ ๋๋จธ์ง ์์๋ค์ ์ ์ธ๊ณผ ๋์์ ํ ๋นํฉ๋๋ค.
๋๋จธ์ง ์์์์ ๋ช ์ํ ๋ณ์๋ช ์ด ์ ์ธ๋๋ ํจ๊ณผ๋ฅผ ๊ฐ์ง๋ฉฐ ๊ตฌ์กฐ ๋ถํด ํ ๋น๊ณผ ํจ๊ป ์ฌ์ฉ ์ ๋งจ ๋ง์ง๋ง์ ํ ๋ฒ๋ง ์์นํ ์ ์์ต๋๋ค.
๐ ์๋๋ฆฌ์ค: arr
๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ์์๋ฅผ first
์ ํ ๋นํ๊ณ ๋๋จธ์ง ์์๋ฅผ rest
์ ํ์ด ๋ฃ์ผ์ธ์.
const arr = [1, 2, 3, 4, 5]
const [first, ...rest] = arr
console.log(first) // -> 1
console.log(rest) // -> [ 2, 3, 4, 5 ] ๐
๐ ์๋๋ฆฌ์ค: me
๊ฐ์ฒด์ name
ํ๋๋ง name
์ ํ ๋นํ๊ณ ๋๋จธ์ง ์์๋ฅผ rest
์ ํ์ด ๋ฃ์ผ์ธ์.
const me = {
name: '์๋น๊ทผ',
hobby: '์ฐ์ฑ
',
location: 'earth'
}
// ๋ ์ฌํํ๊ฒ ์๋ ๊น์?
const name = me.name
const rest = {
hobby: me.hobby,
location: me.location
}
const me = {
name: '์๋น๊ทผ',
hobby: '์ฐ์ฑ
',
location: 'earth'
}
const { name, ...rest } = me // ๐
Default Parameter ๋ ๋งค๊ฐ๋ณ์์ ๊ธฐ๋ณธ ๊ฐ์ ํ ๋นํฉ๋๋ค.
๐ ์๋๋ฆฌ์ค: ์ด๋ฆ ๊ทธ๋ฆฌ๊ณ ๋์ด๋ฅผ ์ถ๋ ฅํ๋ ํจ์ aboutMe
๋ฅผ ์์ฑํ์ธ์.
๐ ์กฐ๊ฑด 1: ๋์ด๋ฅผ ๋งค๊ฐ๋ณ์๋ก ๋๊ฒจ์ฃผ์ง ์์๋ค๋ฉด ๋น๊ณต๊ฐ
๋ก ์ถ๋ ฅํ์ธ์.
๐ ์กฐ๊ฑด 2: 0 ์ด
๋ ์
๋ ฅ ๊ฐ๋ฅํ๋๋ก ๋ง๋์ธ์.
function aboutMe (name, age) {
// ์ฝ... ๋ด ๋...! ๐
// ๋ ์ฌํํ๊ฒ ์ ๋ ๊น์?
age = (typeof age !== 'undefined') ? age : '๋น๊ณต๊ฐ'
console.log(name, age)
}
aboutMe('์๋น๊ทผ') // -> ์๋น๊ทผ ๋น๊ณต๊ฐ
aboutMe('์๋น๊ทผ', 0) // -> ์๋น๊ทผ 0
aboutMe('์๋น๊ทผ', 20) // -> ์๋น๊ทผ 20
function aboutMe (name, age) {
if (!age) { // 0 ์ '๊ฑฐ์ง ๊ฐ' ์ด๊ธฐ ๋๋ฌธ์ 0 ์ด์ ์
๋ ฅํด๋ '๋น๊ณต๊ฐ'๋ฅผ ์ถ๋ ฅํฉ๋๋ค. ๐
age = '๋น๊ณต๊ฐ'
}
console.log(name, age)
}
aboutMe('์๋น๊ทผ') // -> ์๋น๊ทผ ๋น๊ณต๊ฐ
aboutMe('์๋น๊ทผ', 0) // -> ์๋น๊ทผ ๋น๊ณต๊ฐ ... 0 ์ด์ ์
๋ ฅํ์ง๋ง '๋น๊ณต๊ฐ'๊ฐ ์ถ๋ ฅ๋๋ค์? ๐
aboutMe('์๋น๊ทผ', 20) // -> ์๋น๊ทผ 20
function aboutMe (name, age = '๋น๊ณต๊ฐ') { // ๋ชจ๋ ์กฐ๊ฑด์ ๋ง์กฑํ๋ฉฐ ์ฌํํฉ๋๋ค. ๐
console.log(name, age)
}
aboutMe('์๋น๊ทผ') // -> ์๋น๊ทผ ๋น๊ณต๊ฐ
aboutMe('์๋น๊ทผ', 0) // -> ์๋น๊ทผ 0
aboutMe('์๋น๊ทผ', 20) // -> ์๋น๊ทผ 20
์ด๋ฆ์ ์ ๋ ฅํ์ง ์๊ณ ๋์ด๋ง ์ ๋ ฅํ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น์? ๊ทธ๊ฑด ๋ถ๊ฐ๋ฅํฉ๋๋ค.
์๋๋ฉด aboutMe
์ ๋งค๊ฐ๋ณ์๋ ์์๊ฐ ์ ํด์ง ๋งค๊ฐ๋ณ์์ด๊ธฐ ๋๋ฌธ์ด์ฃ .
aboutMe(, 10) // ์ด๋ฐ๊ฑด ๋ถ๊ฐ๋ฅํฉ๋๋ค.
aboutMe(10) // ๊ทธ๋ ๋ค๊ณ ์ด๋ ๊ฒ ํ์๋ name ๋งค๊ฐ๋ณ์์ ์ซ์ 10 ์ด ๋ค์ด๊ฐ๋ฒ๋ฆฝ๋๋ค.
Destructuring Assignment ๋ฅผ ํ์ฉํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ์์๋ Named Parameter ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฆ ๋งค๊ฐ๋ณ์์ ์์๊ฐ ์์ด์ง๊ณ ์ด๋ฆ์ด ๋ถ๊ฒ ๋๋ ๊ฑฐ์ฃ .
์ด ๊ฐ๋ ์ ๋ค์ ๋จ์์์ ๋ค๋ฃน๋๋ค. ๊ทธ๋ฌ๋ ๋ง๋ณด๊ธฐ ์ฝ๋๋ง ํ๊ณ ๋์ด๊ฐ ๋ณด์ฃ .
function aboutMe ({ name = '๋น๊ณต๊ฐ', age = '๋น๊ณต๊ฐ' }) { // '์์' ๊ฐ ์ฌ๋ผ์ง ๋งค๊ฐ๋ณ์๋ค ๐๐๐
console.log(name, age)
}
aboutMe({ name: '์๋น๊ทผ', age: 20 }) // -> ์๋น๊ทผ 20
aboutMe({ age: 20, name: '์๋น๊ทผ' }) // -> ์๋น๊ทผ 20 ... ์ฌ์ง์ด ๋งค๊ฐ๋ณ์ ์์๊น์ง ๋ฐ๊ปด๋ ์ ์ถ๋ ฅํฉ๋๋ค!
aboutMe({ name: '์๋น๊ทผ' }) // -> ์๋น๊ทผ ๋น๊ณต๊ฐ ... ๋์ด๋ฅผ ๋๊ธฐ์ง ์์์ผ๋ฏ๋ก '๋น๊ณต๊ฐ' ๋ฅผ ์ถ๋ ฅํฉ๋๋ค.
aboutMe({ age: 20 }) // -> ๋น๊ณต๊ฐ 20
aboutMe({}) // -> ๋น๊ณต๊ฐ ๋น๊ณต๊ฐ ... ๋ ๋ค '๋น๊ณต๊ฐ' ๋ก ์ถ๋ ฅ ๊ฐ๋ฅํฉ๋๋ค!
Named Parameter ๋ ๋งค๊ฐ๋ณ์์ ์ด๋ฆ์ ์ง์ ํด์ค๋๋ค.
๐ ์๋๋ฆฌ์ค: ๋์ด์ ์ง์
์ ๋งค๊ฐ๋ณ์๋ก ๋ฐ๊ณ ์ถ๋ ฅํ๋ ํจ์ aboutMe
๋ฅผ ์์ฑํ์ธ์.
๐ ์กฐ๊ฑด 1: ๋์ด๋ง ์ ๋ ฅํ ์๋, ์ง์ ๋ง ์ ๋ ฅํ ์๋, ๋ ๋ค ์ ๋ ฅํ ์๋ ๊ทธ๋ฆฌ๊ณ ๋ ๋ค ์ ๋ ฅ ์ ํ ์๋ ์๊ฒ ํจ์๋ฅผ ์์ฑํ์ธ์.
// ๋งค๊ฐ๋ณ์์ ์์๊ฐ ์ ํด์ ธ์๊ธฐ ๋๋ฌธ์ ์กฐ๊ฑด์ ๋ง์กฑํ์ง ๋ชปํฉ๋๋ค. ๐
function aboutMe (age, job) {
age && console.log('๋์ด', age)
job && console.log('์ง์
', job)
}
aboutMe(20) // -> ๋์ด 20 ... ๋์์ง ์์ ๋ณด์
๋๋ค. ํ์ง๋ง ๋ค์ ๋ผ์ธ์ ๋ด๋ณด์ธ์.
// ํจ์๊ฐ ๊ธฐ๋ํ ๊ฒ์ฒ๋ผ ์๋ํ์ง ์์ต๋๋ค!
aboutMe('๊ฐ๋ฐ์') // -> ๋์ด ๊ฐ๋ฐ์ ... ๋์ด๊ฐ ๊ฐ๋ฐ์๋ผ๊ณ ๋์๊ตฐ์. ๐
// Named Parameter ๋๋ถ์ ์กฐ๊ฑด์ ๋ง์กฑํฉ๋๋ค.
// ์ ํ์ ์ผ๋ก ๋งค๊ฐ๋ณ์๋ฅผ ์
๋ ฅํ ์ ์์ต๋๋ค. ๐
function aboutMe ({ age, job }) {
age && console.log('๋์ด', age)
job && console.log('์ง์
', job)
}
// ๋์ด์ ์ง์
์ค ํ๋๋ง ์
๋ ฅ๋ ๊ฐ๋ฅํฉ๋๋ค. ๐
aboutMe({ age: 20 }) // -> ๋์ด 20
aboutMe({ job: '๊ฐ๋ฐ์' }) // -> ์ง์
๊ฐ๋ฐ์
๋งค๊ฐ๋ณ์๊ฐ 3๊ฐ ์ด์์ด๋ฉด ์์๋ฅผ ์๋ชป ์ ๋ ฅํ ๊ฐ๋ฅ์ฑ์ด ํฝ๋๋ค.
ํนํ ๋งค๊ฐ๋ณ์์ ํ์ ์ ์ง์ ํ ์ ์๊ธฐ๋๋ฌธ์ ์๋ฌด๋ฐ ๊ฒฝ๊ณ ์์ด ํจ์๊ฐ ์คํ๋๊ณ , ์์์น ๋ชปํ ์ผ์ด ๋ฐ์ํ๊ฒ ์ฃ .
์ด๋ฅผ ๋ฐฉ์งํ๋ ค๋ฉด ์์ ์๋ ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํด์ผํฉ๋๋ค.
๐ ์๋๋ฆฌ์ค: ์ฐฝ ์ด๋ฆ, ๊ฐ๋ก, ์ธ๋ก ์ฌ์ด์ฆ, ๋ฐฐ๊ฒฝ์, ํ ๋๋ฆฌ ์, ํ ๋๋ฆฌ ๋๊ป ๊ทธ๋ฆฌ๊ณ ํฐํธ๋ฅผ ์ ๋ ฅ ๋ฐ์ ์๋ก์ด ์ฐฝ์ ๋ ๋๋งํ๋ ํจ์๋ฅผ ์์ฑํ์ธ์.
function render (name, width, height, backgroundColor, borderColor, borderWidth, font) {
// doSomething ...
}
// ๋งค๊ฐ๋ณ์ ์์๋ฅผ ํ๋๋ผ๋ ํ๋ฆฌ๋ฉด ํฐ ์ผ๋ฉ๋๋ค.
render('์ ์ฐฝ', 640, 480, 'red', 'green', 1, 'Apple Bold')
function render ({ name, width, height, backgroundColor, borderColor, borderWidth, font }) {
// doSomething ...
}
// ์ด์ ๋งค๊ฐ๋ณ์ ์์์ ์๊ด์์ด ์์ ํ๊ฒ ํธ์ถ ๊ฐ๋ฅํฉ๋๋ค. ๐
render({
height: 480,
borderColor: 'green',
backgroundColor: 'red',
font: 'Apple Bold',
name: '์ ์ฐฝ',
borderWidth: 1,
width: 640
})
Promise ๋ ๋น๋๊ธฐ ์์ ์ ์ํ๋ฅผ ๋ณด๊ดํ๊ณ ์ถ์ ํฉ๋๋ค.
Promise ๋ ๋ค์ ์ค ํ๋์ ์ํ๋ฅผ ๊ฐ์ง๋๋ค.
- ๋๊ธฐ(pending): ์ดํํ๊ฑฐ๋ ๊ฑฐ๋ถ๋์ง ์์ ์ด๊ธฐ ์ํ.
- ์ดํ(fulfilled): ์ฐ์ฐ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋จ.
- ๊ฑฐ๋ถ(rejected): ์ฐ์ฐ์ด ์คํจํจ.
[์ถ์ฒ: MDN - Promise]
Promise ๋ ์ฃผ์ด์ง ์ฝ๋ฐฑ ํจ์๋ฅผ ๋จ ํ ๋ฒ ์คํํ๋ฉฐ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๊ดํฉ๋๋ค. ์ด๋ฌํ ํน์ฑ ๋๋ฌธ์ Promise ์ ์ํ๋ ํ ๋ฒ ๊ฒฐ์ ๋๋ฉด ์์ ๋์ง ์์ต๋๋ค.
๋ค์ ๋งํด ์ด๋ฏธ ์๋น(์ดํ๋๊ฑฐ๋ ๊ฑฐ๋ถ) ๋ Promise ๋ ์ฌ์ฌ์ฉ ํ ์ ์์ต๋๋ค.
๐์๋๋ฆฌ์ค: 3์ด ํ ์ฃผ๋ฌธํ ์์์ด ๋ฐฐ๋ฌ๋ฉ๋๋ค. ๋์ฐฉ ์ ์ด๋ฅผ ์ถ๋ ฅํ์ธ์.
๐์กฐ๊ฑด1: ๋ฐฐ๋ฌ์ด ๋์ฐฉํ๊ธฐ ์ ์๋ ์ ๋๋ก ๋นจ๋๋ฅผ ์์ํ์ง ๋ง์ธ์.
function delivery () {
setTimeout(() => { console.log('๋ฐฐ๋ฌ ๋์ฐฉ') }, 3000)
}
// ๋ฐฐ๋ฌ์ ์์ฒญํฉ๋๋ค. (๋น๋๊ธฐ ํจ์ ํธ์ถ)
// ๊ทธ๋ฌ๋ ๋ฐฐ๋ฌ์ ํ์ฌ ์ํ๋ฅผ ์ถ์ ํ์ง๋ ์์ต๋๋ค.
delivery()
console.log('๋นจ๋ ์์')
// ๊ฒฐ๊ณผ ๐
// -> ๋นจ๋ ์์ ... ๋ฐฐ๋ฌ์ด ๋์ฐฉํ๊ธฐ๋ ์ ์ ๋นจ๋๋ฅผ ์์ํ์ต๋๋ค.
// -> ๋ฐฐ๋ฌ ๋์ฐฉ
function delivery () {
return new Promise((resolve) => {
setTimeout(() => {
console.log('๋ฐฐ๋ฌ ๋์ฐฉ')
resolve()
}, 3000)
})
}
delivery().then(() => {
console.log('๋นจ๋ ์์') // ๋ฐฐ๋ฌ์ด ๋์ฐฉ ํ ํ ๋นจ๋๋ฅผ ์์ํฉ๋๋ค.
})
// ๊ฒฐ๊ณผ ๐
// -> ๋ฐฐ๋ฌ ๋์ฐฉ
// -> ๋นจ๋ ์์
๐์๋๋ฆฌ์ค: 3์ด ํ ์ฃผ๋ฌธํ ์์์ด ๋ฐฐ๋ฌ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ์์์ผ์ ํด๋ฌด์ ๋๋ค.
๐์กฐ๊ฑด1: ํด๋ฌด์ผ์๋(๋ฐฐ๋ฌ ๊ฑฐ๋ถ ์) ๋งฅ๋๋ ๋์ ๋ฐฉ๋ฌธํ์ธ์.
function delivery (day) {
return new Promise((resolve, reject) => {
if (day === '์์์ผ') {
reject(new Error())
}
setTimeout(() => {
resolve()
}, 3000)
})
}
delivery('์์์ผ').then(() => {
console.log('์์ ๋ฐ๊ธฐ')
}).catch(() => {
console.log('๋งฅ๋๋ ๋ ๋ฐฉ๋ฌธํ๊ธฐ')
})
// ๊ฒฐ๊ณผ ๐
// -> ๋งฅ๋๋ ๋ ๋ฐฉ๋ฌธํ๊ธฐ
Promise ๋ ๋น๋๊ธฐ ํจ์ ํธ์ถ์ ๊ฒฐ๊ณผ๋ฅผ ์ ํํ ๋ณด๊ดํ ์๋ฌด๋ฅผ ๊ฐ์ง๋๋ค. ํ ๋ฒ ์ ํด์ง ๊ฒฐ๊ณผ๋ ์์ ๋์ง ์์ผ๋ฉฐ ์ด๋ฅผ ์งํค๊ธฐ ์ํด์ ์ฃผ์ด์ง ์คํ ํจ์(executor
)๋ฅผ ๋จ ํ ๋ฒ๋ง ์คํํฉ๋๋ค.
๐์๋๋ฆฌ์ค: Promise ๊ฐ ์ผํ์ฑ์ด๋ผ๋ ๊ฒ์ ์ฆ๋ช ํ์ธ์.
// new Promise ๋ฅผ ํ์๊ฐ ์ด๋ฏธ ํ๋ก๋ฏธ์ค ์์ง
const promise = new Promise((resolve) => {
console.log('์๋
')
resolve()
})
promise.then()
promise.then()
promise.then()
// ๊ฒฐ๊ณผ ๐
// -> ์๋
... ๋จ ํ ๋ฒ ์ถ๋ ฅ๋จ
Promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ํจ์
Async Function ์ await
ํค์๋๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅ์ผ ํด์ค๋๋ค. await
ํค์๋๋ Async Function ์์๋ง ์ ํจํฉ๋๋ค.
await
ํค์๋๋ Async Function ์ด ๋๋๊ธธ(return or throw
) ๊ธฐ๋ค๋ฆฝ๋๋ค.
Async Function ๋ return
ํน์ throw
๋ฌธ์ผ๋ก ๋๋ผ ์ ์์ต๋๋ค.
Async/Await ์ ์ฌ์ฉํ๋ฉด ์ผ๋ จ์ ๋น๋๊ธฐ ์์ ์ ๋น๊ต์ ์ฝ๊ฒ ๋๊ธฐ ๋ฐฉ์์ผ๋ก ํธ์ถ ๊ฐ๋ฅ์ผ ํด์ค๋๋ค.
์์ ์ฝ๋๋ค์ ๊ฐ๊ฒฐํ ์ฝ๋๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด top-level-await
๊ธฐ๋ฅ์ด ํ์ฌ๋ ํ๊ฒฝ์์ ์งํํ์ต๋๋ค. top-level-await
์ ECMAScript proposal stage 3 ์ํ๋ฉฐ ์์ธํ ๋ด์ฉ์ ์๋ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์.
tc39/proposal-top-level-await - GitHub
๐์๋๋ฆฌ์ค: ๊ตฌ๊ธ ๊ฒ์ ํ์ด์ง๋ฅผ ํฌ๋กค๋ง ํด์ค์ธ์. ํฌ๋กค๋ง์ ์๋ฃํ๋ ๊ฒ์ ๊ธฐ๋ค๋ฆฌ์ง ๋ง๊ณ ์ด๋ฉ์ผ์ ์ ์ก
ํ์ธ์.
๐์กฐ๊ฑด: Async Function ์ ํ์ฉํ์ธ์.
async function google () {
// ...
console.log('๊ตฌ๊ธ ํฌ๋กค๋ง ์๋ฃ')
}
google() // ๋น๋๊ธฐ์ ์ผ๋ก ์คํ๋ฉ๋๋ค.
console.log('์ด๋ฉ์ผ ์ ์ก')
// ๊ฒฐ๊ณผ ๐
// -> ์ด๋ฉ์ผ ์ ์ก
// -> ๊ตฌ๊ธ ํฌ๋กค๋ง ์๋ฃ
๐์๋๋ฆฌ์ค: ๊ตฌ๊ธ ๊ฒ์ ํ์ด์ง๋ฅผ ํฌ๋กค๋ง ํด์ค์ธ์. ํฌ๋กค๋ง์ ์๋ฃํ ๋ค ์ด๋ฉ์ผ์ ์ ์ก
ํ์ธ์.
๐์กฐ๊ฑด: Async Function ์ ํ์ฉํ์ธ์.
async function google () {
// ...
console.log('๊ตฌ๊ธ ํฌ๋กค๋ง ์๋ฃ')
}
await google() // await ํค์๋๊ฐ ๋๊ธฐ์ ์ผ๋ก ์คํํ๋๋ก ๋ง๋ค์ด์ค๋๋ค. ๐
console.log('์ด๋ฉ์ผ ์ ์ก')
// ๊ฒฐ๊ณผ ๐
// -> ๊ตฌ๊ธ ํฌ๋กค๋ง ์๋ฃ
// -> ์ด๋ฉ์ผ ์ ์ก
๐์๋๋ฆฌ์ค: getUser
ํจ์๋ก ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค์ธ์. ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์ name
ํ๋์ ๊ฐ์ ์ถ๋ ฅํ์ธ์.
๐์กฐ๊ฑด: await
ํค์๋๋ก getUser
ํจ์๊ฐ ๋ฐํํ๋ ๊ฐ์ ๋ฐ์์ค์ธ์.
async function getUser () {
const result = await dbQuery()
return result
}
const user = await getUser() // await ํค์๋๊ฐ getUser ํจ์์ ๋ฐํ์ ๊ธฐ๋ค๋ฆฝ๋๋ค. ๐
console.log(user.name)
๐์๋๋ฆฌ์ค: ๋ฐฐ๋ฌ ์์์ ์ฃผ๋ฌธํ์ธ์. ๋ฐฐ๋ฌ์ด ๋์ฐฉํ๋ฉด(return
) ์์์ ๋จน๊ณ , ๋ง์ฝ ์ฃผ๋ฌธ์ด ์ทจ์๋๋ฉด(throw
) ๋ฐฉ๋ฌธ ํฌ์ฅ์ ํด์ค์ธ์.
async function delivery () {
// ...
throw new Error('์ฃผ๋ฌธ ์ทจ์!')
}
try {
await delivery() // await ํค์๋๊ฐ ๋๋ถ์ ๋น๋๊ธฐ ํธ์ถ์ ์คํจ๋ฅผ ๋ค๋ฃฐ์ ์์ต๋๋ค. ๐
// ... ๋ฐฐ๋ฌ ์์ ๋จน๊ธฐ
} catch (error) {
// ... ๋ฐฉ๋ฌธ ํฌ์ฅ ํด์ค๊ธฐ
}