[JavaScript] Confirm & flatMap

윤후·2022년 11월 15일
0

JavaScript

목록 보기
18/21

Confirm

confirm 메서드는 alert와 비슷한 모달 상자를 띄우는 역할을 한다. 내가 사용할 때는 무엇인가 삭제할 경우 사용자에게 확인할 수 있는 용도로 만들기 위해 사용했다.

comfirm 알림창은 true, false값을 반환하게 된다.

Confirm 기본 문법

let result = confirm("message")

활용

confirm이 뱉는 boolean값으로 조건문을 활용할 수 있겠다.

let result = confirm("정말로 삭제하시겠습니까?")

if(result) {
	// 삭제 로직
} else {
	return;
}

flatMap

flatMap은 ES10버전에서 새롭게 추가된 함수이다. 사실 잘 안써서 있는지 몰랐는데 이번에 사용되면서 정리해두려고 한다.

flat()

먼저 flat()함수부터 알아보자. 이 메소드는 평탄화 메소드라고 흔히 말하는데 중첩된 배열의 구조를 정해진 깊이만큼 평탄하게 만들 수 있는 함수이다. 말로 써봤자 잘 모른다 예시문을 봐보자.

// 현재 배열
let a = [1, 2, 3, [4, 5, [6, 7, 8, [9]]]]

// 만들고 싶은 배열
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9]

위와 같은 배열을 아래와 같은 배열로 바꾸자고 하면, 어떤 방식으로 사용하면 될까? 이전 ES6에는 reduce함수를 사용하여 이 방법을 구현할 수 있을것이다.

let a = [1, 2, 3, [4, 5, [6, 7, 8, [9]]]]

a.reduce((flat, toFlatten) => {
	return flat.concat(
    	Array.isArray(toFlatten) ? flatten(toFlatten) :toFlatten 
    )
},[])

console.log(a) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce로 각배열의 요소를 순회하며 빈 배열에 요소를 concat()을 이용하여 덧붙이는 flatten이라는 함수를 만들고 만약 배열의 요소의 타입이 배열이라면 재귀적으로 돌리면서 같은 작업을 반복하게끔 한다.

위의 방법도 괜찮지만, flat을 사용하면 좀더 깔끔한 한 줄로 바꿀 수 있다.

console.log(a.flat(3))

기본 문법

위에서 이야기 했듯 flat() 메소드는 중첩된 배열 구조를 정해진 깊이만큼 평탄하게 만들 수 있는 함수이다.

let newArr = arr.flat(parameter)

parameter로 어느 깊이까지 평탄화할지를 정할수 있으며 생략이 가능하다. parameter를 생략했을 경우에는 기본값인 1이 적용되게 된다.

만약 깊이를 알 수 없고 평탄화를 마치고 싶다면 Infinity를 parameter에 넣어주면 하위 배열이 없을 때까지 평탄하게 바꿔줄 수 있다.

let newArr = arr.flat(Infinity)

flatMap()

앞에서 flatMap을 살펴봤으니 flatMap을 알아보자. 이름에서부터 예상이 가듯, 평탄화 작업을 거친후에 Map의 기능을 합친것이다. 다만 다른점이 있다면, flat의 깊이를 최대 1만큼으로 밖에 설정하지 못한다는 점이다.

// 가능
let a = [[1], [2], [3], [4], [5]]

// 불가능
let b = [1, [2, 3, [4, 5, [6]]]]

기본 문법

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 레벨만 평탄화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
profile
궁금한걸 찾아보고 공부해 정리해두는 블로그입니다.

0개의 댓글