JavaScript의 5가지 실용적인 배열 메서드

각각()

The forEach() method executes a provided function for each array element.

const numbers = [1,2,3,4,5];

numbers.forEach(element => {
  console.log(element + 10);
});

11
12
13
14
15

forEach는 배열의 각 요소에 대해 동일한 기능을 실행합니다. 아무것도 반환하지 않습니다. 다음 코드에서 console.log(resultForEach)를 수행하려고 하면 undefined가 나타납니다.

const numbers = [1,2,3,4,5];

const resultForEach = numbers.forEach(element => {
  return element * 10;
});

console.log(resultForEach);

undefined

Reference link1

지도()

The map() method creates a new array with the results of calling a function for every array element.

const numbers = [1,2,3,4,5];

const resultMap = numbers.map(element => {
  console.log(element + 10);
});

11
12
13
14
15

map() 메서드는 forEach() 메서드와 동일한 결과를 보여줍니다. 그러나 다음 코드에서 console.log(resultMap)를 수행하려고 하면 반환 값이 나타납니다. 반환 값이 있으며 새 배열을 생성할 수 있습니다. 이것이 map() 메서드와 forEach() 메서드의 큰 차이점입니다.

const numbers = [1,2,3,4,5];

const resultMap = numbers.map(element => {
  return element + 10;
});
console.log(resultMap);

[ 11, 12, 13, 14, 15 ]

Reference link2

필터()

The filter() method returns a new array with all elements that pass the test defined by the given function.

const numbers = [1,2,3,4,5];

numbers.filter( element => {
  if (element % 2 == 0){
    return true;
  }
  else{
    return false;
  }
});

[ 2, 4 ]

filter() 메서드는 주어진 조건을 만족하는 요소만으로 구성된 새로운 배열을 생성할 수도 있습니다.
Reference link3

모든() 및 일부()

에브리()

The JavaScript Array every() method checks if all the array elements pass the given test function.

const numbers = [1,2,3,4,5];

const resultEvery = numbers.every( element => {
  return element <= 5;
} );

console.log(resultEvery);

true

const numbers = [1,2,3,4,5];

const resultEvery = numbers.every( element => {
  return element % 2 == 0;
} );

console.log(resultEvery);

false

썸()

The some() method tests whether any of the array elements pass the given test function.

const numbers = [1,2,3,4,5];


const resultSome = numbers.some( element => {
  return element % 2 == 0;
} );

console.log(resultSome);

true

every() 메서드와 some() 메서드를 세트로 기억해야 합니다. every() 메서드는 모든 요소가 조건을 충족해야 하는 반면 some() 메서드는 적어도 하나의 요소가 조건을 충족해야 합니다. every() 메서드와 some() 메서드에 대해 동일한 조건을 작성했지만 결과는 달랐습니다.
Reference link4
Reference link5

줄이다()

The reduce() method executes a reducer function on each element of the array and returns a single output value.

const numbers = [1,2,3,4,5];

const resultReduce = numbers.reduce((accumulator,currentValue,currentIndex,array) => {
  return accumulator + currentValue;
});

console.log(resultReduce);

15

reduce() 메서드는 다른 메서드보다 까다롭습니다. 4개의 매개변수를 가질 수 있습니다. (currentIndex와 배열 작성은 건너뛸 수 있습니다.) 새로운 배열이 아닌 하나의 값을 반환합니다.


단어
의미


어큐뮬레이터
초기 값 또는 실행 중이던 이전 결과

현재 값
지금 실행되고 있는 값

전류 인덱스
현재 실행 중인 인덱스

정렬
미리 제공되는 어레이

initialValue가 지정된 경우

누산기 = initialValue

currentValue = 배열의 첫 번째 요소

initialValue가 생략된 경우

누산기 = 배열의 첫 번째 요소

currentValue = 배열의 두 번째 요소

위의 코드에서 일어나는 일을 작성하겠습니다.


몇 번
어큐뮬레이터
현재 값
전류 인덱스


1위
1
2
1

2위
삼
삼
2

3위
6
4
삼

4일
10
5
4


Reference link6
Reference link7