자바스크립트 반복문 정리 (forEach,map,filter 사용법)

1.forEach 사용법

forEach의 경우 함수를 받아 사용하며 반환값은 없다

const fruit = [
  "사과",
  "바나나",
  "오렌지",
  "포도",
  "키위",
  "망고",
  "복숭아",
  "수박",
  "딸기",
  "체리",
];
fruit.forEach((ele, index) => {
  console.log(ele, index);

});

forEach내부에 arrow function 넣고 함수의 매개변수를 받아 출력하게 됨 

ele 매개변수를 통해 forEach가 배열에 있는 거를 받아 console.log로 출력하게 된다

두 번째 매개변수인 index는 각 배열의 인덱스이며 출력하면 아래와 같이 나오게 된다

//출력결과
사과 0
바나나 1
오렌지 2
포도 3
키위 4
망고 5
복숭아 6
수박 7
딸기 8
체리 9

그리고 forEach를 통해 배열을 출력할 때 배열 안에 빈 슬롯 값이 없는 부분은 출력되지 않는다.

(빈 슬롯이 있을 경우를 잘 생각하고 써야 된다) 

 

2.forEach 예제 

이번에는 forEach를 사용하여 배열 안에 가장 큰 값을 찾는 예제이다

const nums = [1,3,6,19,39,2,20,40,99]
nums.forEach((ele,index,arr)=>{
    if(ele===Math.max(...arr)){ //스프레드 연산자 사용
        console.log(`${ele}는 배열에서 가장 큰 값이다`)
        
    }
})
/*출력결과*/
//99는 배열에서 가장 큰 값이다

 

함수 안에 이번에는 매개변수 3개가 들어가 있다.(ele, index, arr)

forEach 내부 함수에는 매개변수 총 3개가 있고

각 매개변수가 의미하는 건 아래와 같다.

매개변수	의미
ele	현재 순회 중인 배열의 값(배열안에 원소)
index	순회 중인 배열의 인덱스(순서)
arr	forEach를 통해 처리하고 있는 원본 배열 전체

if문에서 반복되고 있는 배열 안의 값을 조건을 비교해서 가장 큰 값을 출력하게 한다

여기서 if문안에 스프레드 연산자를 사용한다

스프레드 연산자란? 원본 배열을 받은 거를 배열 자체가 아닌 그 배열 안에 원소들을 하나씩 꺼내서 순서대로 Math.max안에 넣어 

가장 큰 값이 뭔지 찾게 된다. Math.max(1,2,3,4,5) 배열 형태가 아닌 매개변수 형태로 받아 큰 값을 뽑아 주기 때문에 스프레드 연산자를 사용하였다. 스프레드 연산자는 ele처럼 하나씩 배열 안에 값 가져온다

3.map 사용법

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
//화살표 함수에서 중괄호{}를 생략하면 화살표 함수에서는 표현식의 결과를 
//자동으로 return함 

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5]  (원본은 그대로)

맵은 반드시 배열을 반환하고  forEach와 다르게 변수에 선언하여 많이 사용함

return에 * 2를 원본배열인 numbers에 각 원소가 *2된 새로운 배열을 만들어서 출력하게 된다

화살표 함수에서는 {}를 사용 안 하면 자동으로 결과가 리턴되는 것 같다

const users = [
  { name: "Alice", age: 25 },
  { name: "kim", age: 39 },
  { name: "Bob", age: 34 },
  { name: "tom", age: 32 },
];

const names = users.map((ele, index) => {
  return ele.name
});

console.log(names); 
//출력결과
//[ 'Alice', 'kim', 'Bob', 'tom' ]

 

매개변수는 forEach와 동일하게 ele(첫 번째 매개변수)이는 배열 안에 값을 반복시키고 index(두 번째 매개변수) 순서 세 번째 매개변수는 원본배열이 된다

4.filter 사용법

filter는 조건을 걸어주며 filter 또한 매개변수가 넣는 거는 forEach, map이랑 동일하다
결과값은 배열로 나오며 데이터를 필터링할 때 많이 쓴다

const users = [
  { name: "Alice", age: 25 },
  { name: "kim", age: 39 },
  { name: "Bob", age: 34 },
  { name: "tom", age: 32 },
];

let data = users.filter((ele)=>{
    return ele.age >= 30
})
console.log(data)

//출력결과
/*
[
  { name: 'kim', age: 39 },
  { name: 'Bob', age: 34 },
  { name: 'tom', age: 32 }
]
*/

return에서 조건을 걸어 원하는 값만 나오게 된다/

주석으로 처리된 출력결과를 보면 users배열 안에 age가 30 이상인 사람만 출력하게 된다.

5.filter와 map 같이 사용

const users = [
  { name: "Alice", age: 25 },
  { name: "kim", age: 39 },
  { name: "Bob", age: 34 },
  { name: "tom", age: 32 },
];

// filter로 조건에 맞는 사람만 남기고 map으로 이름만 추출
const adultNames = users
  .filter(user => user.age >= 30) // 나이 30 이상 필터
  .map(user => user.name);        // 이름만 뽑기

console.log(adultNames); // ['kim', 'Bob', 'tom']

filter를 통해 나이가 30 이상인 사람만 걸러내고 map을 통해  객체에서 이름만 출력하게 하여 ['kim', 'Bob', 'tom']이 나오게 된다

filter와 map은 자주 같이 사용한다