JavaScript
[JavaScript] 배열 요소 추가/삭제/추출 관련 메서드 정리
fnow
2022. 4. 22. 22:37
반응형
배열을 수정하는 데 사용되는 메서드가 꽤 많고 헷갈린다. 각 메서드의 기능으로 구분하여 정리해보자.
| 구분 | 메서드 |
| 배열 요소 추가 | 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"]
반응형