[JavaScript] 배열 요소 추가/삭제/추출 관련 메서드 정리

배열을 수정하는 데 사용되는 메서드가 꽤 많고 헷갈린다. 각 메서드의 기능으로 구분하여 정리해보자.

 

 

목차

1. 배열 요소 추가
2. 배열 요소 삭제
3. 배열 요소 추출
4. 배열 요소 필터
5. 문자열을 배열로 반환

 

 

 

 

구분	메서드
배열 요소 추가	push(), unshift(), splice()
배열 요소 삭제	pop(), shift(), splice()
배열 요소 추출	slice()
배열 요소 필터	filter()
문자열을 배열로 반환	split()

 

 

 

 

배열 요소 추가

push

push는 배열 끝에 새로운 요소를 추가한다. 원본 배열이 수정된다.

요소가 추가된 배열의 길이가 반환된다.

 

push(추가요소)

 

예제

const arr = [1, 2, 3, 4, 5];
const newArr = arr.push('a')

console.log(arr); // [1, 2, 3, 4, 5, "a"]
console.log(newArr); // 6 - 배열의 새로운 길이를 반환

 

 

unshift

unshift는 배열의 맨 앞에 새로운 요소를 추가한다. 원본 배열이 수정된다.

요소가 추가된 배열의 길이가 반환된다.

 

unshift(추가요소)

 

 

예제

const arr = [1, 2, 3, 4, 5];
const newArr = arr.unshift('a')

console.log(arr); // ["a", 1, 2, 3, 4, 5]
console.log(newArr); // 6 - 배열의 새로운 길이를 반환

 

 

 

splice

splice는 배열의 요소를 삭제/교체/추가하여 기존 배열을 변경한다. 원본 배열이 수정된다.

원본 배열에서 제거한 요소가 반환된다.

 

splice(start, 제거수, 추가요소)

 

예제 (요소 추가)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.splice(3, 0, 'a')

console.log(arr); // [1, 2, 3, "a", 4, 5]

 

 

 

 

 

배열 요소 삭제

pop

pop은 배열의 마지막 요소를 제거하고 제거한 요소를 반환한다.

 

pop()

 

예제

const arr = [1, 2, 3, 4, 5];
const newArr = arr.pop()

console.log(arr); // [1, 2, 3, 4]
console.log(newArr); // 5 - 제거 요소 반환

 

 

 

shift

shift는 배열의 첫 번째 요소를 제거하고 제거한 요소를 반환한다.

 

shift()

 

 

예제

const arr = [1, 2, 3, 4, 5];
const newArr = arr.shift()

console.log(arr); // [2, 3, 4, 5]
console.log(newArr); // 1 - 제거 요소 반환

 

 

splice

splice는 배열의 요소를 삭제/교체/추가하여 기존 배열을 변경한다. 원본 배열이 수정된다.

원본 배열에서 제거한 요소가 반환된다.

 

splice(start, 제거수, 추가요소)

 

 

예제 (요소 삭제)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.splice(3, 2)

console.log(arr); // [1, 2, 3] - 원본 변경
console.log(newArr); // [4, 5] - 제거 요소 반환

 

 

 

 

 

 

배열 요소 추출

slice

slice는 start부터 end 인덱스 전까지 추출하여 새로운 배열로 반환한다. 원본 배열은 수정되지 않는다.

 

slice(start, end)

 

예제

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(0, 3)

console.log(arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [1, 2, 3]

 

 

 

 

 

배열 요소 필터

filter

filter는 특정 조건에 만족하는 새로운 배열을 반환할 때 사용하는 함수다.

filter((ele, idx, array) => (조건))

 

 

예제

const nums = [1, 2, 3, 4, 5];

const result = nums.filter(num => num > 3);

console.log(result); // [4, 5]

 

 

 

 

 

 

문자열을 배열로 반환

split

split은 구분자를 이용해서 문자열을 쪼개고 배열로 반환한다.

 

split(구분자, 추출할글자수)

 

예제

 

const str = "Hello world";

const a = str.split(); // ["Hello world"]
const b = str.split(''); // ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
const c = str.split('', 3); // ["H", "e", "l"]
const d = str.split(' '); // ["Hello", "world"]
const e = str.split('l'); // ["He", "", "o"]