[JavaScript] 자주 쓰는 배열 메서드들 정리

1. push와 pop

• push: 배열의 끝에 하나 이상의 요소를 추가한다.
• pop: 배열의 마지막 요소를 제거하고 그 요소를 반환한다.

let arr = [1, 2, 3];
arr.push(4);  // [1, 2, 3, 4]
let lastElement = arr.pop();  // lastElement: 4, arr: [1, 2, 3]

2. unshift와 shift

• unshift: 배열의 앞에 하나 이상의 요소를 추가한다.
• shift: 배열의 첫 번째 요소를 제거하고 그 요소를 반환한다.

arr.unshift(0);  // [0, 1, 2, 3]
let firstElement = arr.shift();  // firstElement: 0, arr: [1, 2, 3]

3. concat

• 두 개 이상의 배열을 합쳐 새로운 배열을 반환한다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);  // [1, 2, 3, 4]

4. slice

• 배열의 일부를 추출하여 새로운 배열을 반환한다.

let sliced = arr.slice(1, 3);  // [2, 3]

5. splice

• 배열의 기존 요소를 제거 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

arr.splice(1, 1, 'a');  // [1, 'a', 3], 2번 인덱스에서 1개의 요소를 제거하고 'a'를 추가

6. forEach

• 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행한다.

arr.forEach((element) => {
  console.log(element);
});
// 출력: 1 'a' 3

7. map

• 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

let doubled = arr.map((number) => number * 2);  // [2, NaN, 6]

8. filter

• 주어진 함수의 조건을 만족하는 요소만으로 구성된 새로운 배열을 반환한다.

let numbers = [1, 2, 3, 4];
let even = numbers.filter((number) => number % 2 === 0);  // [2, 4]

9. reduce

• 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  // 10

10. find

• 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 없다면 undefined를 반환한다.

let found = numbers.find((number) => number > 2);  // 3

11. findIndex

• 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 없다면 -1을 반환한다.

let foundIndex = numbers.findIndex((number) => number > 2);  // 2

12. includes

• 배열이 특정 요소를 포함하고 있는지 확인하여 true 또는 false를 반환한다.

let hasTwo = numbers.includes(2);  // true

13. indexOf

• 배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환한다. 존재하지 않으면 -1을 반환한다.

let index = numbers.indexOf(3);  // 2

검색 시작 인덱스 지정

• indexOf 메서드는 두 번째 인자로 검색을 시작할 인덱스를 받을 수 있다.

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

let index = numbers.indexOf(3, 3);  // 4

14. lastIndexOf

• 배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환한다. 존재하지 않으면 -1을 반환한다.

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

let lastIndex = numbers.lastIndexOf(3);  // 4

15. join

• 배열의 모든 요소를 문자열로 연결하여 반환한다.

let str = numbers.join('-');  // '1-2-3-4'

16. sort

• 배열의 요소를 정렬하고 배열 자체를 변경한다. 기본적으로 각 요소를 문자열로 취급하여 유니코드 코드 포인트 순서로 정렬한다.

let unsorted = [3, 1, 4, 1, 5];
unsorted.sort();  // [1, 1, 3, 4, 5]

• 숫자 배열을 오름차순으로 정렬하려면 비교 함수를 제공해야 한다.

let numbers = [10, 2, 5, 3];
numbers.sort((a, b) => a - b);  // [2, 3, 5, 10]

17. reverse

• 배열의 요소 순서를 반전시킨다.

unsorted.reverse();  // [5, 4, 3, 1, 1]

18. some과 every

• some: 배열 안의 어떤 요소라도 주어진 판별 함수를 만족하면 true를 반환한다.
• every: 배열 안의 모든 요소가 주어진 판별 함수를 만족하면 true를 반환한다.

let someGreaterThanTwo = numbers.some((number) => number > 2);  // true
let allGreaterThanTwo = numbers.every((number) => number > 2);  // false

19. fill

• 배열의 모든 요소 또는 일부 요소를 지정된 값으로 채운다.

let array = [1, 2, 3, 4, 5];
array.fill(0, 1, 4);  // [1, 0, 0, 0, 5]

• fill(value, start, end): start부터 end 전까지의 요소를 value로 채운다. start와 end를 생략하면 배열 전체를 채운다.

20. at

• 배열의 특정 인덱스에 위치한 요소를 반환한다. 음수를 사용하여 배열의 끝에서부터 인덱스를 셀 수 있다.

let array = [1, 2, 3, 4, 5];
let element = array.at(-1);  // 5

• at(index): 주어진 인덱스의 요소를 반환한다. 인덱스가 음수이면 배열의 끝에서부터 센다.