TIL015_210406

keepcalmยท2021๋…„ 4์›” 6์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
15/33
post-thumbnail

๐ŸŠ ๊ฐ์ƒ

๋Œ€์ฒญ์†Œ

๐Ÿ“™ ์—ดํ’ˆํƒ€ 2hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (285/682)
  • ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (0/30, 4.04 ์™„๋ฃŒ)

[๋งํฌ ๋ชฉ๋ก]
Web Developer Bootcamp 2021
๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠœํ† ๋ฆฌ์–ผ

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 23.2.-

23. Newer javascript features

23-2. Default params

๊ธฐ์กด ๋ฌธ๋ฒ•๊ณผ ๋ฐ”๋€ ๋ฌธ๋ฒ•์˜ ์ฐจ์ด (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}`)
}

23-3. Spread in function calls

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

23-4. Spread with array literals

spread๋Š” ์ƒˆ๋กœ์šด array ๋งŒ๋“œ๋Š” ๊ฒƒ - copy
๊ธฐ์กด array ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค

const cats = ['blue', 'scout'];
const dogs = ['rusty','wyatt'];

const allPets = [...cats, ...dogs] //๋”ํ•ด์ง
[...dogs, ...cats, 'Speedy'] //๋”ํ•ด์ง

23-5. Spread with Objects

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}

23-6. Rest params

//์ œ๋Œ€๋กœ ๋™์ž‘
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ํ•˜๋Š” ๊ฒƒ

23-7. Destruncturing

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-8. Destructuring objects

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;

23-9. Destruncturing Params

// ๋ฐฉ๋ฒ•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 ํ•œ ๋ฒˆ ๋” ๊ณต๋ถ€ํ•˜๊ณ  ๊ฐ€๊ธฐ

ํ—ท๊ฐˆ๋ฆฌ๋Š” ๊ฐœ๋… ์ •๋ฆฌ

api

application programming interface: ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐฉ๋ฒ•, ๋ฐ์ดํ„ฐ ์–‘์‹๊ณผ ์ธ์ฆ ๋ฐฉ์‹, ํ˜ธ์ถœ ์ œํ•œ ๋“ฑ.
console api : ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š”, ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜๋“ค
์ฆ๊ถŒ์‚ฌ, ํ‚ค์›€, ๋Œ€์‹ , ์นด์นด์˜คํ†ก, ์•Œ๋ผ๋”˜, ํŽ˜์ด์Šค๋ถ, ์ธ์Šคํƒ€๊ทธ๋žจ, ๋‚ ์”จ : ๋งค๋‰ด์–ผ ์‚ดํŽด๋ณด๊ธฐ
ํ‚ค๋ณด๋“œ๊ฐ™์€ ๊ฑธ๋กœ ์ดํ•ดํ•˜๊ธฐ, ์ฝ”๋“œ๋“ค๋ผ๋ฆฌ ์†Œํ†ตํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ
web api : ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์œ„ํ•œ api

๋™๊ธฐ์™€ ๋น„๋™๊ธฐ

๋น„๋™๊ธฐ(asynchronous): ๋™์‹œ์— ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ผ์„ ์ฒ˜๋ฆฌ, ์˜ˆ์•ฝ, ์Šค๋ ˆ๋“œ๋‚˜ ํ”„๋กœ์„ธ์Šค๊ฐ€ ์—ฌ๋Ÿฟ์ด ๋Œ๋ฉฐ ๋ฉ€ํ‹ฐํƒœ์Šคํ‚น
์ด๋™์ด ๋Š๋ฆฌ๊ฑฐ๋‚˜ ์ž์ฃผ ์„œ๋Š” ์—ด์ฐจ๋ฅผ ๋‹ค๋ฅธ ์„ ๋กœ์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ
setTime -> callback ํ•จ์ˆ˜
๋™๊ธฐ(synchronous): ์ˆœ์„œ๋Œ€๋กœ, ์ฝ”๋“œ๊ฐ€ ๋ฐ˜๋“œ์‹œ ์ž‘์„ฑ๋œ ์ˆœ์„œ๋Œ€๋กœ

24. DOM

0๊ฐœ์˜ ๋Œ“๊ธ€