[JS] JavaScript 정리하기 (5) - 배열(Array)

오늘은 자바스크립트의 배열과 객체에 대해 알아보자!

---

배열(Array)

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

 

 

 

---

배열 메서드

• array.reverse()
  • 원본 배열 요소들의 순서를 반대로 정렬
• array.push()
  • 배열의 가장 뒤에 요소 추가
• array.pop()
  • 배열의 마지막 요소 제거
• array.includes(value)
  • 배열에 특정 값(value)이 존재하는지 판별 후 true 또는 false 반환
• array.indexOf(value)
  • 배열에 특정 값이 존재하는지 확인 후 가장 첫 번째로 찾은 요소의 인덱스 반환
  • 만약 해당 값이 없을 경우 -1 반환
• array.join([separator])
  • 배열의 모든 요소를 연결하여 반환
  • separator(구분자)는 선택적으로 지정 가능하며 , 생략 시 쉼표를 기본 값으로 사용

 

---

Array Helper methods

 

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징
  • callback함수 : 어떤 한수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수
• forEach
  
  • 인자로 주어지는 함수(콜백 함수)를 배열의 각 요소에 대해 한 번씩 실행
    • 콜백 함수는 3가지 매개변수로 구성
      • element: 배열의 요소
      • index: 배열 요소의 인덱스
      • array: 배열 자체
    • 반환값(return) 없음

 

array.forEach((element, index, array) => {
  // do something
})
// 1. 일단 사용해보기
const colors = ['red', 'blue', 'green']

printFunc = function (color) {
  console.log(color)
}
colors.forEach(printFunc)
// red
// blue
// green

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

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

 

• map
  • 배열의 각 요소에 대해 콜백 함수를 한번씩 실행
  • 콜백 함수의 반환 값을 요소로 하는 새로운 배열 변환
  • 기존 배열 전체를 다른 형태로 바꿀 때 유용
    • forEach + return 이라고 생각하면 됨

 

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

// 1. 일단 사용해보기
const numbers = [1, 2, 3]

// 함수 정의 (표현식)
const doubleFunc = function (number) {
  return number * 2
}

// 함수를 다른 함수의 인자로 넣기(콜백 함수)
const doubleNumbers = numbers.map(doubleFunc)
console.log(doubleNumbers) // [2, 4, 6]

// 2. 함수 정의를 인자로 넣어보기

const doubleNumbers = numbers.map(function (number) {
  return number * 2
}) 
console.log(doubleNumbers) // [2, 4, 6]

// 3. 화살표 함수 적용하기

const doubleNumbers = numbers.map((number) => {
  return number * 2
})
console.log(doubleNumbers) // [2, 4, 6]

 

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

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

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

//1.
const fruitFilter = function (product) {
    return product.type === 'fruit'
}

const newArry = products.filter(fruitFilter)

console.log(newArry)
// [ { name : 'banana', type: 'fruit' }, { name : 'apple', type: 'fruit' } ]
//2. 함수 정의를 인자로 넣어보기
const newArry = products.filter( function (product) {
    return product.type === 'fruit'
})

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

 

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

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

const numbers =[90, 80, 70, 100]

// 총합

const sumNum = numbers.reduce(function (result, number) {
    return result + number
}, 0)

console.log(sumNum)

///화살표 함수
const sumNum = numbers.reduce((result, number) => {
    return result + number
}, 0)

//평균
const avgNum = numbers.reduce((result, number) => result + number, 0) / numbers.length

 

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

array.find((element, index, array)) {
  // do something
}
const avengers =[
  { name: 'Tony Stark', age: 45 },
  { name: 'Steve Rogers', age: 32 },
  { name: 'Thor', age: 40 },
]

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

console.log(avenger)

 

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

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

const result = arr.some((elem) => elem % 2 === 0)

console.log(result) // true

 

• every
  • 배열의 모든 요소가 주어진 판별 함수를 통과하면 true 반환
  • 하나의 요소라도 통과하지 못하면 false 반환
  • 빈 배열은 항상 true 반환

 

const arr = [1, 2, 3, 4, 5]
const result = arr.every((elem) => elem % 2 === 0)

console.log(result) // false

 

오늘은 배열에 대해 알아봤다

 

부디 도움이 됐기를 바라며

 

빠이~~~