자바스크립트 function approach

functional chaining 등 함수 자체를 인자로 넣거나, 객체화하여 활용 (다양한 사용이 가능)

js의 여러 유틸리티들을 사용해서 코드를 작성하는것이 깔끔한 코드 작성에 유리함

추가로, if-else statement를 줄이고, 자료구조의 method를 활용하고, mutation을 최대한 줄이는 것이 좋음

 

array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 가장 많이 쓰이는 함수 중 3 대장이라고 할 수 있는 것이 map, filter, reduce인데요. 그중 filter는 활용도가 높은 편이라 어디라고 정해진 곳 없이 사용되는 편입니다. 자 본격적으로 array의 filter 함수를 알아보러 가시죠.

filter 정의

Array.prototype.filter ( callbackfn [ , thisArg ] )

filter는 해석 그대로 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. SQL로 치면 where절에서 하는 행위를 하는 함수입니다. ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다"라고 정의되어 있습니다. 예제를 통해 filter의 정의를 살펴보면 다음과 같습니다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [4, 5]

예제 코드는 array를 통해 주어진 값들을 filter를 통해 3 보다 큰 수를 가진 값들을 걸러내는 방법입니다. 물론 for문을 사용해서도 이와 같은 작업을 할 수는 있지만 권장하지는 않습니다. map, filter, reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다라는 개념을 내포하고 있기 때문에 for문이 가진 순회를 별다른 코드를 작성하지 않고도 사용할 수 있게 해 주기 때문입니다.

filter 사용법

filter를 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 Boolean 값인 true 또는 false 값을 반환하는 함수를 등록하는 것입니다.

 

 

Array map 사용법/정의

Array.prototype.map ( callbackfn [ , thisArg ] )

주로 주어진 배열의 값을 재정의 할 때 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다. 예제 코드를 통해 map의 사용법을 살펴보겠습니다.

map을 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록하는 것입니다. 원하는 형태의 array로 만들 때 사용

 

Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 map, filter만큼 잘 쓰이는 함수는 아니지만 함수 결과를 체이닝 형식으로 사용하기 때문에 합산과 같은 연속적인 일들의 결과를 만들어 낼 때 자주 사용됩니다.

reduce 정의

Array.prototype.reduce ( callbackfn [ , initialValue ] )

reduce는 단어 의미 그대로 해석하면 줄이다는 표현인데, 함수로 정의된 내용은 배열의 값을 하나씩 줄여가면서 모든 배열을 순회할 때까지 결과를 callbackfn에 전달합니다. 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 편입니다. 예를 든다면 덧셈이나 곱셈 같은 합산 식을 이용할 때 사용됩니다. 빅데이터 프레임워크인 맵리듀스(MapReduce)와 같은 이름도 같은 맥락에서 지어진 거라고 생각하시면 더 이해하기 편하실 수 있어요. ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callback을 함수로 호출해 결과를 만들어 반환한다"라고 정의되어 있습니다. reduceRight는 reduce와 배열의 값들을 내림차순으로 접근한다는 부분만 다를 뿐 나머지는 동일한 원리로 동작합니다.

 

reduce 사용법

reduce의 사용 방법은 callbackfn을 통해 주어진 4개의 인자(초기 값, 요소 값, index, 순회하는 대상 객체)를 사용해 결과를 반환하는 함수를 등록하는 것입니다.