배열과 관련된 함수들 (for, forEach, map, filter, some, every, find, findIndex, reduce)

특정 작업을 배열 안에 있는 녀석들에게 순차적으로 적용시킬 때 쓰게되는 for문.

 

for문과 같은 비슷한 역할들을 해주는 배열함수들을 이용하면 더 간단하거나 유용하게 코드를 작성할 수 있게 된다.

 

let 나는배열 = ["김치", "참치", "고구마", "감자", "대홍단"];

이와 같은 배열을 가지고 각각 어떤 역할을 하고 어떻게 이용하는지 알아보자

---

• forEach

forEach 는 해당 배열에 원하는 작업을 첫번째 인덱스부터 마지막 인덱스까지 전부 실행시켜준다.

나는배열.forEach((뀨, index) => {
  console.log(뀨, index);
});

김치 0
참치 1
고구마 2
감자 3
대홍단 4

나는배열이란 배열을 forEach 함수를 사용하여 (뀨, index) 에서 첫번째 매개변수인 뀨에

배열의 첫번째 인덱스인 "김치"를 넣고

실행할 작업 { console.log(뀨, index) } 을 실행한다.

이와 같은 과정을 마지막 인덱스인 "대홍단" 까지 시행한다.

첫번째 매개변수엔 배열에 들어있는 내용이 들어가고

두번째 매개변수엔 해당 배열의 인덱스값이 들어가게 된다 

 

for문으로 작성한다면 다음과 같다

for (let i = 0; i < 나는배열.length; i++) {
  console.log(나는배열[i], i);
}

---

• map

map 함수는 forEach처럼 배열을 받아 특정 작업{  }을 시행하는것을 같지만 forEach는 반환값이 없는 반면

map은 반환값을 지정할 수 있고, 반환된 결과물들도 배열로 만들어져있다.

let 맵함수 = 나는배열.map((뀨) => {
  return 뀨;
});
console.log(맵함수);

[ '김치', '참치', '고구마', '감자', '대홍단' ]

---

• filter

filter도 map 함수처럼 결과는 배열로 반환하며,

각 배열 안에서 특정 조건에 만족하는(true) 값들만 반환한다.

let 나는필터 = 나는배열.filter((뀨) => {
  return 뀨.substr(-1) == "치";
});
console.log(나는필터);

[ '김치', '참치' ]

각 배열의 마지막 글자가 "치" 인 조건에 만족하는 "김치" 와 "참치" 가 반환된 것을 볼 수 있담

---

• some

filter는 조건에 만족하는 녀석들을 반환한다면

some은 만족하는 녀석이 있으면 ture, 없으면 false를 반환한다.

let 나는썸 = 나는배열.some((뀨) => {
  return 뀨.substr(-1) == "치";
});
console.log(나는썸);

true

---

• every

some은 조건에 만족하는 녀석이 하나라도 있으면 true를 반환하지만(or)

every는 조건이 해당 배열의 모든 녀석들에 만족해야 true를 반환한다.(and)

let 나는에부리 = 나는배열.every((뀨) => {
  return 뀨.substr(-1) == "치";
});
console.log(나는에부리);

false

---

• find

find는 조건에 만족하는 녀석이 있으면 그 녀석(배열요소)을 반환해준다.

모두 반환이 아니라 제일 먼저 찾은 녀석 하나만 반환해준다.

let 나는파인두 = 나는배열.find((뀨) => {
  return 뀨.substr(-1) == "치";
});
console.log(나는파인두);

김치

---

• findIndex

find와 동일하며 반환값이 찾은 녀석의 인덱스값인것이다

let 나는파인두인덱수 = 나는배열.findIndex((뀨) => {
  return 뀨.substr(-1) == "치";
});
console.log(나는파인두인덱수);

0

---

• reduce

reduce는 조금 복잡해서 console.log 를 찍어보며 풀어보았다.

기본 틀은 이러하다

배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초깃값);

각 명칭들에 들어갈 값들을 설명하자면

'배열'은 reduce 메서드를 적용할 배열이다. 예를들면 [3,6,9,7,7]

'누적값'에는 reduce가 반환하는 '결과'가 들어간다.

'현재값'에는 이번회차에 들어간 '배열'의 값이 들어간다. 

'인덱스'는 이번회차의 '배열'의 인덱스값이다.

'요소'는 '배열'이 들어있다

'결과'는 한번씩 돌때마다 반환할 값으로 제일 마지막에 반환한 값이 reduce의 최종 결과값으로 나타난다

'초깃값'은 reduce가 첫 회차가 돌기 전에 '누적값'에 넣어둘 값이다.

 

위에 만들어 두었던 '나는배열'로 예시를 만들어보았다.

let 나는리듀수 = 나는배열.reduce((누적값, 현재값, 인덱스, 요소) => {
  console.log(요소);
  console.log(
    "현재 인덱스->" + 인덱스,
    "// 이번에 더할건->" + 현재값,
    "// 그동안 누적된값->" + 누적값
  );
  return 누적값 + 현재값;
}, "나는 초깃값/");
console.log(나는리듀수);

[ '김치', '참치', '고구마', '감자', '대홍단' ]
현재 인덱스->0 // 이번에 더할건->김치 // 그동안 누적된값->나는 초깃값/
[ '김치', '참치', '고구마', '감자', '대홍단' ]
현재 인덱스->1 // 이번에 더할건->참치 // 그동안 누적된값->나는 초깃값/김치
[ '김치', '참치', '고구마', '감자', '대홍단' ]
현재 인덱스->2 // 이번에 더할건->고구마 // 그동안 누적된값->나는 초깃값/김치참치
[ '김치', '참치', '고구마', '감자', '대홍단' ]
현재 인덱스->3 // 이번에 더할건->감자 // 그동안 누적된값->나는 초깃값/김치참치고구마     
[ '김치', '참치', '고구마', '감자', '대홍단' ]
현재 인덱스->4 // 이번에 더할건->대홍단 // 그동안 누적된값->나는 초깃값/김치참치고구마감 
자
나는 초깃값/김치참치고구마감자대홍단

'나는배열'은 5개의 요소를 가지고 있다. 고로 reduce는 5회 동작할 것이다.

'요소'에는 '나는배열'이 들어있기 때문에 매회마다 [ '김치', '참치', '고구마', '감자', '대홍단' ] 이 출력되었다

'초깃값' 자리에 "나는 초깃값/" 을 넣었기에 매번 찍히는 console.log와 마지막 반환값 모두 맨 앞에

"나는 초깃값/" 이 붙어있다.

첫회차에 누적값은 "나는 초깃값/" 이고 '현재값'은 "김치" 이다. 이 둘을 더하여 반환하였고

이는 2회차의 '누적값'이 된다.

이러한 과정을 거쳐 최종적으로 5회차에 "나는 초깃값/김치참치고구마감자" + "대홍단" 를 하여

reduce의 최종 결과값은 

"나는 초깃값/김치참치고구마감자대홍단"

이 되는것을 볼 수 있다.

 

흔한 예시가 덧셈이라고 하는데 덧셈말고 다른 응용방법은 언젠가 써먹을 날이 생기면 시도해 보겠다..

---

알아두면 필요할 때 유용하게 써먹을 수 있을 것일 것이라 예상하는 바이다

코알누님, 제로초님 감사..
https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍

https://www.youtube.com/watch?v=kLYdgg0ljTk