๋์ฒญ์
๐ ์ดํํ 2hour
๐๐ผ -
๐๐ผ -
[๋งํฌ ๋ชฉ๋ก]
Web Developer Bootcamp 2021
๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํํ ๋ฆฌ์ผ
๊ธฐ์กด ๋ฌธ๋ฒ๊ณผ ๋ฐ๋ ๋ฌธ๋ฒ์ ์ฐจ์ด (default value ์ค์ )
// ๊ธฐ์กด
function rollDie(numSides) {
if (numSides === undefined) {
numSides = 6
}
return Math.floor(Math.random() * numSides) +1
}
// ์ต๊ทผ
function rollDie(numSides = 6) {
return Math.floor(Math.random() * numSides) +1
}
// default parameter๋ ํญ์ ๋ค ์ชฝ์ ์์ผ ํ๋ค
function greet(person, msg = "Hey") {
console.log(`${msg}, ${person}`)
}
speard ์ฌ์ฉ ์์
Math.max(1,2,3,4) //4
const nums = [1,2,3,4]
Math.max(nums) //NaN
Math.max(...nums) //4
console.log(nums) //[1,2,3,4]
console.log(...nums) // 1 2 3 4
console.log('hello') //hello
console.log(...'hello') //h e l l o
spread๋ ์๋ก์ด array ๋ง๋๋ ๊ฒ - copy
๊ธฐ์กด array ๋ณํ์ง ์๋๋ค
const cats = ['blue', 'scout'];
const dogs = ['rusty','wyatt'];
const allPets = [...cats, ...dogs] //๋ํด์ง
[...dogs, ...cats, 'Speedy'] //๋ํด์ง
const feline = { legs:4, family:'Felidae' }
feline //{ legs:4, family:"Felidae" }
{feline, color:'black'} //{ legs:4, family:"Felidae", color:"black" }
const canine = { isFurry: true, family: 'Canine' }
{...canine, ...feline} //๋ค์ ์จ ๊ฒ ์ด๊น { isFurry: true, family:"Felidae", legs:4}
{...[2,4,6,8]} //indices are used as the key
// {0:2, 1:4, 2:6, 3:8}
//์ ๋๋ก ๋์
function sum() {
console.log(arguments)
}
//๋ฐฐ์ด์ด ์๋๋ผ์ ์๋ฌ ์ผ์ด๋จ
function sum() {
return arguments.reduce((total, el) => total + el)
}
//๋ฐฐ์ด์
function sum(...nums) {
return nums.reduce((total, el) => total + el)
}
// rest๊ฐ ์ฐ์ด๋ ๋ค๋ฅธ ์์ (collect the rest)
function raceResults(gold, silver, ...everyoneElse) {
console.log(`gold medal goes to ${gold}`)
console.log(`silver medal goes to ${silver}`)
console.log(`thanks to ${everyoneElse}`)
}
spread ํ๋ ๊ฒ์ด ์๋๋ผ collectํ๋ ๊ฒ
unpacking, extracting, singling out of the arrays or objects
distinct variable
const score = [1,2,3,4];
// ์ด๋ฐ ์์ผ๋ก ๋ถ๋ฆฌํ ์ ์์
const highScore = scores[0];
// ํ์ง๋ง ๋ ์ฌ์ด ๋ฐฉ๋ฒ,
const [gold,silver,...everyoneElse] = socres;
gold; //1
// score์ ๋ณํ์ง ์์ ์ํ์์ extractํ๋ ๊ฒ, position์ ๋ฐ๋ผ์
23-7. ๋ฐฐ์ด์์ destructuringํ๋ ๊ฒ๋ณด๋ค ๋ ์์ฃผ ์ฐ์
const user = {
name: 'nyangnyang',
born: 1930
died: 1980
}
// ์ด๊ฒ๋ ๊ฐ๋ฅํ๊ธด ํจ
const userName = user.name;
// ๋ ํจ์จ์ ์ธ ์ฝ๋๋?
const {name} = user;
// ๋ค๋ฅธ ์ด๋ฆ์ ๋ถ์ฌ์ฃผ๊ณ ์ถ๋ค๋ฉด
const {born: birthYear} = user;
// ์์ง ์ด์์๋ ๋ค๋ฅธ ์ ์ ๊ฐ ์๋ค๋ฉด?
const user2 = {
name: 'monkmonk',
born: 1970
}
const {died} = user2; // undefined
// defalt value ์ฃผ๊ธฐ
const {died = 'N/A'} = user2;
// ๋ฐฉ๋ฒ1
function userBio(user) {
return `${user.born} ${user.died}`
}
// ๋ฐฉ๋ฒ2
funcion userBio(user) {
const {born, died} = user;
return `${born}, ${died}`
}
// ๋ฐฉ๋ฒ3
function userBio({born, died = 'N/A'}) {
return `${born} ${died}`
}
์ํ ์ ๋ณด ๊ฐ๋จํ๊ฒ ๋ถ๋ฌ์ค๊ธฐ
//1-1
movies.filter((movie) => movie.score >=90)
//1-2
movies.filter(({score}) => score >=90)
//2-1
movies.map(movies => {
return `${movie.title) (${movie.year}) is rated ${movie.score}`
})
//2-2
movies.map(({title, score, year}) => {
return `${title) (${year}) is rated ${score}`
})
โ ๏ธ DOM ๋ค์ด๊ฐ๊ธฐ ์ javascript ํ ๋ฒ ๋ ๊ณต๋ถํ๊ณ ๊ฐ๊ธฐ
application programming interface: ์์ฉ ํ๋ก๊ทธ๋จ ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๋ฐฉ๋ฒ, ๋ฐ์ดํฐ ์์๊ณผ ์ธ์ฆ ๋ฐฉ์, ํธ์ถ ์ ํ ๋ฑ.
console api : ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋, ์ดํดํ ์ ์๋ ํจ์๋ค
์ฆ๊ถ์ฌ, ํค์, ๋์ , ์นด์นด์คํก, ์๋ผ๋, ํ์ด์ค๋ถ, ์ธ์คํ๊ทธ๋จ, ๋ ์จ : ๋งค๋ด์ผ ์ดํด๋ณด๊ธฐ
ํค๋ณด๋๊ฐ์ ๊ฑธ๋ก ์ดํดํ๊ธฐ, ์ฝ๋๋ค๋ผ๋ฆฌ ์ํตํ๋๋ก ํ๋ ๊ฒ
web api : ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ api
๋น๋๊ธฐ(asynchronous): ๋์์ ์ฌ๋ฌ๊ฐ์ง ์ผ์ ์ฒ๋ฆฌ, ์์ฝ, ์ค๋ ๋๋ ํ๋ก์ธ์ค๊ฐ ์ฌ๋ฟ์ด ๋๋ฉฐ ๋ฉํฐํ์คํน
์ด๋์ด ๋๋ฆฌ๊ฑฐ๋ ์์ฃผ ์๋ ์ด์ฐจ๋ฅผ ๋ค๋ฅธ ์ ๋ก์ ๋ฐฐ์นํ๋ ๊ฒ
setTime -> callback ํจ์
๋๊ธฐ(synchronous): ์์๋๋ก, ์ฝ๋๊ฐ ๋ฐ๋์ ์์ฑ๋ ์์๋๋ก