유용한 자바스크립트 배열 함수 find, includes, flat

dev | 2019-05-23

배열을 다룰 때 특정 조건을 만족하는 바로 그 요소를 반환 받고 싶을 때가 있었는데 이때 유용한 메서드가 바로 .find()이다. .filter()는 새 배열을 반환하지만 .find()는 인자나 undefined를 반환한다. 키 밸류가 저장되어 있는 myobj 객체에서 myvalue 값에 해당하는 키를 찾고자 할 떄 아래와 같이 사용할 수 있다.

const key = Object.keys(myobj).find(arr => myobj[arr] === myvalue)

MDN의 .find() 메서드 설명을 보면 .findIndex(), .indexOf(), .includes()도 같이 설명하고 있는데 이 .includes()텍스트 필터를 만들 때도 유용하게 사용할 수 있다. 인풋으로 keyword 문자열을 받고 이 문자열을 포함하고 있는 목록만 보여주고 싶다면 아래와 같이 문자열을 배열처럼 다뤄서 간단하게 처리할 수 있다.

const filteredList = this.longList.filter(item => this.keyword.length === 0 || item.name.includes(this.keyword));

마지막으로 2차원 배열을 1차원 배열로 풀어주는 .flat()이 있다. 아래처럼 하면 새 1차원 배열이 반환 된다. 얼마나 배열을 깊게 들어가 풀어줄지도 설정할 수 있다.

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

객체의 항목들이 배열을 값으로 가지고 있고 이 배열들만 싹 가지고와서 새로운 배열을 만들고 싶다면 아래와 같이 할 수 있다.

/*
category = {
  category1: [category2, category2, category2, ...],
  category1: [category2, category2, category2, ...],
  ...
}
이런 객체에서 category2를 뽑고 싶을 때,
*/
const category2 = Object.keys(category).map(category1 => category[category1]).flat();

Comments

  • miname 2019-05-23

    마지막 예제 코드에 오타가 있는 것 같습니다. 배열에다 category2 항목만 뽑으려면 map 함수 안에서 keys 대신에 values를 써줘야 합니다. const category2 = Object.keys(category).map(category1 => Object.values(category[category1])).flat(); 혹은 더 짧게 아래처럼 바로 넘겨주면 좋겠네요. const category2 = Object.keys(category).map(category1 => category[category1]).flat(); ES6+는 개발자에겐 축복인 것 같습니다. 상가신 일 대신 해치워주는 느낌. :)

  • 신현석 2019-05-23

    오랬만입니다. miname님! 오류 알려주셔서 감사합니다.

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.