JS - 배열 메소드 (forEach, some, every, map, reduce, filter)

김정인·2022년 12월 11일
0

JavaScript

목록 보기
1/6
post-thumbnail

1. forEach


  • 배열의 반복문으로, 처음부터 마지막 요소까지 반복하며 주어진 콜백함수를 수행합니다.
  • break, return 을 통해 중지시키지 못합니다.
  • 배열 자체 내부 값을 변경하는 것입니다. (map 함수와의 차이점)
[1,2,3,4,5].forEach((item,idx) => {
  console.log(item, idx);
});

// 1 0
// 2 1
// 3 2
// 4 3
// 5 4

2. some


  • 배열의 요소 중 하나라도 콜백함수에서 true를 리턴하면 break되면서 true를 반환합니다.
  • 콜백함수에서 false를 리턴하면 continue 기능을 합니다.
[1,2,3,4,5].some((dr, idx)=>{
	if(dr==3){
    	return true
    }
}); // true

[1,2,3,4,5].some((dr, idx)=>{
	if(dr==3){
    	return false
    }
}); // false

3. every


  • 배열의 모든 원소가 조건에 맞는지 검사하는 합니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다.
[1,2,3,4,5].every((dr,idx)=> dr >= 3);
// false

[1,2,3,4,5].every((dr,idx)=> dr <= 10);
// true

4. map


  • 기존의 값을 다시 정의하거나 새로운 형태로 정의합니다.
  • 변경된 값의 새로운 배열로 리턴합니다. (forEach 함수와의 차이점)
let numbers = [1,2,3,4,5];

let mulNumbers = numbers.map((dr,idx,origin)=>{
	//dr:요소값, idx:인덱스값, origin:순회하는 대상
	return dr*2;
});

console.log(mulNumbers); // [2,4,6,8,10]

5. reduce


  • 배열의 각 요소에 대해 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환합니다.
  • 초기값이 없으면 계산식에서 오류가 날 수 있습니다.
// 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

let numbers = [1,2,3,4,5]
let sums = numbers.reduce((acc,cur,i)=>{
    console.log(acc, cur, i);
    return acc+cur;
},0);
//0 1 0
//1 2 1
//3 3 2
//6 4 3
//10 5 4

console.log(sums); //15

6. filter


  • 주어진 콜백함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
let numbers = [1,2,3,4,5];
let result = numbers.filter((dr)=>{
	return dr>3;
});
console.log(result); // [4,5]

//조건에 만족하는 데이터가 없는 경우 [] 리턴

profile
FE 개발자

0개의 댓글