자바스크립트 유사 함수 비교

고유·2022년 3월 17일
1

자바스크립트

목록 보기
5/6

1. map, filter, reduce

1) map

  • 배열의 아이템마다 처리를 가한 후 다시 배열로 만드는 것
const array = [1, 2, 3, 4, 5]
const mapArray = array.map(item => item * 2)

console.log(mapArray)
// [2, 4, 6, 8, 10]

2) filter

  • 배열의 아이템들을 일정한 조건에 맞는지 확인하고 조건에 맞는 것들만 다시 묶어서 배열로 만든다.
const array=[1, 2, 3, 4, 5]
const filterArray=array.filter(item => item % 2 === 0)

console.log(filterArray)
// [2, 4]

3) reduce

  • 배열의 아이템에 처리를 가해서 하나의 값만 남긴다.
  • 예를 들어 배열의 아이템들을 모두 더했을 때 얼마인가?
const array=[1, 2, 3, 4, 5]
const reduceArray=array.reduce((a, b) => a + b)

console.log(reduceArray)
// 15

2. slice, splice

1) slice

배열의 일부분을 추출하는 함수

  • 배열.splice(시작index, 끝index)
const array = [1, 2, 3, 4, 5]
const sliceArray = array.slice(2, 4)

console.log(array)
// [1, 2, 3, 4, 5]
console.log(sliceArray)
// [3, 4] 인덱스 2부터 인덱스 4 이전까지 추출하니까 3,4
  • 특징은 원본 배열을 건드리지 않는다는 점이다.

2) splice

배열의 일부 아이템을 삭제하고 추가할 수 있는 함수

  • splice(시작index, 삭제 개수, 추가할 아이템)
  • 추가할 아이템은 선택사항이다.
const array = [1, 2, 3, 4, 5]
const spliceArray = array.splice(1, 2, 7, 8)

console.log(array)
// [1, 7, 8, 4, 5]
console.log(spliceArray)
// [2, 3]
  • 특징은 원본 배열에 자체에 수정을 가한다.

3. push, pop, unshift, shift

1) push, pop

  • 배열의 맨 뒤에 값을 추가하는 push
  • 배열의 맨 뒤의 값을 제거하는 pop

2) unshift, shift

  • 배열의 맨 앞에 값을 추가하는 unshift
  • 배열의 맨 앞의 값을 제거하는 shift

3) 참고

  • unshift, shift보단 push, pop을 쓰는 것이 좋다.
  • 왜냐하면 배열의 맨 뒤에 값을 추가하고 제거하는 것은 다른 아이템에 영향을 끼치지 않는다.
  • 그러나 맨 앞에 값을 추가하고 제거하는 것은 다른 아이템들이 한 칸씩 앞으로 당기거나 뒤로 미뤄져야하는 경우이므로 지양한다.
profile
프론트엔드

0개의 댓글