자바스크립트 복습 - 12

ES2018에서 추가된 기능

객체에 레스트 / 스프레드 연산자 사용하기

ES6에서는 배열에 레스트/스프레드 연산자를 사용할 수 있었다.
ES2018부터는 객체에도 레스트/스프레드 연산자를 사용할 수 있다.

let obj1 = {
    key1: "value1",
    key2: "value2",
    key3: "value3",
    key4: "value4",
};

let { key1, key2, ...z } = obj1;
console.log(key1); //value1
console.log(key2); //value2
console.log(z); //{ key3: 'value3', key4: 'value4' }

let clone = {...obj1 };
console.log(clone); //{ key1: 'value1', key2: 'value2', key3: 'value3', key4: 'value4' }
obj1.key4 = "change_Value";

console.log(clone); //{ key1: 'value1', key2: 'value2', key3: 'value3', key4: 'value4' }
console.log(obj1); //{ key1: 'value1', key2: 'value2', key3: 'value3', key4: 'change_Value'}

위와같은 예제를 보면 객체에도 레스트연산자를 이용해서 사용할 수 있는것을 볼 수 있다. 그리고 스프레드 연산자를 이용해서 객체의 복사본을 쉽게 만들 수 있다. 단순히 주소를 참조하는것이 아니고 완전하게 복사하는 것이여서 기존의 객체에 수정을 해도 복사한객체에 변화가 없는것을 볼 수 있다.

비동기 반복

비동기 반복을 사용하면 데이터를 비동기적으로 반복할 수 있다.
라고하는데 왜쓰는지 아직 모르겠다.
비동기 동기의 중요성을 알기전까지는 이해가 힘들것 같다.

const iterables = [1, 2, 3];

async function test() {
    for await (const value of iterables) {
        console.log(value);
    }
}

test();

Promise.prototype.finally()

const myPromise = new Promise((resolve, reject) => {
    resolve();
});

myPromise.then(() => {
    console.log("still working"); //still working
    return `still working`;
}).finally(() => {
    console.log("done"); // done
    return `done`;
}).then(res => {
    console.log(res); //still working
});

finally()도 프로미스를 반환하기때문에 .then()과 .catch()를 계속 연결할 수 있지만 .finally()가 반환한 값이 아니라 그전에 프로미스가 반환한 값을 전달받게된다.

ES2019에서 추가된 기능

Array.prototype.flat()/.flatMap()

.flat()은 지정한 깊이까지 배열을 재귀적으로 평면화 한다.
깊이 인수가 지정되지 않으면 1이 기본값이다.
배열의 평면화가 무엇인지에 대해 먼저 알아보면

[[a,b],[c,d]] 라는 배열이 있다고 가정하자
그러면 이 배열을 평면화를 최종적으로 시키면 [a,b,c,d] 이런모양이되는것을
평면화라고 하는것같다.

그럼 flat()을 이용해서 배열의 평면화를 시켜보자

const letter = ['a', 'b', ['c', 'd', ['e', 'f']]];

console.log(letter.flat()); //[ 'a', 'b', 'c', 'd', [ 'e', 'f' ] ]
console.log(letter.flat(2)); //[ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(letter.flat().flat()); //[ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(letter.flat(Infinity)); //[ 'a', 'b', 'c', 'd', 'e', 'f' ]

이런식으로 평면화를 시키고
마지막에 Infintiy를 하면 모든 배열이 평면이 될때까지 하는 모습을 볼 수 있다.
flat메서드에 수를 넣는만큼 얼마나 깊이 평면화 할것인지 정할 수 있고
만약 파라메터가 없을때에는 기본적으로 1만큼의 평탄화를 시켜준다.

const letter = ["Hell O", " ", "jas"];

console.log(letter.flatMap(x => x.split(" "))); //[ 'Hell', 'O', '', '', 'jas' ]

그냥 map을 이용하면 배열을 나눠서 반환하지만 flat을 사용해서 평면화 해서 반환하는 모습을 볼 수 있다.

Object.fromEntries()

fromEntries는 key-value쌍 배열을 객체로 변환해준다.

const key_Value_arr = [
    ['key', 'val'],
    ['key2', 'val2'],
];

const obj = Object.fromEntries(key_Value_arr);
console.log(obj); //{ key: 'val', key2: 'val2' }

String.prototype.trimStart() / .trimEnd()

let str = "      string    ";

console.log(str.length); //16

str = str.trimStart();

console.log(str.length); //10

str = str.trimEnd();

console.log(str.length); //6

trimStart는 문자열 앞의 공백을 지워주고
trimEnd는 문자열 끝의 공백을 지워준다.
trimLeft나 trimRight로도 사용할 수 있다.

선택적 catch 할당

ES2019 이전에는 catch절에 항상 예외 변수를 포함했어야한다.
ES2019 부터는 이를 생략할 수 있다.

//////////// ES2019 이전
try{
}
catch(err){
}

//////////// ES2019 이후

try{
}
catch{
}

Function.prototype.toString()

const add = (a, b) => {
    return a + b;
};

console.log(add.toString());

실행결과
(a, b) => {
return a + b;
}

함수의 소스코드를 나타내는 문자열을 반환하는 메서드이다.

Symbol.prototype.description

const me = Symbol("my");

console.log(me.description); //my
console.log(me); //Symbol(my)

description은 심벌객체의 설명을 반환한다.

ES2020에서 추가된 기능

BigInt

말그대로 큰 정수를 저장할 수 있음을 의미한다.
현재 정수의 최대 값은 2^53-1 이다.
BigInt를 사용하고싶으면 BigInt 생성자를 사용하거나 큰정수 뒤에 n을 붙이면된다.

let bigInt = BigInt(9999999999999999);
let bigint = 9999999999999999n;
console.log(bigint + 1n);

동적으로 가져오기

ES2020 부터는 필요할때 모듈을 동적으로 가져올 수 있다.

let {hi, bye} = await import('./say.js');

hi();
bye();

기존의 import를 맨위에 써야하지만 그렇지 않고 저렇게 사용하면서
중간에 모듈을 동적으로 가져올 수 있다.

Optional chaining

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

const user1 = {
    name: "stulta_amiko",
    age: 65535,
    work: {
        title: 'deadbeat',
        location: 'somewhere on earth',
    },
};

const user2 = {
    name: "cloud",
    age: 111,
};

let job;
if (user1.work) {
    job = user1.work.title;
}

console.log(job); //deadbeat

먼저 기존에는 위와같은 방식을 이용해서 선택적 속성에 접근할 수 있었다.
선택적 속성이라고 하면 위 유저 객체가 두개 있을텐데 보면 work라는 속성은 user1에게만 있고 user2에게는 없는 속성이다.
만약 work에 접근하고 싶으면 위와같이 조건문으로 접근 할수있다.

const jobtitle = user1.work ? user1.work.title : '';

console.log(jobtitle); //deadbeat

아니면 이런식으로 삼항연산자를 이용해서 접근할 수 있다.

const jobTitle = user1.work?.title;

console.log(jobTitle); //deadbeat

ES2020에서는 위와같은 방법으로 접근할 수 있게 되었다. 옵셔널 체이닝 연산자라고 불린다. 옵셔널 체이닝 연산자는 ?.라고 쓴다.
객체가 사용할 수 없는 속성에 도달하려고 하면 undefined를 반환한다.

이런식으로 복잡한 조건문없이 객체의 속성에 간편하게 접근할 수 있는것이 옵셔널 체이닝 연산자이다.

지금와서 느끼는건데 여태껏 복습 글을 적으면서 node.js로 실행했는데
ES2020부터는 실행이 안된다.
프리티어가 이상하게 자꾸 띄어버리기 때문에 그런것같다.
그래서 모질라 웹 문서에서 직접 실행중이니 코드자체에는 문제가 없게 실행가능합니다.

Promise.allSettled()

Promise.allSettled() 메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환합니다.
일반적으로 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용합니다.
그에 비해, Promise.all()이 반환한 프로미스는 서로 연관된 작업을 수행하거나, 하나라도 거부 당했을 때 즉시 거부하고 싶을 때 적합합니다.

const arrayOfPromise = [
    new Promise((res, rej) => setTimeout(res, 1000)),
    new Promise((res, rej) => setTimeout(rej, 1000)),
    new Promise((res, rej) => setTimeout(res, 1000)),
];

Promise.allSettled(arrayOfPromise).then(data => console.log(data));

실행결과
[
{ status: 'fulfilled', value: undefined },
{ status: 'rejected', reason: undefined },
{ status: 'fulfilled', value: undefined }
]

위와같이 어느 프로미스가 실패했는지 쉽게 알 수 있다.

String.prototype.matchAll()

matchAll() 메서드는 지정된 정규식에 대해 문자열과 일치하는 모든 결과의 반복자를 반환하는 새로운 메서드 라고 한다.

const regEx = /[a-d]/g; // a와 d사이에 있는 문자를 매칭하기 위한 정규식  
const str = "Lorem ipsum dolor sit amet";
const regExIterator = str.matchAll(regEx);

console.log(Array.from(regExIterator));

실행결과
[
[
'd',
index: 12,
input: 'Lorem ipsum dolor sit amet',
groups: undefined
],
[
'a',
index: 22,
input: 'Lorem ipsum dolor sit amet',
groups: undefined
]
]

이런식으로 동작하는 메서드이다.

ES2021에서 추가된 기능

ES2021에서 도입딘 기능이 소개되어있는데 흥미로운 주제 몇개만 보기로 하자

Promise.any()

Promise.any() 주어진 프로미스 중 하나라도 성공하면 실행이 완료되지만 그렇지 않다면 모든프로미스가 실패할때까지 계속하는 메서드이다.
Promise.race()와는 조금 다른게 race()에서는 하나라도 성공하면 바로 실행이 완료됐다고 판단하기 때문이다.

논리연산자와 할당표현식

a ||= b; // a = a||b 와 동일
c &&= d; // c = c&&d 와 동일
e ??= f; // e = e??f 와 동일

대충 이런느낌으로 추가된것이다.

책이 끝나버렸으니 다음주 부터는 TS에 대해서 공부하도록 해야겠다.