JavaScript 데이터 - 배열

Array.prototype.find( )

: 내부의 callback 함수를 배열 요소의 개수만큼 반복하여 실행한 뒤 결과를 반환한다.

const array1 = [5, 12, 8, 130, 44]

const found = array1.find(element => element>10);
// callback함수가 배열 요소개수만큼 반복 실행된다.

console.log(found) // 결과: 12

console.log(array1.length) // 결과 : 5

length 속성은 해당 배열의 길이를 나타내는 속성이다.

 

Array.prototype.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"]
console.log(numbers)
// 결과: [1, 2, 3, 4]
console.log(fruits)
// 결과: ['Apple', 'Banana', 'Cherry']

 

Array.prototype.forEach( )

: 주어진 함수를 배열 요소 각각에 대해 실행한다.

const fruits = ['Apple', 'Banana', 'Cherry']

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

fruits.forEach(function (a, b) {
  console.log(a, b)
}
// 결과:
// Apple 0
// Banana 1
// Cherry 2

세번째 매개변수인 Array는 대상 배열을 의미하는데 잘 사용하지 않는다.

 

Array.prototype.map( )

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

const fruits = ['Apple', 'Banana', 'Cherry']

const a = fruits.forEach(function (fruit, index) {
  console.log(`${fruit}-${index}`)
})
console.log(a) // return 값이 없으므로 undefined가 출력됨.

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

const c = fruits.map(function (fruit, index) {
  return {
    id: index,
    name: fruit
  }
})
console.log(c)
// 결과: [{id:0, name:'Apple'},{id:1, name:'Banana'},{id:2, name:'Cherry'}]

const d = fruits.map((fruit, index) => ({id: index, name: fruit}))
console.log(d)

c와 d는 표현 방식만 다를 뿐 같은 동작을 수행한다.

 

Array.prototype.filter( )

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

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

//.filter()
const filterA = numbers.map(number => {
  return number < 3
})
console.log(filterA)
//결과: [true, true, false, false]

const filterB = numbers.filter(number => number < 3)
console.log(filterB)
//결과: [1, 2]

map 함수로 number<3을 반환하게 되면 Boolean 데이터가 반환되지만

filter 함수를 이용하면 해당하는 값이 반환된다.

 

Array.prototype.find( )  &  Array.prototype.findIndex( )

find( ): 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하고, 그런 요소가 없다면 undefined를 반환한다.

findIndex( ):  주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 만족하는 요소가 없으면 -1을 반환한다.

const fruits = ['Apple', 'Banana', 'Cherry']

const findA = fruits.find(fruit => /^B/.test(fruit)) // 대문자 B로 "시작하는" 문자데이터
console.log(findA)
// 결과: Banana

const findIA = fruits.findIndex(fruit => /^C/.test(fruit))
console.log(findIA)
// 결과: 2

 

Array.prototype.includes( )

: 배열이 특정 요소를 포함하고 있는지를 판별한다.

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

const incA = numbers.includes(3)
console.log(incA) // 결과: true

const incB = numbers.includes('Riam')
console.log(incB) // 결과: false

 

[원본 배열이 수정되는 메소드들]

Array.prototype.push( )

: 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

Array.prototype.unshift( ) 

: 새로운 요소를 배열의 맨 앞쪽에 추가하고 새로운 길이를 반환한다.

Array.prototype.reverse( )

: 배열의 순서를 반전한다.

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

console.log(number.push(5)) // 결과: 5
console.log(number) // 결과: [1, 2, 3, 4, 5]

number.unshift(0)
console.log(number) // 결과: [0, 1, 2, 3, 4, 5]

number.reverse()
console.log(number) // 결과: [5, 4, 3, 2, 1, 0]

 

Array.prototype.splice( )

: 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

numbers = [1, 2, 3, 4]

numbers.splice(2, 1)
console.log(numbers) //결과: [1, 2, 4]

numbers.splice(1, 1, 1, 2, 3)
console.log(numbers) //결과: [1, 1, 2, 3, 4]

numbers.splice(1, 0, 0)
console.log(numbers) //결과: [0, 1, 2, 3, 4]

이처럼 삽입, 수정, 삭제의 역할을 한다.