Array.flat

Array.flat은 원본 배열을 변경한다.

const name = [ 's', 'h', [ 'e', 'r', [ 'y', 'l' ] ] ];

사용법

레벨 1 평면화: 인수 전달 없음 (기본값)

name.flat(); // [ 's', 'h', 'e', 'r', [ 'y', 'l' ] ]

레벨 2 평면화부터 인수 전달

name.flat(2); // [ 's', 'h', 'e', 'r', 'y', 'l' ]

flat 연달아 사용 가능 (2레벨 평면화와 동일)

name.flat().flat(); // [ 's', 'h', 'e', 'r', 'y', 'l' ]

infinity 인수 - 무조건 1차원 배열로 만들기

name.flat(infinity); // [ 's', 'h', 'e', 'r', 'y', 'l' ]

Array.flatMap

Array.flatMap은 원본 배열을 건드리지 않고 새 배열을 반환한다.

const catLove = ['A cat', 'is', 'a cute animal' ];

[비교] map 사용

2차원 배열이 반환되어 추가 작업이 필요하다.

catLove.map((cat) => cat.split(" ");
// [ ['A', 'cat' ], [ 'is' ], [ 'a', 'cute', 'animal' ]]

flatMap 사용

바로 1차원 배열로 반환되어 추가 작업이 필요 없다.

catLove.flatMap((cat) => cat.split(" ");
// [ 'A', 'cat', 'is', 'a', 'cute', 'animal' ]

Object.fromEntries()

2차원 배열을 객체로 반환해준다.

const matchAnimalFood = [
	['monkey', 'banana'],
    ['rabbit', 'carrot'],
];

const obj = Object.fromEntries(matchAnimalFood);

console.log(obj); // { monkey: "banana", rabbit, "carrot" }

🕵️‍♀️ 옵셔널 체이닝

const person1 = {
	name: 'Noda Megumi',
    age: 21,
    like: {
    	music: 'piano',
        food: 'bento',
    }
};

const person2 = {
	name: 'Chiaki Shinichi',
    age: 25,
};

만약 중첩 속성인 music 속성에 접근한다고 가정해보자.
music에 접근하려면 먼저 like 속성이 있는지 확인해야 한다.

like는 person1에게는 있지만 person2에게는 없다.
즉, 선택적(optional) 속성이기 때문에 music에 접근하려면
like 속성이 객체에 존재하는지부터 먼저 확인해야 한다.

let goodAt;

if (person.like) {
	goodAt = person.like.music;
}

옵셔널 체이닝을 사용하면 같은 내용을 훨씬 더 간결한 코드로 작성할 수 있다.

let goodAt = person.like?.music; // 'person 객체에 like라는 속성이 있으면? music을 꺼내세요'

만약 옵셔널 체이닝으로 확인했을 때 없는 속성이면 undefined를 반환한다.

let goodAt = person2.like?.music; // undefined

Promise.allSettled()

Promise.all()은 모든 프로미스가 '성공'할 때까지 기다렸다가 결과를 반환한다.
즉, 프로미스 중 하나라도 성공을 못 하면 실패를 반환한다.

하지만 Promise.allSettled()는 성공이나 실패 상관 없이 무조건 모든 결과를 반환한다.
이때, 각각의 결과를 설명하는 객체가 담긴 배열이 반환된다.

// 프로미스 배열 (resolve: 성공하는 함수 / reject: 실패하는 함수)
const PromisesArray = [
	new Promise((resolve, reject) => setTimeout((resolve, 1000)),
    new Promise((resolve, reject) => setTimeout((reject, 1000)),
    new Promise((resolve, reject) => setTimeout((resolve, 1000)),
];

// 프로미스 실행 후 모든 결과 반환
Promise.allSettled(PromisesArray)
	.then((data) => {
    	console.log(data);
    });
 
 // [ 
 //		{ status: "fulfilled", value: undefined },
 //		{ status: "rejected", reason: undefined }, // 실패한 경우 value 대신 reason을 반환
 //		{ status: "fulfilled", value: undefined },
 // ];

🌠 null 병합 연산자

null 계열의 값은 null과 undefined 두 가지이다.
개발을 할 때 null 계열의 값과 나머지 falsy 값(0, 빈 문자열 등)을 구분하고 싶을 때가 있다.

예: null 또는 undefined일 가능성이 있는 값에 접근할 때
=> null 병합 연산자를 사용하여 초기값을 지정해주면 해당 값이 항상 존재한다고 가정할 수 있어서 명확한 코드를 작성하는 데 도움이 된다.

[비교] !! 연산자

!! 연산자는 falsy 값들을 null 계열의 값인지 상관 없이 무조건 false를 반환한다.
=> null 계열 값인지 여부를 판단할 수 없음

대표적인 falsy 값들
빈 문자열(""), 숫자 0, null, undefined

이 4가지 앞에 !! 연산자를 붙이면 모두 false가 된다.

const string = "";
console.log(!!string); // false

const number = 0;
console.log(!!number); // false

const n = null;
console.log(!!null); // false

const u = undefined;
console.log(!!u); // false

null 병합 연산자를 사용하면 null이나 undefined인 값과 나머지 falsy 값을 구분할 수 있다.

const string = '' ?? '빈 문자열'; 
console.log(string); // '' (null 계열 값이 아니어서 왼쪽 항 그대로 반환)

const number = 0 ?? '제로';
console.log(number); // 0 (null 계열 값이 아니어서 왼쪽 항 그대로 반환)

const n = null ?? '널';
console.log(n); // 널 (null 계열 값이어서 왼쪽 항 대신 오른쪽 항 반환)

const u = undefined ?? '언디파인드';
console.log(u); // 언디파인드 (null 계열 값이어서 왼쪽 항 대신 오른쪽 항 반환)

null 병합 연산자는 왼쪽 항이 null 계열 값(null, undefined)이면 오른쪽 항을 반환하고,
그렇지 않으면 왼쪽 항을 반환한다.