JavaScript 자료형

배열 메서드 목록 심화

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징
  • callback 함수 : 어떤 함수의 내부에서 실행될 목적으로 인자를 넘겨받는 함수를 의미

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

forEach

• array.forEach(callback(element[, index[,array]]))
  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수는 3가지 매개변수로 구성
  • element : 배열의 요소
  • index : 배열 요소의 인덱스
  • array : 배열 자체
• 반환 값(return)이 없는 메서드

array.forEach((element,index,array) =>{
    //do something
})

const fruits = ['딸기','수박','사과','체리']

fruits.forEach((fruit,index) => {
    console.log(fruit,index)
    // 딸기 0
    // 수박 1 
    // 사과 2 
    // 체리 3 
})

배열 순회 방법 비교

방식	특징	비고
for loop	모든 브라우저 환경에서 지원 인덱스를 활용하여 배열의 요소에 접근 break, continue 사용 가능
for of	일부 오래된 브라우저 환경에서 지원 X 인덱스 없이 배열의 요소에 바로 접근 가능 break, continue 사용 가능
for Each	대부분의 브라우저 환경에서 지원 break,continue 사용 불가능

map

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

array.map((element,index,array) =>{
    // do something
})

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

const doubleNums = numbers.map((num) =>{
    return num * 2 
})
console.log(doubleNums) //[2,4,6,8,10]

filter

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

array.filter((element,index,array) =>{
    // do something
})

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

const oddNums = numbers.filter((num,index) => {
    return num %2
})
console.log(oddNums) //1,3,5

reduce

• array.reduce(callback(acc, element, [index[, array]])[, initialvalue])
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
• reduce 메서드의 주요 매개변수
  • acc
    • 이전 callback 함수의 반환 값이 누적되는 변수
  • initialValue(optional)
    • 최초 callback 함수 호출 시 acc에 할당되는 값, default 값은 배열의 첫 번째 값
• 빈 배열의 경우 initialValue를 제공하지 않으면 에러 발생

array.reduce((acc, element, index, array) => {
    //do someting
}, initialValue)

const numbers = [1,2,3]

const result = numbers.reduce((acc,num) => {
    return acc + num
},0)
console.log(result) // 6

find

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

array.find((element, index, array)){
    //do someting
}

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

const result = avengers.find((avenger) => {
    return avenger.name === 'Tony Stark'
})

console.log(result)
//{name: 'Tony Stark', age: 45}

some

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

array.some((element, index, array)){
    //do someting
}

const numbers = [1,3,5,7,9]

const hasEvenNumber = numbers.some((num) =>{
    return num %2 ===0
})
console.log(hasEvenNumber) //false

const hasOddNumber = numbers.some((num) => {
    return num %2 
})
console.log(hasOddNumber) //True

every

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

array.every((element, index, array)){
    //do someting
}

const numbers = [2,4,6,8,10]

const isEveryEvenNumber = numbers.every((num) =>{
    return num %2 ===0
})
console.log(isEveryEvenNumber) //true

const isEveryOddNumber = numbers.some((num) => {
    return num %2 
})
console.log(isEveryOddNumber) //false