[javascript] 다차원 배열을 일차원으로 변경하는 방법 flat(), flatMap(), map()

javascript flatMap() flat(), map()

 

함수형 프로그래밍을 하기 위해서 즉, 명령형 프로그래밍이 아닌 선언형 프로그래밍을 하기 위해서는 언어 내부에 포함된 고차함수(Higher-Order Function)  (예: Array prototype인 map, filter, reduce) 를 잘 이용해야한다.   

여기에 ECMAScript 2019(ES10) 부터 새롭게 flat()과 flatMap() 이 추가되었다.  둘 다 중첩된 배열 구조를 평탄화 하기 위해 사용하는 함수이며 IE에서는 호환이 되지않는다.

명령형프로그래밍이란? ↓

명령형(imprerative) vs 선언형(declarative)
 명령형 프로그래밍은 어떻게 할 것인가 (How)를 표현하고, 선언형 프로그래밍은 무엇을 할 것인가 (What)을 표현한다. 

//명령형
function add (arr) {
  let result = 0
  for (let i = 0; i < arr.length; i++){
    result += arr[i]
  }
  return result
}

//선언형
function add (arr) {
  return arr.reduce((prev, current) => prev + current, 0)
}

/**
* 명령형은 function안에 result라는 내부 변수의 값에 따라서 return 값이 변경된다.
* 선언형은 내부변수를 사용하지 않고 파라미터만 일관된다면 예측가능한 아웃풋을 기대할 수 잇다. 
*/​

선언형 프로그래밍 즉, 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환값으로 함수를 받을 수도 있는 형태를 말한다.  외부참조를 하지않으며 외부 환경에 영향을 받지 않고 정해진 인풋만 주어진다면 일관된 아웃풋을 내보내기 때문에  파라미터로, 반환값으로 등등 일관되게 쓰일 수 있는 것이다.

 

Array.prototype.map()

map() 메소드는 배열 내 엘리먼트 값을 변경해서 변경된 값을 가진 배열로 만들어준다.

const arr = [1,2,3];
const newArr = [];

for(i of arr) {
	newArr.push(i*2);
}

console.log(newArr); //[2,4,6]


const arr2 = [1,2,3];
arr2.map(a => a*2); // [2,4,6]

 

 

flat(), flatMap()

1. Array.prototype.flat([depth])

    const newArr = arr.flat([depth])

---

매개변수 depth로 어느 깊이까지 평평하게 할껀지 정할 수 있다. (depth를 생략했을때는 기본값은 1)
depth에 Infinity를 사용하면 하위배열이 없을때까지 평평하게 바꿔준다.

 

/**
* 다중배열을 일차원 배열로 변경하고 싶을때.
* const cities = ['seoul', ['jeju','busan',['pohang']], 'iksan'];
*  => ['seoul', 'jeju', 'busan', 'pohang', 'iksan'];
*/


const cities = ['seoul', ['jeju','busan',['pohang']], 'iksan'];

const flatten = (arr) => {
	return arr.reduce((acc, cur) => {
    	// acc 초기값은 []로 []에 concat 한다.
        // concat()은 인자로 주어진 배열이나 값들을 기존배열에 합쳐서 새 배열을 반환한다.
    	return acc.concat(
        	//cities의 요소가 배열이라면 재귀로 같은 작업 반복
        	Array.isArray(cur)? flatten(cur): cur
        );
    }, []);
}

console.log(flatten(cities)); // ['seoul', 'jeju', 'busan', 'pohang', 'iksan']


/**
* flat() 사용
*/

cities.flat(2); // ['seoul', 'jeju', 'busan', 'pohang', 'iksan']
cities.flat(1); // ['seoul', 'jeju', 'busan', ['pohang'], 'iksan']

 

2. Array.prototype.flatMap()

  arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

---

배열을 평평하게 해주는 flat()의 기능과 배열의 각 요소에 접근하여 사용자 정의 로직을 수행할 수 있는 map()의 기능을 합친 함수이다.

flat()과 다르게 한 레벨만 평탄화 된다.

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]]

 

 

 

참고: https://velog.io/@kyusung/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9A%94%EC%95%BD, https://brunch.co.kr/@swimjiy/22,https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap,

---