[JS] Array 메소드 정리(+ reduce, filter, indexOf, map, forEach, fill)

Array.reduce()

배열의 모든 요소들에 대해 연산을 수행하여 하나의 값을 리턴해주는 함수이다. 하지만 한번에 2개의 요소를 계산하고 그 결과를 다음 요소와 계산하는 순차적인 방식으로 진행된다.

acc 는 누산기이며, 반환값을 누적시켜준다. cur 은 처리할 요소이다. 동작시킬 명령을 { } 안에 적어주면 된다.

idx 는 초기값으로, 만약 전달하면  acc 의 첫번째 값으로 대응되고 전달하지 않으면 배열의 첫번째 값이 acc의 첫번째 값으로 대응된다.

let a=[1,2,3,4,5];
let result1=a.reduce((acc,cur,idx)=>{return acc+=cur},0);
let result2=a.reduce((acc,cur,idx)=>{return acc+=cur},10);
console.log(result1); //15
console.log(result2); //25

 

초기값으로 배열을 전달해서 카운팅하는 방식으로도 활용이 가능하다.

const numbers = [2, -5, -123, 59, -5480, 24, 0, -69, 349, 3];
const result = numbers.reduce((acc, cur, idx) => { 
  if(cur < 0){
    // 처리할 현재 요소가 음수일 경우엔, 인덱스 0
    acc[0]++;
  }
  else if(cur > 0){
    // 처리할 현재 요소가 양수일 경우, 인덱스 1을 수정한다.
    acc[1]++;
  }
  return acc; //그리고 배열을 다 돌았다면 최종 수정된 배열을 반환
 }, [0,0]); //초기값으로 배열을 전달
console.log(result);  // [4, 5]

 

 

Array.filter()

'필터'라는 말 그대로, 배열에서 특정 조건을 만족하는 값들만 따로 걸러서, 새로운 배열을 만들어주는 함수이다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);
//3을 초과하는 값만 뽑아서 새로운 배열을 만든다.
console.log(result); 
// [4, 5]

실제로 할 동작을 적어두는 콜백함수는 함수 선언문도 가능하지만 주로 화살표 함수로 간단하게 작성한다.

 

const testArray = [1,2,3,4,5];
const newArray = testArray.filter(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    });
console.log(newArray);
/**
1
0
// [object Array] (5)
[1,2,3,4,5]
2
1
// [object Array] (5)
[1,2,3,4,5]
3
2
// [object Array] (5)
[1,2,3,4,5]
4
3
// [object Array] (5)
[1,2,3,4,5]
5
4
// [object Array] (5)
[1,2,3,4,5]
*/

 

콘솔 로그로 찍어보면, element는 현재 순회하는 배열의 밸류값, index는 그 밸류값의 인덱스값,array는 현재 배열 전체를 출력한다. 즉, 이 3가지 변수를 이용해서 콜백함수를 통해 다양한 동작을 실행시킬 수 있다.

 

 

indexOf()

문자열에서 특정 문자열을 찾아서 첫번째 위치를 인덱스 숫자로 리턴해주는 메소드이다. 2가지 매개변수로 '찾을 문자열'과 '시작하는 인덱스 위치'를 전달하면 된다. 만약 찾는 문자열이 없다면 -1을 리턴한다. 대소문자를 철저히 구분하기 때문에 주의해야 한다. 

const str='abcd'
console.log(str.indexOf('c')); // 2
console.log(str.indexOf('e')); // -1

 

 

map()

맵은 콜백 함수를 이용해서 배열의 각 요소에 전부 명령을 실행해주는 메소드이다. 어떤 동작을 할지 콜백 함수를 통해서 전달한다. 아래와 같은 형태로 작성하여 사용한다. this는 전달한 값을 콜백 함수 내에서 사용할 수 있도록 해주는 인수이다.

arr.map(function(element, index, array){  }, this);

const arr=[1,2,3,4];
let a=arr.map(function(b){ // b는 현재 동작할 요소를 의미한다.
   return b*3 + this;
}, 'hi')
console.log(a) // ["3hi","6hi","9hi","12hi"]

 

 

forEach()

배열의 모든 요소에 주어진 함수를 이용해서 동작하는 해주는 메소드로, 전달하는 매개변수와 기능이 map()과 비슷하지만 가장 큰 차이는 return 해주는 값이 없다는 것이다. 따라서 메소드를 호출하면 undefined가 출력된다. 새로운 배열을 리턴해줘야 하는 상황이 아니라면 forEach() 를 사용하는 것이 더 바람직하다. 예를 들어, 기존 배열을 수정하기만 하는 상황이 있을 수 있다.

const arr=[1,2,3,4];
arr.forEach((i)=>{
   if(i===1){
      arr[i]=4;
   }
})
console.log(arr); // [1,4,3,4]

 

 

fill()

배열에서 지정한 start index부터 end index 전까지(미포함)의 값을 주어진 밸류값으로 채워주는 메소드이다.

const arr=[1,2,3,4];
arr.fill('a',1,3);
console.log(arr); // [1,"a","a",4]

 

 

 

외부 참조 링크

 

https://miiingo.tistory.com/m/365

[Node.js] javascript: Array.reduce() 사용 방법 정리

https://7942yongdae.tistory.com/m/49

Javascript - Array filter 사용법

https://aljjabaegi.tistory.com/m/312

javascript filter 함수에 대해 알아보자 자바스크립트 filter 함수

https://hianna.tistory.com/379

[Javascript] 특정 문자 위치 찾기 (indexOf 함수)

https://www.freecodecamp.org/korean/news/javascript-map-method/

JavaScript Map - JS.map() 함수 사용 방법 (배열 메소드)

https://bigtop.tistory.com/58

[JavaScript] 자바스크립트 forEach 메서드 이해하기

https://hianna.tistory.com/399

[Javascript] 배열 같은 값으로 채우기