자주 쓰이는 자바스크립트 배열 메소드 정리 (Javascript)

자바스크립트에서 자주 쓰이는 배열 메소드들을 정리해보려고 한다.

map

map은 배열의 각 요소에 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 이 메소드는 기존 배열을 변형하는 데 매우 유용하다. React에서는 주로 API 응답을 컴포넌트화 시켜 화면에 뿌려줄 때 (API 응답을 렌더링) 많이 쓰인다.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

forEach

forEach는 배열의 각 요소에 대해 주어진 함수를 실행한다. 이는 조건문 for의 대안으로 배열을 순회하는 데 주로 사용된다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));

filter

filter는 주어진 함수를 만족하는 모든 요소로 새 배열을 만든다. 이 메소드는 조건에 따라 배열에서 요소를 필터링할 때 사용된다.

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

find

find는 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환한다. 해당하는 요소가 없으면 undefined를 반환한다.

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
console.log(found); // 4

reduce

reduce는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다. 이 메소드는 배열 내 값을 합치거나 누적할 때 주로 사용된다. 콜백함수의 첫번째 매개변수는 누적되고 있는 이전의 값이고 두번째 매개변수는 순회중인 배열의 현재 요소 값이다. 콜백함수다음으로 전달되는 값은 초기값이다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((prevValue, currentValue) => prevValue + currentValue, 0);
console.log(sum); // 15

sort

sort는 배열의 요소를 적절한 위치에 정렬하고, 배열을 그대로 변경한다. 기본적으로 문자열로 변환하여 (1,2,3) (a,b,c)순으로 정렬한다. 하지만, 정렬 함수를 제공하여 커스텀 정렬 기준을 설정할 수도 있다.

const numbers = [3, 1, 4, 5, 9, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4, 5, 9]

reverse

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

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

slice

slice는 배열의 일부를 얕게 복사하여 새 배열 객체로 반환한다. 원본 배열은 변경되지 않는다. 시작인덱스와 종료인덱스가 slice메소드에 전달되는 값이며, 시작인덱스는 포함되고 종료인덱스는 포함되지 않는다. (시작인덱스부터 종료인덱스의 직전 요소들까지를 모아 새 배열로 반환)

const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(2, 4);
console.log(sliced); // [3, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (변경되지 않음)

slice 메소드 인자에 음수를 전달했을 경우!

단일 음수 인덱스: 배열의 끝에서부터 요소를 선택한다.

const numbers = [1, 2, 3, 4, 5];
const lastTwo = numbers.slice(-2);
console.log(lastTwo); // [4, 5]

음수 시작 인덱스와 양수 종료 인덱스: 시작 인덱스는 배열 끝에서부터 계산되고, 종료 인덱스는 배열 시작부터 계산된다.

const numbers = [1, 2, 3, 4, 5];
const middle = numbers.slice(-4, 3);
console.log(middle); // [2, 3]

양수 시작 인덱스와 음수 종료 인덱스: 시작 인덱스는 배열 시작부터 계산되고, 종료 인덱스는 배열 끝에서부터 계산된다.

const numbers = [1, 2, 3, 4, 5];
const middleToEnd = numbers.slice(1, -1);
console.log(middleToEnd); // [2, 3, 4]

splice

splice는 배열의 기존 요소를 삭제하거나 새 요소를 추가하여 배열의 내용을 변경한다. 이 메소드는 배열의 특정 부분을 조작할 때 매우 유용하다.

const numbers = [1, 2, 3, 4, 5];
// 인덱스 2에서 시작하여 1개의 요소를 제거하고, 그 자리에 'a', 'b', 'c'를 추가
numbers.splice(2, 1, 'a', 'b', 'c');
console.log(numbers); // [1, 2, 'a', 'b', 'c', 4, 5]

join

배열의 모든 요소를 연결하여 하나의 문자열로 만든다. 인자가 제공되지 않으면, 기본적으로 쉼표(",")가 사용된다.

let words = ["The", "quick", "brown", "fox"];
let sentence = words.join(" "); // 띄어쓰기 사용
console.log(sentence); // "The quick brown fox"