🍊 감상

대청소

📙 열품타 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