패스트캠퍼스 챌린지 3일차 - 모던 자바스크립트

백엔드

패스트캠퍼스 챌린지 3일차 - 모던 자바스크립트

꾸준이 2021. 9. 8. 23:37

0. 시작하기 전 / 후 인증샷

10시경에 시작해서 약 두시간 동안...
ch04내용을 들었다🥳

1. 자바스크립트의 최근 변화

자바스크립트는 저작권의 문제때문에 ECMAScript 라는 이름을 가짐.

https://github.com/tc39

Ecma TC39

Ecma International, Technical Committee 39 - ECMAScript - Ecma TC39

github.com

위 링크에서 ECMA의 새로운 버전을 정함.

https://node.green/ 에서 사용가능한 기능을 확인할 수 있음.

2. 자바스크립트의 나름 최신 동향 - let과 const

hoisting(선언의 최상단에서 그리고 초기화는 그 위치에서) 규칙이 없고,

block 스코핑을 지원함.

var와 달리 let은 두번이상 초기화 할 수 없음.

var x = 1
{
	var x = 2
    console.log(x) //2
}

console.log(x) //2

// 하지만 let 은

let x = 1
{
	let x = 2
    console.log(x) //2
}

console.log(x) //1

정리 const를 최우선으로 사용하고, 그 외는 let.
var은 절대로 사용하지 말자!

3. 스프레드 오퍼레이터 (...)

합치기

const pData = {
	name : "bong",
    mail : "123"
}

const aaData = {
	name : "bong",
    mail : "123"
}


// 두 객체를 하나의 객체로 합치려면
const user = {
	...pData,
    ...aaData
}

덮어쓰기

const overrides = {
	number : "1"
}


// number 값이 overrides 로 다시 초기화되기때문에,
// 덮어쓰는 데이터는 아래로 가야함
const config = {
	name : "bong",
    number : "12123",
    ...overrides
}

비구조 할당

const user = {
	name : "bong",
    age : "22",
    mail : "1243"
}

const { name, ...pData } = user
console.log(pData)

// {age : "22", mail : "1243" }

배열에서 사용하기

const pets = [1,2,3]
const cats = [2,3,45]

const sum = [...pets, ...cats]




////////////// 배열 분해할당 //////////////
cosnt [h, ...b] = [1,2,3,4,5]
h : 1
b : [2,3,4,5]


////////////// 함수에서 활용하기 //////////////
const foo = (h, ...body) => {
	console.log(h)
    console.log(body)
}

foo(1,2,3,4,5) : 1 [2,3,4,5]

4. functional approach

자바스크립트는 함수로 시작해서 함수로 끝나~!

위 사진에서 알아둘 것.

-> filter, set, new Set

*flat 은 그냥 3차원 배열을 배열하나 까주는 것임.

*reuce 는 배열을 돌면서 전혀 새로운 값을 또 주는 것임.

*옵셔널 체이닝

5. 프로미스!!!!!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

developer.mozilla.org

를 참고하여 이해할 수 있음.

Promise는 비동기 처리를 위한 객체.

콜백 지옥을 모던하게 해결하는 방법이기도 함.

// 프로마이스 생성하기

// 프로미스를 생성하면 실행됨
new Promnise((resolve, reject) => {
	console.log("프로미스 객체로 들어왔습니다!")
    reject("여기 데이터는 catch 인자로 넘어갑니다.")  
    // 리젝트의 값으로 결정이 된채로 이후로 넘어감.
    // 콜스택에는 쌓여 있지만, 값이 전달되거나 하지는 않음.
    // 거절 혹은 다음 중 먼저 나오는걸로 결정
    resolve("여기 데이터는 then의 인자로 넘어갑니다.")
})
.then(e => console.log(e))  // "여기 데이터는 catch 인자로 넘어갑니다."
.catch(e => console.log(e))  // "여기 데이터는 then의 인자로 넘어갑니다."

new Promise의 예시