Array.prototype
모든 Array 인스턴스는 Array.prototype으로부터 메서드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메서드는 크게 다음과 같이 구분할 수 있습니다.
- 원본 배열을 변경하는 메서드
- 원본 배열은 변경하지 않고 참조만 하는 메서드
- 원본 배열을 반복적으로 참조하는 메서드
원본 배열을 변경하는 메서드
- pop
pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
let arr = [1, 2, 3, 4, 5]
arr.pop() // 5
arr.pop() // 4
arr // [1, 2, 3]- push
push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
let arr = [1, 2, 3, 4, 5]
arr.push(0) // 6
arr // [1, 2, 3, 4, 5, 0]
arr.push(6, 7) // 8
arr // [1, 2, 3, 4, 5, 0, 6, 7]- shift
shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.
let arr = [1, 2, 3, 4, 5]
arr.shift() // 1
arr.shift() // 2
arr // [3, 4, 5]- unshift
unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.
let arr = [1, 2, 3, 4, 5]
arr.unshift(0) // 6
arr // [0, 1, 2, 3, 4, 5, 0]
arr.unshift(6, 7) // 8
arr // [6, 7, 0, 1, 2, 3, 4, 5, 0]- reverse
reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.
let arr = [1, 2, 3, 4, 5]
arr.reverse() // [5, 4, 3, 2, 1]- sort
sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다
let strArr = ["다", "가", "라", "나"]
let numArr = [10, 21, 1, 2, 3]
strArr.sort() // ['가', '나', '다', '라']
numArr.sort() // [1, 10, 2, 21, 3]
// 직접 정렬의 방식을 지정해 줄 수도 있다.
strArr.sort(function (a, b) {
a.localeCompare(b)
}) // ['가', '나', '다', '라']
numArr.sort((a, b) => {
return a - b
}) // [1, 2, 3, 10, 21]
let items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
]
items.sort(function (a, b) {
let nameA = a.name.toUpperCase()
let nameB = b.name.toUpperCase()
if (nameA < nameB) {
return -1
}
if (nameA > nameB) {
return 1
}
return 0
})- splice
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
let arr = ["가", "나", "다", "라", "마"]
arr.splice(1, 2, "바", "사") // ['나', '다']
arr // ['가', '바', '사', '라', '마']원본 배열은 변경하지 않고 참조만 하는 메서드
- join
join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
const arr = [1, 2, 3]
arr.join() // 1,2,3
arr.join(" + ") // 1 + 2 + 3
arr.join(" ") // 1 2 3
arr.join("") // 123- slice
slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
const arr = [1, 2, 3, 4, 5]
arr.slice(1, 3) // [2, 3]
arr.slice(1) // [2, 3, 4, 5]
arr.slice(4, 5) // [5]
arr // [1, 2, 3, 4, 5]- concat
concat() 메서드는 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환합니다.
const arr = [1, 2]
const newArr = [3, 4]
arr.concat(newArr) // [1, 2, 3, 4]
arr.concat([5, 6]) // [1, 2, 5, 6]
arr.concat([7], [8, 9]) // [1, 2, 7, 8, 9]- indexOf
indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.
const arr = ["가", "나", "다", "라", "가"]
arr.indexOf("가") // 0
arr.indexOf("가", 1) // 4
arr.indexOf("나", 2) // -1- includes
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.
const arr = ["가", "나", "다", "라", "가"]
arr.includes("가") // true
arr.includes("가", 1) // true
arr.includes("나", 2) // false원본 배열을 반복적으로 참조하는 메서드
- forEach
forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
const arr = ["가", "나", "다"]
arr.forEach((element) => {
console.log(element)
})
// 가
// 나
// 다- map
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
const arr = [1, 2, 3]
const newArr = arr.map((x) => {
return x * 2
})
arr // 1, 2, 3
newArr // 2, 4, 6- filter
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
const arr = [1, 2, 3, 4, 5]
const result = arr.filter((x) => {
return x > 2
})
result // [3, 4, 5]- reduce
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
const arr = [1, 2, 3, 4, 5]
const resultAdd = arr.reduce((acc, cur, i) => {
return acc + cur // 1 + 2 + 3 + 4 + 5
}, 0)
const resultArry = arr.reduce((acc, cur, i) => {
acc.push(cur)
return acc // [1, 2, 3, 4, 5]
}, [])