프로그래밍/JavaScript

[JavaScript] 자주 사용되는 Array Method 정리

blu3fishez 2023. 3. 2. 18:23

진짜 하도 까먹어서 정리하기로 했다.

클론코딩 여럿 진행하면서 정말 자주 사용되는 몇개만 간추려 놨고, 그 외에는 아래 첨부된 링크를 참조하길 바란다.

공통적 요소

대부분 콜백 함수에 사용되는 인자는 3개로 아래와 같다.

  • element : 처리할 현재 요소
  • index : 처리할 현재 요소의 인덱스 값
  • array : filter를 호출한 배열 (O(N^2) 연산 시 사용될 것)

콜백 함수의 인자로는 아래 세개가 들어가며, 순서도 일치하기에 후에 코딩할 때 숙지하면 좋을 것 같다.

Array.prototype.map()

  • 각 모든 요소가 주어진 함수의 결과값을 토대로 재구성 됩니다.
  • arr.map(callback(currentValue[, index[, array]])[, thisArg])
  • currentValue : 현재 처리되는 요소
  • index : 현재 처리되는 요소의 인덱스 값
  • array : 호출한 array

Array.prototype.filter()

  • 주어진 함수의 테스트를 통과하는 요소만 모아 새로운 배열을 구성
    arr.filter(callback(element[, index[, array]])[, thisArg])
  • element : 처리할 현재 요소
  • index : 처리할 현재 요소의 인덱스 값
  • array : filter를 호출한 배열 (O(N^2) 연산 시 사용될 것)

Array.prototype.includes() (s 조심)

  • 호출한 배열이 메서드의 인수로 주어진 값을 포함하는지 판별함.
  • arr.includes(valueToFind[, fromIndex])
  • valueToFind : 탐색할 요소
  • fromIndex : 이 배열에서 검색을 시작할 위치. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다.

Array.prototype.find()

  • 주어진 판별 "함수" 를 만족하는 첫번째 요소를 반환합니다. includes와는 다르게 특정 함수를 넣어야하는 점에 주목하세요.
  • arr.find(callback[, thisArg])
  • callback : 판별 함수로 사용되는 콜백함수. 해당 함수의 인자는 element,index,array 이다.
    • element : 처리할 현재 요소
    • index : 처리할 현재 요소의 인덱스 값
    • array : filter를 호출한 배열 (O(N^2) 연산 시 사용될 것)

Array.prototype.reduce()

  • 배열을 순회하여 주어진 함수를 실행해서 하나의 결과값을 반환한다.
  • 주어진 콜백 함수의 인자는 아래와 같이 이루어진다.
  1. 이전까지의 누산값 accumulator
  2. 현재값 current
  3. 현재 index
  4. 원본 배열

이전까지의 함수의 리턴값은 누산값에 반영되고, 최종 누산값을 리턴한다.

arr.reduce(callback[, initialValue])

또한 두번째 인자값으로 누산값의 초기값을 지정해줄 수도 있다. 지정되지 않는다면 초기 누산값은 첫번째 배열값이 사용된다.

Array.prototype.slice(begin[, end])

  • 인자는 begin, end 로, begin부터 end까지의 배열의 일부를 새로운 객체로 반환합니다. 기존 array 값은 유지됩니다. 이때 begin의 값은 인덱스값과 동일하며, end 값은 복사의 중단점을 정의 합니다. 이때 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다.

예시 [0, 1, 2, 3].slice(0, 1) => [0]

Array.prototype.splice()

  • 기존 배열의 요소를 삭제/교체 하거나 새 요소(들)를 추가하여 배열을 재구성 시켜줍니다.
  • array.splice(start[, deleteCount[, item1[, item2[, ...]]]])