자바스크립트에서 배열을 다룰 때 필수로 알아야 할 메서드를 정리해본다. 사실 필수라 써놓고 이번 코딩테스트 공부를 하면서 까먹었던 내용을 정리해볼 겸, 그리고 언제 까먹어도 다시 알아볼 수 있도록 정리해본다.
Array.push
const numbers = [1, 2, 3, 4, 5, 6]; numbers.push(7) console.log(numbers) // [1, 2, 3, 4, 5, 6, 7]
배열에 맨 끝에 값을 추가하는 메서드로 실무에서 배열을 다룰 때 가장 많이 사용했다 생각하는 1순위 메서드다.
Array.unshift()
const numbers = [1, 2, 3, 4, 5, 6]; numbers.unshift(0) console.log(numbers) // [0, 1, 2, 3, 4, 5, 6]
push() 의 반대 개념으로 배열 앞에 추가해주는 메서드다.Array.pop()
const numbers = [0, 1, 2, 3, 4, 5, 6]; numbers.pop() console.log(numbers) // [0, 1, 2, 3, 4, 5]
배열의 맨 끝의 요소를 제거해준다.
Array.shift()
const numbers = [0, 1, 2, 3, 4, 5, 6]; numbers.shift() console.log(numbers) // [1, 2, 3, 4, 5, 6]
배열의 맨 앞에 요소를 제거해준다. 여기 까지는 단순 앞과 뒤의 요소만 추가/삭제 했다면 이제 원하는 요소를 삭제 추가하는 메서드이다.
Array.splice()
splice() 메서드는 배열의 요소를 삭제하거나 교체할 수 있는 기능을 제공한다.const numbers = [0, 1, 2, 3, 4, 5, 6]; numbers.splice(3, 2) console.log(numbers) // [0, 1, 2, 5, 6]
splice(index, deleteCount, item)파라미터
index는 splice() 메서드 기능을 실행하기 위한 시작점을 지정해주며 index의 위치로 부터 우측 방향으로 deleteCount 만큼 제거한다.추가로 배열에 요소를 삽입할 수 있다.
const numbers = [0, 1, 2, 4, 5, 6]; numbers.splice(3, 0, 3) console.log(numbers) // [0, 1, 2, 3, 4, 5, 6]
요소만 추가하는 경우
deleteCount를 0으로 전달하고 다음 파라미터에 삽입할 요소를 보내주면 된다.Array.slice()
const numbers = [0, 1, 2, 3, 4, 5, 6]; const newNumbers = numbers.slice(2, 4) console.log(numbers) // [0, 1, 2, 3, 4, 5, 6] console.log(newNumbers) // [2, 3]
slice() 메서드는 being 과 end 값을 파라미터로 받아 인덱스 being 부터 end 까지 요소의 얕은 복사본을 새로운 배열로 반환한다.newNumbers 에는 numbers 와는 다른 새로운 배열이 담기게된다. 배열에서 필요한 요소만 뽑아내고 싶다면 splice() 메서드는 원본 배열에 수정이 생기므로 slice() 를 사용하는 것이 바람직하다.
