[JS] 배열 관련 메서드

배열

• 키와 속성들을 담고 있는 참조 타입 객체
• 순서 보장
• 주로 대괄호[] 이용하여 생성, 0을 포함한 양의 정수 인덱스로 특정 값에 접근
• 배열의 길이는 array.length 형태로 접근
• 배열의 마지막 원소는 array.length - 1 로 접근 (-1로 접근 불가)

 

배열 관련 메서드

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

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

numbers.reverse()        // [4, 3, 2, 1]

numbers.push(0)         // [4, 3, 2, 1, 0]
numbers.pop()           // [4, 3, 2, 1]

numbers.unshift(5)     // [5, 4, 3, 2, 1]
numbers.shift()        // [4, 3, 2, 1]

numbers.includes(1)    // true
numbers.includes(100)  // false

numbers.indexOf(3)     // 1
numbers.indexOf(100)   // -1

numbers.join()         // 4,3,2,1
numbers.join('')       // 4321

 

Array Helper Methods

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

 

const array = [1, 2, 3, 4]

- forEach(element[, index[, array]])

• element: 배열의 요소
• index: 배열 요소의 인덱스
• array: 배열 자체
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 반환 값 없음

array.forEach((num, index) => {
  console.log(num, index)
  // 1 0
  // 2 1
  // 3 2
  // 4 3
})

 

- map(element[, index[, array]])

• 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
• 기존 배열 전체를 다른 형태로 바꿀 때 유용

const result = array.map((num) => {
  return num * 2
})

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

 

- filter(element[, index[, array]])

• 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열 반환
• 기존 배열의 요소들을 필터링할 때 유용

const result = array.filter((num) => {
  return num % 2
})

console.log(result) // [1, 3]

 

- reduece(acc, element[, index[, array]])[, initialValue]

• 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
• acc: 이전 콜백 함수의 반환 값이 누적되는 변수
• initialValue: 최초 콜백 함수 호출 시 acc에 할당되는 값, default 값은 배열의 첫 번째 값
  
  • 빈 배열의 경우, initialValue를 제공하지 않으면 에러 발생

const result = array.reduce((acc, num) => {
  return acc + num
}, 0)

console.log(result) // 10

 

- find(element[, index[, array]])

• 콜백 함수의 반환 값이 참이면 해당 요소 반환
• 찾는 값이 배열에 없으면 undefined 반환

const result = array.find((num) => {
  return num === 2
})

console.log(result) // 2

 

- some(element[, index[, array]])

• 배열의 요소 중 하나라도 판별 함수를 통과하면 참 반환
• 모든 요소가 모두 통과하지 못하면 거짓 반환
• 빈 배열은 항상 거짓 반환

const result = array.some((num) => {
  return num % 2
})

console.log(result) // true

 

- every(element[, index[, array]])

• 배열의 모든 요소가 판별 함수를 통과하면 참 반환
• 배열의 요소 중 하나라도 통과하지 못하면 거짓 반환
• 빈 배열은 항상 참 반환

const result = array.every((num) => {
  return num % 2
})

console.log(result) // false