[ES6] 필터링 문법 줄이기

이번글에서는 필터링 코드를 간략화시켜 작성하는 방법에 대해 써보자한다. 배열은 하나만 놓고 보았을때는 단순한 구조이지만 오브젝트와 배열이 혼합됨에 따라 복잡한 구조로 바뀌어나가게되고 이렇게 복잡해져버린 배열에서 원하는 정보만을 추출하려면 filter()나 find()같은 내장함수를 사용해야 한다.

{
  "items": [
    {
      "header": "header content",
      "main": "main contnet 1"
    },
    {
      "header": "header content",
      "main": "main contnet 2"
    },
    {
      "header": "header content",
      "main": "main contnet 3"
    }
  ]
}

위와같은 json형태는 items라는 Array안에 Object가 들어가있는 구조이다. 이런 구조에서 main값이 'main content 3'인 값을 찾기 위해서는 find함수를 사용해야한다.

let result = dataObj.find(obj => obj.content=='main content 3');

이전에 화살표 함수를 사용해서 함수식을 단축시켰던과 비슷하게 하나의 인수만을 사용해 find()함수를 사용할 수 있다. find함수의 경우 filter와 다르게 조건에 부합되는 첫번째 배열만을 반환한다. 그러므로 1개 이상의 배열을 색적해야 하는 경우 다음과 같이 사용하면 된다.

let result = dataObj.filter(obj => {
  return obj.header=='header content';
});

위와같이 filter함수를 사용할 경우 result변수에 배열 형태로 조건에 부합되는 배열을 반환한다.

 

대부분의 SPA 프레임워크가 그렇겠지만 vue는 배열형태로 데이터를 조작한다. 배열을 조작할때 자주 사용하는 함수인 filter, find, map, shift, unshift, push등의 함수들의 사용법은 구글링하지 않고도 자유자재로 사용할 수 있는게 좋겠다는 생각이 든다.