ES 2020

ES 2020은 최신 버전이므로 지원 브라우저 확인 필요
?? 연산자 : value가 null이거나 undefine일 경우에만 false.

// or 연산자(||)의 단점
let score = 0
console.log("수학 점수 :", score || "알 수 없습니다.")
// 수학 점수 : 알 수 없습니다.
// 변수 score가 0이라고 정의 되었는데도 출력할 수 없다.
// || 연산자는 boolean(true or false)로 판단되기 때문에 0은 false이기 떄문에
// 그렇다고 || 연산자를 대체하는 것은 아니다. 각자의 쓰임이 다름

let score = 0
console.log("수학 점수 :", score ?? "알 수 없습니다.")
// 수학 점수 : 0

let score = undefined
let score = null
let score = 
console.log("수학 점수 :", score ?? "알 수 없습니다.")
// score의 value가 null이거나 undefine일 때만 
// 수학 점수 : 알 수 없습니다.

optional chaining(?.): react 코드를 깔끔하게

const me = {
    name: "creamer",
    job: {
        blockcahin: "CM",
        developer: "font-end"
    }
}
console.log(me.job.blockchain);
// CM

const you = {
    name: "terry"
}
console.log(you.job.blockchain);
// 에러 발생
// Uncaught TypeError: Cannot read property 'blockchain' of undefined

// 에러 발생 막기
console.log(you.job && you.job.blockchain);
// undefined
// undefined

// optional chaining : && 연산자를 여러번 사용안해도 되므로 위 코드를 짧게 줄일 수 있다.
console.log(you?.job?.blockchain);
// = console.log(you && you.job && you.job.blockchain);
// undefined
// undefined

padStart : 문자열을 원하는 길이로 맞추고 앞에 빈자리를 원하는 것으로 채울 수 있다.
padEnd : 문자열을 원하는 길이로 맞추고 뒤에 빈자리를 원하는 것으로 채울 수 있다.

// syntax
string.padStart.(maxLength, ?fillString)
// maxLength : string의 maxLength를 설정
// fillString : string의 길이가 arg1의 maxLength 보다 작을 경우 앞에 빈칸을 arg2로 채워라

// syntax
string.padEnd.(maxLength, ?fillString)
// maxLength : string의 maxLength를 설정
// fillString : string의 길이가 arg1의 maxLength 보다 작을 경우 뒤에 빈칸을 arg2로 채워라

// ex code
let house = "서울시";
console.log(house.padStart(14, "*"));
// ***********서울시

let id = "900217-1";
console.log(id.padEnd(14, "*"));
// 900217-1*****

let hour = "7"
console.log(hour.padStart(2, "0").padEnd(3, "H"));
// 07H
console.log(hour);
// 7
// padStart와 padEnd는 value를 retrun만 하지 value를 변경하지 않는다.

let hours = 7; let minutes = 5; let seconds = 3;
console.log(`${hours}H : ${minutes}M : ${seconds}S`);
// 7H : 5M : 3S

// 2자리로 변경하기

console.log(`${hours < 10 ? `0${hours}` : hours}H : ${minutes < 10 ? `0${minutes}` : minutes}M : ${seconds < 10 ? `0${seconds}` : seconds}S`);
// 07H : 05M : 03S

// padStart & padEnd 

hours = String(hours).padStart(2,0);
minutes = String(minutes).padStart(2,0);
seconds = String(seconds).padStart(2,0);
console.log(`${hours}H : ${minutes}M : ${seconds}S`);
// 07H : 05M : 03S

trimStart & trimEnd : string의 양 끝의 여백을 모두 제거 (string 사이의 공백인 띄어쓰기는 제거 할 수 없다.)

let blank = "          빈칸"
console.log(blank.trimStart());
// 빈칸

let blank = "빈칸          "
console.log(blank.trimEnd());
// 빈칸

let blank = "          빈칸          "
console.log(blank.trim());
// 빈칸

// trim 역시 pad와 마찬가지로 value를 retrun하지 value를 변경하지는 않는다.
console.log(blank);
//           빈칸          

Object entries, Object values,Object fromEntries

const me = {
    name: "creamer",
    job: "font-end developer"
}
// Object.values()
console.log(Object.values(me));
// ["creamer", "font-end developer"]

// Object.entries() : key를 알고 싶을 때 사용
console.log(Object.entries(me));
// [Array(2), Array(2)]

Object.entries(me).forEach(item => console.log(item[0], item[1]));
// name creamer
// job font-end developer

// Object.fromEntries() :array 안의 array로 부터 Object 생성
Object.fromEntries([ ["name", "creamer"], ["age", 18], ["job", "Front-End Developer"] ]);
// {name: "creamer", age: 18, job: "Front-End Developer"}

array.flat() : 복잡한 arrays of arrays를 하나의 array로 단순화

[1, [2], [3, [4]]]

[1, [2], [3, [4]]].flat()
// [1, 2, 3, Array(1)]

// flat을 한번 할때마다 array 속의 array가 바깥 부터 하나씩 벗겨진다.
[1, [2], [3, [4]]].flat(2)
// [1, 2, 3, 4]

array.sort() : array 정렬

const alphabet = ["d", "a", "c", "b"]
alphabet.sort()
// ["a", "b", "c", "d"]

// compareFunction(a, b)을 통해 비교 설정 가능
const fruits = ["apple", "banana", "water melon"];

const sortFruitsByLength = (fruitA, fruitB) => {
    // console.log(fruitA, fruitB)
    // banana apple
    // water melon banana
    return fruitB.length - fruitA.length
    // compareFunction은 반드시 return 해줘야한다.
}

console.log(fruits.sort(sortFruitsByLength));
// ["water melon", "banana", "apple"]

// object 정렬
let people = [
    {
        name: "dreamer",
        age: 21
    },
    {
        name: "baby",
        age: 1
    },
    {
        name: "creamer",
        age: 31
    },
]

const orderByAge = (personA, personB) => {
    return personB.age - personA.age
    // compareFunction은 반드시 return 해줘야한다.
}

console.log(people);
// (3) [{…}, {…}, {…}]
// // 0: {name: "dreamer", age: 21}
// // 1: {name: "baby", age: 1}
// // 2: {name: "creamer", age: 31}

console.log(people.sort(orderByAge));
// (3) [{…}, {…}, {…}]
// // 0: {name: "creamer", age: 31}
// // 1: {name: "dreamer", age: 21}
// // 2: {name: "baby", age: 1}

// sort는 array의 value를 변경 시킨다.
console.log(people);
// (3) [{…}, {…}, {…}]
// // 0: {name: "creamer", age: 31}
// // 1: {name: "dreamer", age: 21}
// // 2: {name: "baby", age: 1}

Promise.allSettled() : promise들이 서로 독립적이라 상관 없을때 사용. 또는 각 promise 중 어떤게 작동하고 어떤게 작동안하는지 확인할 때 사용
Promise.all() :서로 상관이 있는 Promise를 작동시킬때 사용. 모든 Promise가 동시에 작동해야하는 경우에 사용. (모두 성공하거나 모두 실패)

// Promise.all : 모든 것이 성공해야 에러가 발생하지 않는다.

cosnt PA = Promise.all([
    fetch("API"),
    fetch("API"),
    fetch("API"),
])
.then(response => console.log("성공!", response))
.catch(e => console.log("실패", e))

// Promise.allSettled() : 모든 것이 성공할 필요가 없다. Promise가 끝나기만 하면 된다.
cosnt PAS = Promise.allSettled([
    fetch("API"),
    fetch("API"),
    fetch("API"),
])
.then(response => console.log("성공!", response))
.catch(e => consol.log("실패", e))

Share this post