JavaScript[7] - 배열 메서드 심화

JavaScript [7] - 배열 메서드 심화

 

Array Helper Methods

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징 
  (callback 함수 : 다른 함수의 인자로 전달되는 함수)

// 콜백 함수 예시
const numbers = [1, 2, 3]
numbers.forEach(function (num) {
    console.log(num**2)
})
// 1
// 4
// 9

const callBackFunction = function (num) {
    console.log(num**2)
}
numbers.forEach(callBackFunction)
// 1
// 4
// 9

forEach

• array.forEach(callback(element [, index [, array]]))
• 3가지 매개변수로 구성
  1. element : 배열의 요소
  2. index : 배열 요소의 인덱스
  3. array : 배열 자체
• 반환 값(return) 없음

// 예시
array.forEach(function (element, index, array) {
  // do something
}

// 일단 사용
const colors = ['red', 'blue', 'green']
printFunc = function (color) {
    console.log(color)
}
colors.forEach(printFunc)
// red
// blue
// green

// 함수 정의를 인자로 넣어보기
colors.forEach(function (color) {
    console.log(color)
})

// 화살표 함수 적용하기
colors.forEach((color) => {
    return console.log(color)
})

map

• array.map(callback(element[, index [, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한번씩 실행
• 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
• 기존 배열 전체를 다른 형태로 바꿀 때 유용
  • forEach + return 이라 생각.

Array.map(function (element, index, array) {
    // do something
})

const numbers = [1, 2, 3]
//함수 정의 (표현식)
const doubleFunc = function (number) {
    return number * 2
}
// 함수를 다른 함수의 인자로 넣기(콜백 함수)
const doubledNumbers = numbers.map(doubleFunc)
console.log(doubledNumbers) // [2, 4, 6]

// 함수의 정의를 인자로 넣어보기
const doubledNumbers2 = numbers.map(function (number) {
    return number * 2
})
console.log(doubledNumbers2) // [2, 4, 6]

// 화살표 함수 적용하기
const doubledNumbers3 = numbers.map((number) => {
    return number * 2
})
console.log(doubledNumbers3) // [2, 4, 6]

filter

• array.filter(callback(element[, index [, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값이 true인 요소들만 모아서 새로운 배열 반환
• 기존 배열의 요소들을 필터링할 때 유용

const products = [
    { name: 'cucumber', type: 'vegerable'},
    { name: 'banana', type: 'fruit'},
    { name: 'carrot', type:'vegetable'},
    { name: 'apple', type: 'fruit'},
]

// 함수 정의하고
const fruitFilter = function (fruitFilter) {
    return products.type === 'fruit'
}

// 콜백으로 넘기고
const fruits = products.filter(fruitFilter)
console.log(fruits)
// [ { name: 'banana', type: 'fruit'}, { name: 'apple', type: 'fruit'}, { name: 'carrot', type:'vegetable' } ]

// 함수 정의를 인자로 넣어보기
const fruits = products.filter(function (product) {
    return product.type === 'fruit'
}]
console.log(fruits)

// 화살표 함수 적용하기
const fruits = products.filter((product) => {
    return product.type === 'fruit'
}]
console.log(fruits)

find

• array.find(callback(element[, index [, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환값이 true면, 조건을 만족하는 첫번째 요소를 반환
• 찾는 값이 배열에 없으면 undefined 반환

const avengers = [
    { name: 'Tony stark', age: 45 },
    { name: 'Steve Rogers', age: 32 },
    { name: 'Thor', age: 40 },
]

const avenger = avengers.find(function(avenger) {
    return avenger.name === 'Tony stark'
})
console.log(avenger) // { name: 'Tony stark', age: 45 }

// 화살표 함수 적용
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]]))
• 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 true 반환
• 모든 요소가 통과하지 못하면 거짓 반환
• 빈 배열은 항상 false 반환

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

const result = arr.some((elem) => {
    return elem % 2 === 0
})
//true

every

• array.every(callback(element[, index [, array]]))
• 배열의 모든 요소가 주어진 판별 함수를 통과하면 true 반환
• 하나의 요소라도 통과하지 못하면 false 반환
• 빈 배열은 항상 true 반환

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

const result = arr.every((elem) => {
    return elem % 2 === 0
})
// false

reduce

• 인자로 주어지는 함수(콜백 함수)를 각 요소에 대해 한 번씩 실행해서, 하나의 결과 값을 반환
• 즉, 배열을 하나의 값으로 계산하는 동작이 필요할 때 사용(총합, 평균 등)
• map, filter 등 여러 배열 메서드 동작을 대부분 대체할 수 있음
• acc
  • 이전 callback 함수의 반환 값이 누적되는 변수
• initialValue ( optional )
  • 최초 callback 함수 호출 시 acc에 할당되는 값, default값은 배열 첫 번째 값

const tests = [90, 90, 80, 77]

// 총합
const sum = tests.reduce(function (total, x) {
    return total + x
}, 0) // 여기서 0 생략 가능 , 결과 : 337

// 화살표 함수
const sum = tests.reduce((total, x) => { total + x }, 0) 
console.log(sum) // 337

//평균
const sum = tests.reduce((total, x) => total + x, 0) / tests.length
console.log(sum) // 84.25

배열 순회 비교

const chars = ['A', 'B', 'C', 'D']

// for loop
for (let idx = 0; idx < chars.length; idx++) {
    console.log(idx, chars[idx])
}

// for ...of 
for (const char of chars) {
    console.log(char)
}

// forEach
chars.forEach((char,idx) => {
    console.log(idx, char)
})

char.forEach(char => {
    console.log(char)
})