[Javascript] 배열 메서드

Array Methods

메서드	설명	비고
reverse	원본 배열의 요소들의 순서를 반대로 정렬
push & pop	배열의 가장 뒤에 요소를 추가 또는 제거
unshift & shift	배열의 가장 앞에 요소를 추가 또는 제거
includes	배열의 특정 값이 존재하는지 판별 후 참/거짓 반환
indexOf	배열에 특정 값이 존재하는지 판별 후 인덱스 반환	요소가 없을 시 -1 반환
join	배열의 모든 요소를 구분자를 이용하여 연결	구분자 생략 시 쉼표 기준

사용 예시

---

reverse

• 원본 배열의 요소들의 순서를 반대로 정렬

    const numbers = [1, 2, 3, 4, 5]
    numbers.reverse()
    console.log(numbers) // [5, 4, 3, 2, 1]

push & pop

• 배열의 가장 뒤에 요소를 추가 또는 제거

    const numbers = [1, 2, 3, 4, 5]
  
    numbers.push(100)
    console.log(number) // [1, 2, 3, 4, 5, 100]
  
    number.pop()
    console.log(number) // [1, 2, 3, 4, 5]

includes

• 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환

    const numbers = [1, 2, 3, 4, 5]
  
    console.log(numbers.includes(1)) // true
  
    console.log(numbers.includes(100)) // false

indexOf

• 배열에 특정 값이 존재하는지 판별 후 인덱스 반환

• 해당 값이 없을 경우 -1 반환

    const numbers = [1, 2, 3, 4, 5]
    let result
  
    result = numbers.indexOf(3) // 2
    console.log(result)
  
    result = number.indexOf(100) // 1
    console.log(result)

join

• 배열의 모든 요소를 구분자를 이용하여 연결

• 구분자 생략 시 쉼표 기준

    const numbers = [1, 2, 3, 4, 5]
    let result
  
    result = numbers.join() // 1,2,3,4,5
    console.log(result)
  
    result = numbers.join('') // 12345
    console.log(result)
  
    result = numbers.join(' ') // 1 2 3 4 5
    console.log(result)

Array Helper Methods

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징

메서드	설명	비고
forEach	배열의 각 요소에 대해 콜백 함수를 한 번씩 실행	반환 값 없음
map	콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
filter	콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
reduce	콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
find	콜백 함수의 반환 값이 참이면 해당 요소를 반환
some	배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환
every	배열의 모든 요소가 판별 함수를 통과하면 참을 반환

사용 예시

---

forEach

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행

• array.forEach(callback(elemet[, index[, array]]))

    const colors = ['red', 'blue', 'green']
  
    colors.forEach((color) => {
        return console.log(color)
    })
    // red
    // blue
    // green

map

• 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환

• array.map(callback(element[, index[, array]]))

    const numbers = [1, 2, 3]
  
    const doubleNumbers = numbers.map((number) => {
        return number * 2
    })
    console.log(numbers) // [ 1,2,3 ]
    console.log(doubleNumbers) // [ 2,4,6 ]

filter

• 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환

• array.filter(callback(element[, index[, array]]))

    const products = [
    { name: 'cucumber', type: 'vegetable' },
    { name: 'banana', type: 'fruit' },
    { name: 'carrot', type: 'vegetable' },
    { name: 'apple', type: 'fruit' },
    ]
  
    const fruits = products.filter((product) => {
    return product.type === 'fruit'
        })
    console.log(fruits)
    // [ { name: 'banana', type: 'fruit' }, { name: 'apple', type: 'fruit' } ]

reduce

• 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환

• array.reduce(callback(acc, element, [index[, array]])[, initialValue])

    const tests = [90, 90, 80, 77]
  
    const acc = tests.reduce((total, x) => total + x, 0)
  
    console.log(acc) // 337

find

• 콜백 함수의 반환 값이 참이면 해당 요소를 반환

• array.find(callback(delement[, index[, array]]))

    const avengers = [
    { name: 'Tony Stark', age : 45 },
    { name: 'Steve Rogers', age: 32},
    { name: 'Thor', age: 40},
    ]
  
    const avenger = avengers.find((avenger) => {
    return avenger.name === 'Tony Stark'
    })
  
    console.log(avenger) // { name: 'Tony Stark', age: 45 }

some

• 배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환

• array.some(callback(element[, index[, array]]))

    const arr = [1, 2, 3, 4, 5]
  
    const result = arr.some((elem) => {
    return elem % 2 === 0
    })
  
    console.log(result) // true

every

• 배열의 모든 요소가 판별 함수를 통과하면 참을 반환

• array.every(callback(element[, index[, array]]))

    const arr = [1, 2, 3, 4, 5]
  
    const result = arr.every((elem) => {
    return elem % 2 === 0
    })
  
    console.log(result) // false