javascript 배열 내장함수 알아보기

1. forEach

forEach는 for를 대체할 수 있는 내장함수입니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]

array.forEach(item => {
  console.log('item', item)
})

위의 console은 아래와 같이 출력되게 됩니다.

forEach1.png

forEach의 매개변수에는 현재 요소뿐만 아니라 index, array(호출한 배열)도 있습니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]

array.forEach((item, index, array) => {
  console.log('item', item)
  console.log('index', index)
  console.log('array', array)
})

위의 console은 아래와 같이 출력되게 됩니다.

forEach2.png

2. map

배열 안의 원소를 변환 할 때 사용되고 새로운 배열을 만듭니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
const mapArray = array.map(item => item * 2)

console.log(mapArray)

위의 console은 아래와 같이 출력되게 됩니다.

map1.png

map의 매개변수도 forEach와 동일하게 index와 array가 존재합니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
const mapArray = array.map((item, index, arr) => {
  console.log('item', item)
  console.log('index', index)
  console.log('array', arr)
})

위의 console은 아래와 같이 출력되게 됩니다.

map2.png

3. indexOf

원하는 항목을 몇번째 원소인지 찾아주는 함수입니다.

모든 인덱스를 반환하지는 않고 첫번째 인덱스만 반환합니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
console.log(array.indexOf(144))
console.log(array.indexOf(10))

indexOf.png

4. findIndex

원하는 항목을 찾아주는 함수는 함수로 indexOf와 동일한 기능을 하지만 indexOf는 배열 안에 있는 값이 객체이거나 배열이면 찾을 수 없습니다.

const todos = [
  {
    id: 0,
    completed: false,
    title: '녹차 사기',
    content: '개인적으로 좋아하는 녹차사기',
    createAt: 1560577682,
  },
  {
    id: 1,
    completed: false,
    title: '바퀴벌레약 설치해놓기',
    content: '여름이 다가왔으니 필수!',
    createAt: 1560577682,
  },
  {
    id: 2,
    completed: false,
    title: '닭가슴살 사기',
    content: '이번 일주일 동안 먹을 고기를 사자!',
    createAt: 1560577728,
  },
  {
    id: 3,
    completed: false,
    title: '수박 사자',
    content: '여름이 다가왔으니 필수!',
    createAt: 1560577682,
  },
]

const findIndex = todos.findIndex(item => item.title === '수박 사자')
console.log(findIndex)

findIndex.png

5. find

findIndex와 동일하게 값을 찾아내지만 index를 반환하는게 아니라 값 자체를 반환합니다.

const todos = [
  {
    id: 0,
    completed: false,
    title: '녹차 사기',
    content: '개인적으로 좋아하는 녹차사기',
    createAt: 1560577682,
  },
  {
    id: 1,
    completed: false,
    title: '바퀴벌레약 설치해놓기',
    content: '여름이 다가왔으니 필수!',
    createAt: 1560577682,
  },
  {
    id: 2,
    completed: false,
    title: '닭가슴살 사기',
    content: '이번 일주일 동안 먹을 고기를 사자!',
    createAt: 1560577728,
  },
  {
    id: 3,
    completed: false,
    title: '수박 사자',
    content: '여름이 다가왔으니 필수!',
    createAt: 1560577682,
  },
]

const find = todos.find(item => item.title === '수박 사자')
console.log(find)

find.png

6. filter

배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듭니다.

const todos = [
  {
    id: 0,
    completed: false,
    title: '녹차 사기',
    content: '개인적으로 좋아하는 녹차사기',
    createAt: 1560577682,
  },
  {
    id: 1,
    completed: true,
    title: '바퀴벌레약 설치해놓기',
    content: '여름이 다가왔으니 필수!',
    createAt: 1560577682,
  },
  {
    id: 2,
    completed: false,
    title: '닭가슴살 사기',
    content: '이번 일주일 동안 먹을 고기를 사자!',
    createAt: 1560577728,
  },
  {
    id: 3,
    completed: true,
    title: '수박 사자',
    content: '여름이 다가왔으니 필수!',
    createAt: 1560577682,
  },
]

const filterItem = todos.filter(item => item.completed)
console.log(filterItem)

filter.png

7. splice

배열에서 특정 항목을 제거할 때 사용합니다.

const numbers = [121, 144, 19, 161, 19, 144, 19, 11]
numbers.splice(0, 4)
console.log(numbers)

splice.png

8. slice

splice처럼 배열을 잘라낼때 사용되는데 기존의 배열을 건들지 않습니다.

const numbers = [121, 144, 19, 161, 19, 144, 19, 11]
numbers.slice(0, 4)
console.log(numbers)

slice.png

9. shift

shift는 첫번째 원소를 배열에서 추출합니다. (추출하는 과정에서 해당 원소가 사라집니다.)

const numbers = [121, 144, 19, 161, 19, 144, 19, 11]
const value = numbers.shift()
console.log(value)
console.log(numbers)

shift.png

10. pop

pop는 배열의 맨 마지막의 항목을 추출합니다. (추출하는 과정에서 해당 원소가 사라집니다.)

const numbers = [121, 144, 19, 161, 19, 144, 19, 11]
const value = numbers.pop()
console.log(value)
console.log(numbers)

pop.png

11. push

push는 배열의 맨 마지막에 새 항목을 추가합니다.

push가 반환하는 값은 호출하는 배열의 새로운 length 속성입니다.

const numbers = [121, 144, 19, 161, 19, 144, 19, 11]
numbers.push(1)
console.log(numbers)

push.png

12. unshift

unshift는 배열의 맨 앞에 새 원소를 추가합니다.

const numbers = [121, 144, 19, 161, 19, 144, 19, 11]
numbers.unshift(15)
console.log(numbers)

unshift.png

13. concat

여러개의 배열을 하나의 배열로 합쳐줍니다.

const array1 = [121, 144, 19, 161]
const array2 = [19, 144, 19, 11]
const concatArray = array1.concat(array2)

console.log(concatArray)

concat.png

14. join

배열 안의 값들을 문자열 형태로 합쳐줍니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
console.log(array.join())
console.log(array.join(''))

join.png

15. includes

배열에서 특정 요소를 포함하고 있는지 판별하는 함수입니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
console.log(array.includes(11))
console.log(array.includes(150))

includes.png

16. reverse

배열의 순서를 반전합니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
console.log(array.reverse())

reverse.png

17. sort

배열의 요소를 정렬시킵니다. 정렬 순서는 문자열의 유니코드순서를 따릅니다.

const months = [
  'January',
  'Febuary',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
]
months.sort()

sort.png

18. reduce

배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고 하나의 결과 값으로 반환합니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
const reducer = (accumulator, currentValue) => accumulator + currentValue
console.log(array.reduce(reducer))

reduce.png

19. length

배열의 길이를 반환합니다.

const array = [121, 144, 19, 161, 19, 144, 19, 11]
console.log(array.length)

length.png


seongjoojin
Written by@seongjoojin
Lives and works in Seoul building useful things.

GitHub