배열 (Array)

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

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

console.log(numbers[0])  // 1
console.log(numbers[-1])  // undefined
console.log(numbers.length)  // 5

console.log(numbers[numbers.length-1])  // 5
console.log(numbers[numbers.length-2])  // 4
console.log(numbers[numbers.length-3])  // 3
console.log(numbers[numbers.length-4])  // 2
console.log(numbers[numbers.length-5])  // 1

배열 메서드 기초

reverse	원본 배열의 요소들의 순서를 반대로 정렬
push & pop	배열의 가장 뒤에 요소를 추가 또는 제거	push - 추가
pop - 제거
unshift & shift	배열의 가장 앞에 요소를 추가 또는 제거	unshift - 추가
shift - 제거
includes	배열에 특정 값이 존재하는지 판별 후 참/거짓 반환
indexOf	배열에 특정 값이 존재하는지 판별 후 인덱스 반환	요소가 없을 경우 -1 반환

// reverse - 원본 배열의 요소들의 순서를 반대로 정렬
numbers.reverse()
console.log(numbers)  // [5, 4, 3, 2, 1]

// push & pop -배열의 가장 뒤에 요소를 추가 또는 제거
numbers.push(100)
console.log(numbers)  // [5, 4, 3, 2, 1, 100]

console.log(numbers.pop())  // 100
console.log(numbers)  // [5, 4, 3, 2, 1]

// unshift & shift - 배열의 가장 앞에 요소를 추가 또는 제거
numbers.unshift(0)
console.log(numbers)  // [0, 5, 4, 3, 2, 1]

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

// includes - 배열에 특정 값이 존재하는지 판별 후 참/거짓 반환
console.log(numbers.includes(1))  // true
console.log(numbers.includes(100))  // false

// indexOf - 배열에 특정 값이 존재하는지 판별 후 인덱스 반환, 요소가 없을 경우 -1 반환
console.log(numbers.indexOf(3))  // 2
console.log(numbers.indexOf(100))  // -1

Array Helper Methods

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

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

콜백 함수

• 다른 함수의 인자로 전달되는 함수

const numbers = [1, 2, 3]
numbers.forEach(function (num) {
    console.log(num**2)
})
// 1
// 4
// 9

const callBackFunction = function (num) {
    console.log(num ** 2)
}

const numbers = [1, 2, 3]
numbers.forEach(callBackFunction)
// 1
// 4
// 9

forEach

array.forEach(function (element, index, array) {
	// do somethig
})

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

// 1. 일단 사용해보기
const colors = ['red', 'green', 'blue']
printFunc = function (color) {
    console.log(color)
}
colors.forEach(printFunc)
// red
// green
// blue

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

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

map

array.map(function (element, index, array) {
	// do somethig
})

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

// 1. 일단 사용해보기
const numbers4 = [1, 2, 3]
// 함수 정의 (표현식)
const doubleFunc = function (number) {
    return number * 2
}
// 함수를 다른 함수의 인자로 넣기 (콜백 함수)
const doubleNumbers = numbers4.map(doubleFunc)
console.log(doubleNumbers)  // [2, 4, 6]

// 2. 함수 정의를 인자로 넣어보기
const doubleNumbers2 = numbers4.map(function (number){
    return number * 2
})
console.log(doubleNumbers2) // [2, 4, 6]

// 3. 화살표 함수 적용하기
const doubleNumbers3 = numbers4.map((number) => {
    return number * 2
})
console.log(doubleNumbers3) // [2, 4, 6]

filter

array.filter(function (element, index, array) {
	// do somethig
})

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

// 1. 일단 사용해보기
const products = [
    {name: 'cucumber', type: 'vegetable'},
    {name: 'banana', type: 'fruit'},
    {name: 'carrot', type: 'vegetable'},
    {name: 'apple', type: 'fruit'},
]
// 함수 정의하기
const fruitFilter = function (product) {
    return product.type === 'fruit'
}
// 콜백으로 넘기고
const fruits = products.filter(fruitFilter)
console.log(fruits)
// [{name: 'banana', type: 'fruit'}, {name: 'apple', type: 'fruit'}]

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

// 3. 화살표 함수 정의하기
const fruits = products.filter((product) => {
    return product.type === 'fruit'
})
console.log(fruits)
// [{name: 'banana', type: 'fruit'}, {name: 'apple', type: 'fruit'}]

reduce

array.reduce(function (acc, element, index, array) {
	// do somethig
}, initialValue)

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

const tests = [90, 90, 80, 77]

// 콜백 함수 정의
const sum = tests.reduce(function (total, x) {
    return total + x
}, 0)

// 화살표 함수
const sum = tests.reduce((total, x) => total + x, 0)
console.log(sum)  // 337

// 평균
const avg = tests.reduce((total, x) => total + x, 0) / tests.length
console.log(avg)  // 84.25

reduce 동작 방식

find

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

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

const avengers = [
    {name: 'Tony Stark', age: 45},
    {name: 'Steve Rogers', age: 32},
    {name: 'Thor', age: 40},
]
const avenger = avengers.find(function (avenger){
    return avenger.name === 'Tony Stark'
})
console.log(avenger)  // {name: 'Tony Stark', age: 45}

// 화살표 함수 적용
const avenger = avengers.find((avenger) => {
    return avenger.name === 'Tony Stark'
})
console.log(avenger) // {name: 'Tony Stark', age: 45}

some

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

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

const arr = [1, 2, 3, 4, 5]
const result = arr.some((elem) => {
    return elem % 2 === 0
})
console.log(result)  // true

every

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

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

const result = arr.every((elem) => {
    return elem % 2 === 0
})
console.log(result)  // false

배열 순회 비교

• for loop
  • 모든 브라우저 환경에서 지원
  • 인덱스를 활용하여 배열의 요소에 접근
  • break, continue 사용 가능
• for … of
  • 일부 오래된 브라우저 환경에서 지원 X
  • 인덱스 없이 배열의 요소에 바로 접근 가능
  • break, continue 사용 가능
• forEach
  • 대부분의 브라우저 환경에서 지원
  • break, continue 사용 불가능
  • Airbnb Style Guide에서 권장하는 방식

const chars = ['A', 'B', 'C', 'D']

// for loop
for (let idx = 0; idx < chars.length; idx++) {
    console.log(idx, chars[idx])
}

// for ... of
for (const char of chars) {
    console.log(char)
}

// forEach
chars.forEach((char, idx) => {
    console.log(idx, char)
})

chars.forEach(char => {
    console.log(char)
})