JavaScript 배열 메서드 정리

원본 배열 수정하는 메서드

push

배열의 끝에 하나 이상의 요소를 추가

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

 

pop

배열의 마지막 요소를 제거하고 해당 요소를 반환

const originalArray = [1, 2, 3];
const removedElement = originalArray.pop(); // 3
console.log(removedElement); // 3
console.log(originalArray); // [1, 2]

 

unshift

배열의 시작 부분에 하나 이상의 요소를 추가

const originalArray = [2, 3];
originalArray.unshift(1);
console.log(originalArray); // [1, 2, 3]

 

shift

배열의 첫 번째 요소를 제거하고 해당 요소를 반환

const originalArray = [1, 2, 3];
const removedElement = originalArray.shift();
console.log(removedElement); // 1
console.log(originalArray); // [2, 3]

 

splice

배열에서 요소를 제거하거나 새로운 요소를 삽입하여 배열을 수정

array.splice(start[, deleteCount[, addItem1[, addItem2[, ...]]]])

• start : 배열의 변경을 시작할 인덱스
  • 음수인 경우 배열의 끝에서부터 요소를 세어나감
• deleteCount : 배열에서 제거할 요소의 수
  • 0 이하라면 어떤 요소도 제거하지 않음
• addItem : 배열에 추가할 요소
  • 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 함

const originalArray = [1, 2, 3, 4, 5];
originalArray.splice(1, 2); // [2, 3] 제거
console.log(originalArray); // [1, 4, 5]

originalArray.splice(1, 0, 6, 7); // 인덱스 1에 6과 7 삽입
console.log(originalArray); // [1, 6, 7, 4, 5]

 

reverse

배열의 요소 순서를 역순으로 변경

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

 

sort

배열의 요소를 정렬

• 기본적으로는 문자열로 변환하여 정렬 (참고 사이트)
• 비교 함수를 제공하여 사용자 정의 정렬 기준을 설정

const originalArray = [3, 1, 2];
originalArray.sort((a, b) => a - b);
console.log(originalArray); // [1, 2, 3] # 오름차순 정렬하기

originalArray.sort((a, b) => b - a);
console.log(originalArray); // [3, 2, 1] # 내림차순 정렬하기

 

원본 배열의 일부를 복사하여 새로운 배열을 반환하는 메서드

원본 배열은 변경되지 않는다.

slice

원본 배열의 일부를 추출하여 새 배열을 반환

arr.slice([begin[, end]])

• begin : 시작점에 대한 인덱스
  • 음수인 경우 배열의 끝에서부터 길이를 나타냄
  • undefined인 경우에는, 0번 인덱스부터 시작
  • 배열의 길이보다 큰 경우에는, 빈 배열을 반환
• end : 종료점에 대한 인덱스
  • end 인덱스를 제외하고 추출
  • 음수 인덱스는 배열의 끝에서부터의 길이를 나타냄
  • end가 생략되면 배열의 끝까지 추출

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.slice(1, 4);
console.log(newArray); // [2, 3, 4]
console.log(originalArray); // [1, 2, 3, 4, 5]

 

concat

두 개 이상의 배열을 결합하여 새로운 배열을 반환

const array1 = [1, 2];
const array2 = [3, 4];
const newArray = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4]
console.log(array1); // [1, 2]
console.log(array2); // [3, 4]

 

filter

조건에 따라 원본 배열의 일부 요소를 선택하여 새로운 배열을 반환

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter(item => item > 2);
console.log(newArray); // [3, 4, 5]
console.log(originalArray); // [1, 2, 3, 4, 5]

 

map

원본 배열의 각 요소를 변환하여 새로운 배열을 생성

const originalArray = [1, 2, 3];
const newArray = originalArray.map(item => item * 2);
console.log(newArray); // [2, 4, 6]
console.log(originalArray); // [1, 2, 3]

 

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN