프로그래밍/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()
- 배열을 순회하여 주어진 함수를 실행해서
하나
의 결과값을 반환한다. - 주어진 콜백 함수의 인자는 아래와 같이 이루어진다.
- 이전까지의 누산값 accumulator
- 현재값 current
- 현재 index
- 원본 배열
이전까지의 함수의 리턴값은 누산값에 반영되고, 최종 누산값을 리턴한다.
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[, ...]]]])