Javascript - 배열 함수형 메소드(method)(4)

Callback 함수를 활용하여 배열 함수형 메소드 사용방법에 대해 알아보겠습니다.

이전 배열 메소드에서 빠진 내용이 있어 여기에 추가를 합니다.

 

배열 판단하기

 - typeof로 배열을 판단할 때, 'object' 객체로 판별이 된다. 더욱 array와 object를 판별하는 하는 메소드가 있다.

 -형식

  *Array.isArray();

  *소괄호() 안에는 판별하고 싶은 값을 넣으면된다.

  *return 값은 true or false로 Boolean 값을 반환한다.(배열이면 true, 나머지들은 false를 return 해준다)

  *array로 되어있는 값만 true를 반환한다.

 

 

Array.forEach(callback);

 - callback은 반복 실행할 함수를 입력한다.

 - forEach는 Array의 element를 차례대로 callback 함수의 인자로 대입한다.

 - callback을 마무리 할 때, return 값은 없다.(다른 함수형들과 다른점)

 - callback 함수의 parameter를 정해주고, 그 parameter는 array의 element들이 들어간다.

 - element의 요소들을 순차적으로 넣어 줄 때 사용.

 

Array.filter(callback);

 - callback은 반복 실행할 함수를 입력한다.

 - filter는 어떤 특정값을 callback 함수를 거쳐서 만족하는 값만 반환 해준다.

 - callback 함수에 filter 된 값들을 반환해야 한다.

 - callback 함수의 parameter를 정해주고, 그 parameter는 array의 element들이 들어간다.

 - 어떤값을 조건으로 필터링 할 때 사용

 

Array.map(callback);

 - callback은 반복 실행할 함수를 입력한다.

 - map은 callback 함수를 거쳐서 mapping을 한 후 반환 한다.(자동차 엔진을 mapping 해서 기존의 ECU를 제어하여 출력을 올리듯이, 배열의 element를 mapping하여 element의 값들을 업그레이드 해준다고 생각하면 쉬울 것 같다.)

 - callback 함수에 mapping한 값들을 반환해야 한다.

 - callback 함수의 parameter를 정해주고, 그 parameter는 array의 element들이 들어간다.

 - 어떤값을 변환할 때 많이 사용

 

Array.reduce(callback);

 - callback은 반복 실행할 함수를 입력한다.

 - reduce는 배열을 값들을 받아서 한개의 값으로 변환을 한다.(reduce라는 단어 뜻은 '줄이다'인데 길이가 length 5인 배열을 lenth가 1인 배열이든, 객체이든, 문자열로 반환 해준다고 생각하면 쉬울 것 같다)

 - callback 함수에 reduce한 값들을 반환해야 한다.

 - 다른 forEach, filter, map과 다르게 reduce의 값은 축적값과 현재값 초기값을 넣어줘야한다.(만약 초기값이 없으면 배열의 index가 0인 element가 초기값으로 지정 된다. 현재값은 배열 index가 1인 element가 처음으로 들어간다.)

 - 예제로 설명하겠다.

 - 형태

  Array.reduce(function (축적값, 현재값){

         return  코드
}, 초기값);

  *초기값을 설정을 안했을 때, acc의 처음 값은 array의 index가 0인 값인 1이 들어 갔다. 그리고 curr은 index가 1인 값인 2부터 대입이 된다.

  *초기값을 설정을 했을 때, acc의 처음 값은 초기값인 0으로 들어 갔다.

  *acc는 코드를 실행하고 계속 적으로 축적이 된다.

  *curr은 배열의 element들을 순차적으로 넣어 주고 있다.(초기 값이 지정이 없으면 acc에 첫번째 element가 들어가고 curr에 두번째 element부터 들어간다)

 - 어떤 값을 계산 하거나 한개의 객체나 배열, 문자열로 반환 할 때 많이 사용

 

 

하기 내용은 함수형 프로그램을 애니메이션으로 보여줘서 이해하는데 많은 도움이 됩니다.

**reference : https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47

Map, Filter and Reduce – Animated

 

#javascript#생활코딩#codestates#Array.isArray()#forEach#fiter#map#reduce#함수형메소드#callback