js 배열 메소드 정리

자주 사용되는 Array method 에 대해서 간단하게 정리해두자
(무지성으로 외우지 말고 이런게 있었지 정도에 한 문장으로 기억, 필요한건 그때그때 찾아보자)

1.pop
배열의 맨 마지막 원소의 값을 삭제
삭제된 배열의 요소를 리턴

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

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

2.push
배열의 뒷 부분에 값을 삽입
추가된 배열의 요소를 리턴

const arr = [1,2,3,4,5]
const push_arr = arr.push(6) 

console.log('push_arr',push_arr) // 6
console.log('arr',arr) // [1,2,3,4,5,6]

3.unshift
배열 앞 부분에 값을 삽입
새로운 배열의 길이를 리턴함

const arr = [1,2,3,4,5]
const unshift_arr = arr.unshift(0)

console.log('unshift_arr',unshift_arr) // 6
console.log(arr) // [0,1,2,3,4,5]

4.shift
배열 앞 부분에 값을 삭제
삭제된 배열의 원소를 리턴

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

console.log('shift_arr',shift_arr) // 1
console.log(arr) // [2,3,4,5]

5.splice
배열의 특정 위치에 요소를 추가하거나 삭제
splice(시작할 인덱스 , 제거할 요소 개수 , 배열에 추가될 요소)
원본 배열을 훼손함

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

console.log('splice_arr',splice_arr) // [3,4,5]
console.log(arr5) // [1,2]

6.slice
slice(시작할 인덱스 , 마지막 인덱스)
배열의 startIndex 부터 endIndex (endIndex 미포함)
에 대한 shallow copy를 새로운 객체로 반환한다.
즉 원본 배열은 유지된다.

const arr = [1,2,3,4,5]
const slice_arr1 = arr.slice()
const slice_arr2 = arr.slice(1,4)

console.log('slice_arr1',slice_arr1) // [1,2,3,4,5]
console.log('slice_arr2',slice_arr2) // [2,3,4]
console.log(arr) // [1,2,3,4,5]

7.concat
다수의 배열을 합치고 병합된 배열의 사본을 반환

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const concat_arr = arr2.concat(arr1) // [4,5,6,1,2,3]

8.every
배열의 모든 요소가 인자로 제공된 콜백함수의 조건을 통과하는지
true or false 로 리턴함

const arr = [1,2,3,4,5,6,7,8,9,10]

const isEven = (value) => {
    return value % 2 === 0
}

const isEvenTrue = arr9.every(isEven) 
console.log(isEvenTrue) // false

9.some
배열의 요소중 하나라도 콜백함수의 조건을 통과하는지
true or false 로 리턴함

const arr = [1,2,3,4,5,6,7,8,9,10]

const isOdd = (value) => {
    return value % 2 === 1
}

const isOddTrue = arr.some(isOdd)
console.log(isOddTrue) // true (하나라도 true이면 true)

10.forEach
배열의 각 원소별로 콜백함수를 실행한다.
리턴값은 void 이다. (undefined)
(주로 돔의 노드를 순차적으로 접근할 때 자주 사용함)

const arr = [1,2,3,4,5]

const foreach_arr = arr.forEach((value)=>{
    console.log(value) // 1,2,3,4,5
})

11.map
배열의 각 원소별로 콜백함수를 실행한 결과로 구성된
새로운 배열을 반환

const arr = [1,2,3,4,5,6,7,8,9,10]

const map_arr = arr.map((value)=>{
    return value % 2 === 1
})

console.log(map_arr) // [t,f,t,f,t,f,t,f,t,f] 

12.filter
배열의 각 원소별로 콜백함수를 실행한 결과가 true인 요소들로 구성된
새로운 배열을 반환한다.

const arr = [1,2,3,4,5,6,7,8,9,10]
const filter_arr = arr.filter((value)=>{
    return value % 2 === 1
})

console.log(filter_arr) // [1,3,5,7,9]

13.reduce
누산기 및 배열의 각 값에 대해 누산된 값으로 함수를 적용
reduce에 대해서는 설명할 내용이 많음으로 따로 언급하겠음

const arr = [1,2,3,4,5,6,7,8,9,10]
const value = arr.reduce((prev,cur,index)=>{
    return prev + cur
})

console.log(value) // 55

14.reverse
배열의 원소 순서를 거꾸로 바꾼다.

const arr = [1,2,3,4,5]
arr.reverse()

console.log(arr15) // [5,4,3,2,1]

15.sort
배열의 원소를 콜백의 리턴값에 따른 순서로 정렬한다.
모든 원소를 문자열로 취급해 사전적으로 정렬

const arr = [13,12,11,10,5,3,2,1]
const sort_arr = arr.sort()

console.log(arr16) // [1,10,11,12,13,2,3,5]
console.log(sort_arr) // [1,10,11,12,13,2,3,5]


const arr2 = [13,12,11,10,5,3,2,1]
arr2.sort((a,b)=>{
    return a-b
})

console.log(arr2) // [1,2,3,5,10,11,12,13]

const arr3 = [13,12,11,10,5,3,2,1]

arr3.sort((a,b)=>{
    return b-a
})

console.log(arr3) // [13,12,11,10,5,3,2,1]

16.toString
배열을 문자열로 바꾸어 변환한다.

const arr = [1,2,3,4,5]
const str = arr19.toString()

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

17.valueOf
원본을 훼손하지 않는 배열을 반환 (shallow copy)

const arr = [1,2,3,4,5]

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

18.join
배열 원소 전부를 하나의 문자열로 합친다.

const arr = [1,2,3,4,5]

console.log(arr.join()) // 1,2,3,4,5
console.log(arr.join('-')) // 1-2-3-4-5

19.at
매개변수로 정수값, 배열에서 매개변수에 해당하는 인덱스 항목을 반환
양의 인덱스 -> 순서대로 배열 조회
음의 인덱스 -> 역순으로 배열 조회

const arr = [1,2,3,4,5]

console.log(arr22.at(0)) // 1
console.log(arr22.at(3)) // 4
console.log(arr2.at(-1)) // 5

20.find
콜백함수의 결과값이 만족하는 첫번째 요소를 반환한다.

const arr = [1,2,3,4,5]

const find_arr = arr23.find((value)=>{
  return  value > 3
})

console.log(find_arr) // 4

21.findIndex
콜백함수의 결과값이 만족하는 첫번째 인덱스를 반환한다.

const arr = [1,2,3,4,5]
const findIndex_arr = arr.findIndex((val)=>{
    return val > 3
})

console.log(findIndex_arr) // 3

22.includes
배열이 항목 중 특정 값을 포함하고 있는지 아닌지 여부를
true , false 로 반환한다.
includes(searchElement,fromIndex(검색을 시작할 인덱스))

const arr = [1,2,3,'cat','dog','bat']

const includes1 = arr.includes('cat',4)
console.log(includes1) // false

const includes2 = arr.includes('babo')
console.log(includes2) // false

const includes3 = arr.includes(3)
console.log(includes3) // true

23.indexOf
indexOf(searchElement,fromIndex(검색을 시작할 인덱스))
searchElement 값이 배열에 포함되어있는 첫번째 인덱스를 반환
값이 없다면 -1을 return

const arr = [1,2,3,4,5]

console.log(arr.indexOf(4,3)) // 3
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(6)) // -1

24.Array.isArray
매개변수의 타입이 array인지 아닌지 판별
true or false로 return

const arr = [1,2,3,4,5]

console.log(Array.isArray(arr)) // true
console.log(Array.isArray('[]')) // false
console.log(Array.isArray(new Array(5))) // true

25.values
새로운 이터러블한 배열을 반환한다.

const arr = [1,2,3,4,5]
const iterator = arr.values()
console.log(iterator) // Object [Array Iterator] {}

for (const value of iterator) {
    console.log('iterator val',value); // iterator val 1 , ...
}