[Intermediate] 데이터 - 배열(1)

1. 데이터 - 배열(1)

1) 인덱스(index)

0부터 시작하는 배열 데이터 내부에 들어있는 데이터의 위치를 가리키는 숫자

인덱싱(indexing): numbers[1], fruits[2]와 같이 배열 데이터 내의 요소에 접근하기 위해 대괄호 안에 숫자를 표기하는 것

요소(element), 아이템(item): 배열 데이터 내의 값

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers[1]) // 값: 2
console.log(fruits[2]) // 값: Cherry

2) length

배열 데이터의 속성으로 배열 아이템의 개수를 반환

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers.length) // 값: 4
console.log(fruits.length) // 값: 3
console.log([1, 2].length) // 값: 2
console.log([].length) // 값: 0

3) concat()

두 개의 배열 데이터를 병합하여 새로운 배열을 반환

concat()을 사용해도 원본의 데이터에는 영향이 없음!

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers.concat(fruits))
// 값: [1, 2, 3, 4, 'Apple', 'Banana', 'Cherry']

4) forEach()

배열 아이템의 개수만큼 인수로 사용된 콜백 함수가 순서대로 반복 실행

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

frutis.forEach(function (element, index, array) {
  console.log(element, index, array)
})
// 값: Apple 0 (3) ['Apple', 'Banana', 'Cherry']
// 값: Banana 1 (3) ['Apple', 'Banana', 'Cherry']
// 값: Cherry 2 (3) ['Apple', 'Banana', 'Cherry']

5) map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

다시 말해, 인수로 사용된 콜백 함수에서 반환된 데이터로 새로운 배열을 반환

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = frutis.forEach(function (fruit, index) {
  console.log(`${fruit}-${index}`)
})
// 값: Apple-0
// 값: Banana-1
// 값: Cherry-2
console.log(a)
// 값: undefined, 반환되는 값이 없기 때문에 undefined 출력

const b = frutis.map((fruit, index) => {
  return `${fruit}-${index}`
})
console.log(b)
// 값: (3) ['Apple-0', 'Banana-1', 'Cherry-2']

const c = frutis.map((fruit, index) => ({
    id: index,
    name: fruit
}))
console.log(c)
// 값: id: 0 name: 'Apple', id: 1 name: 'Banana', id: 2 name: 'Cherry'
// 위와 같이 map()을 이용하여 fruits라는 배열 데이터를 객체 데이터로
// 아이템을 새로 만들어 활용이 가능하며 자주 사용되는 방법으로 중요!