[ JS ] 표준 내장 객체 (2) - Array

메이·2024년 4월 23일
JavaScript

JavaScript

목록 보기
6/12
post-thumbnail

📍 표준 내장 객체 (Built-in Object)

05. Array (배열)

.length( )

: 배열의 길이(숫자)를 반환한다.

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

console.log(fruits.length)   // 3

.at( )

: 배열을 인덱싱하며, 만약 음수를 사용하면 뒤에서부터 인덱싱한다.

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

console.log(fruits[1])   // Banana
console.log(fruits.at(1))   // Banana

console.log(fruits[fruits.length - 1])   // Cherry
console.log(fruits.at(-1))   // Cherry
console.log(fruits.at(-3))   // Apple

.concat( )

: 배열에서 주어진 배열을 병합해 새로운 배열을 반환한다.

const fruits1 = ['Apple', 'Banana', 'Cherry']
const fruits2 = ['Cherry', 'Durian']
const fruits3 = fruits1.concat(fruits2)
const fruits4 = [...fruits1, ...fruits2]

console.log(fruits1)
console.log(fruits2)
console.log(fruits3)
console.log(fruits4)

['Apple', 'Banana', 'Cherry']
['Cherry', 'Durian']
['Apple', 'Banana', 'Cherry', 'Cherry', 'Durian']
['Apple', 'Banana', 'Cherry', 'Cherry', 'Durian']


.every( )

: 배열의 모든 요소가 콜백 테스트를 통과하는지 확인한다.
만약 테스트가 하나라도 실패하면, 이후 테스트는 진행하지 않고 'false'를 반환한다.

const numbers = [17, 20, 199, 5, 48]

const isValid = numbers.every(item => item < 200)
// 메소드나 함수에 호출로 들어가지는 인수가 함수라면 그 인수는 콜백 함수
console.log(isValid)
const isValid = numbers.every(item => item < 100)
console.log(isValid)

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { nameL 'Lewis', age : 24 }
]

console.log(users.every(user => user.email))
// users 라는 배열 데이터에서 모든 요소가 콜백테스트를 통과하는지 확인하겠습니다
console.log(users.every(user => user.age))

true
false
false
true


.filter( )

: 배열에서 콜백 테스트를 통과하는 모든 요소로 새로운 배열을 만들어 반환한다.
만약 모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환한다.

const numbers = [17, 20, 199, 5, 48]
const filterNumbers = numbers.filter(item => item < 30)
console.log(filterNumbers)
console.log(numbers)

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]
const youngUsers = users.filter(user => user.age < 30)
console.log(youngUsers)
const usersWithEmail = users.filter(user => user.email)
console.log(usersWithEmail)
const usersWithPhone = users.filter(user => user.phone)
console.log(usersWithPhone)

[17, 20, 5]
[17, 20, 199, 5, 48]
{ name: 'Neo', age: 12, email: 'neo@heropy.dev' }, { name: 'Lewis', age : 24 }
{ name: 'Neo', age: 12, email: 'neo@heropy.dev' }, { name: 'Evan', age: 47, email: 'evan@heropy.dev' }
[]


.find( )

: 배열에서 콜백 테스트를 처음으로 통과하는 요소를 반환한다.
만약 테스트가 통과하면, 이후 테스트는 진행하지 않고 모든 테스트가 실패하면, 'undefined'를 반환한다.

const numbers = [17, 20, 199, 5, 48]
const foundNumbers = numbers.find(num => num < 30)
console.log(foundNumbers)
const foundNumbers = numbers.find(num => num === 199)
console.log(foundNumbers)

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]
const foundUser = numbers.find(user => !user.email)
console.log(foundUser)
const foundUser = numbers.find(user => null)
console.log(foundUser)

17
199
{ name: 'Lewis', age : 24 }
undefined


.findIndex( )

: 배열에서 콜백 테스트를 처음으로 통과하는 요소의 인덱스를 반환한다.
만약 테스트가 통과하면, 이후 테스트는 진행하지 않고 모든 테스트가 실패하면, '-1'을 반환한다.

const numbers = [17, 20, 199, 5, 48]
const foundIndex = numbers.findIndex(num => num < 30)
console.log(foundIndex)
const foundIndex = numbers.findIndex(num => num === 5)
console.log(foundIndex)

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]
const foundUserIndex = users.findIndex(user => !user.email)
console.log(foundUserIndex)

0
3
2


.forEach( )

: 배열의 각 요소에 대해 콜백을 호출한다.
만약 배열이 비어있다면 아무런 동작도 하지 않고, 반복을 종료하고 싶다면 for 반복문을 사용해야한다.

✍ 예제1

const numbers = [17, 20, 199, 5, 48]
numbers.forEach(number => {
  console.log(number)
})

17
20
199
5
48

✍ 예제2

const numbers = [17, 20, 199, 5, 48]

let sum = 0
numbers.forEach(number => {
  sum += number
})
console.log('합계:', sum)

합계: 289

✍ 예제3

const numbers = [17, 20, 199, 5, 48]

for(const number of numbers) {
  if (number > 100) {
    break
  }
  console.log(number)
}

17
20


.includes( )

: 배열에서 특정 요소가 포함되어 있는지 확인한다.

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

console.log(fruits.includes('Apple'))
console.log(fruits.includes('banana'))

const numbers = [17, 20, 199, 5, 48]

console.log(numbers.includes(20))
console.log(numbers.includes(200))

true
false
true
false


.join( )

: 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

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

console.log(fruits.join())
console.log(fruits.join(''))
console.log(fruits.join(', '))
console.log(fruits.join('/'))

const msg = 'Hello world!'
console.log(msg.split('').reverse().join(''))

Apple,Banana,Cherry
AppleBananaCherry
Apple, Banana, Cherry
Apple/Banana/Cherry
!dlrow olleH


.map( )

: 배열의 모든 요소에 대해 각 콜백을 호출하고 반환된 결과로 새로운 배열로 반환한다.

✍ 예제1

const numbers = [17, 20, 199, 5, 48]

const doubleNumbers = numbers.map(num => num * 2)
console.log(doubleNumbers)
console.log(numbers)

[34, 40, 398, 10, 96]
[17, 20, 199. 5. 48]

✍ 예제2

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

const capitalizedFruits = fruits.map(fruit => fruit.toUpperCase())
console.log(capitalizedFruits)
console.log(fruits)

['APLLE', 'BANANA', 'CHERRY']
['Apple', 'Banana', 'Cherry']

✍ 예제3

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]

const userEmails = users.map(user => user.email)
console.log(userEmails)
consoel.log(userEmails.filter(email => email)

['neo@heropy.dev', 'evan@heropy.dev', undefined]
['neo@heropy.dev', 'evan@heropy.dev']


.push( )

: 배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
배열 원본이 변경된다!

const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits.push('Durian'))
console.log(fruits.length)
console.log(fruits)

const numbers = [17, 20, 199, 5, 48]
console.log(numbers.push(9, 10, 11))
console.log(numbers.length)
console.log(numbers)

4
4
['Apple', 'Banana', 'Cherry', 'Durian']
8
8
[17, 20, 199, 5, 48, 9, 10, 11]


.reduce( )

: 배열의 각 요소에 대해 콜백을 호출하고
각 콜백의 반환 값을 다음 콜백으로 전달해 마지막 콜백의 반환 값을 최종 반환한다.

✍ 예제1

const numbers = [17, 20, 199, 5, 48]

let sum1 = 0
numbers.forEach(number => {
  sum1 += number
})
console.log('합계:', sum1)

const sum2 = numbers.reduce(accumulator, number) => { //  acc는 누적되는 값
  return accumulator + number
}, 0)   // 0은 초기값
console.log('합계:', sum2)

합계: 289
합계: 289

✍ 예제2

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]
const sum3 = users.reduce(acc, user) => (acc + user.age, 0)
console.log(sum3)

83


.reverse( )

: 배열의 순서를 반전한다.
배열 원본이 변경된다!

const fruits1 = ['Apple', 'Banana', 'Cherry']
console.log(fruits1.reverse())
console.log(fruits1)

const fruits2 = ['Apple', 'Banana', 'Cherry']
console.log([...fruits2].reverse())
// console.log(['Apple', 'Banana', 'Cherry'].reverse()) 복사한 데이터 이므로 원본은 변하지 않음
console.log(fruits2)

['Cherry', 'Banana', 'Apple']
['Cherry', 'Banana', 'Apple']
['Cherry', 'Banana', 'Apple']
['Apple', 'Banana', 'Cherry']


.slice( )

: 배열의 순서를 반전한다.
배열 원본이 변경된다!

const numbers = [100, 200, 300, 400, 500, 600, 700, 800, 900]

console.log(numbers.slice(0, 3))
console.log(numbers.slice(4, -1))
console.log(numbers.slice(4))
console.log(numbers.slice(-4))
console.log(numbers.slice(-4, -1))
console.log(numbers)

[100, 200, 300]
[500, 600, 700, 800]
[500, 600, 700, 800, 900]
[600, 700, 800, 900]
[600, 700, 800]


.some( )

: 배열의 요소 중 콜백 테스트를 통과하는 요소가 하나라도 있는지 확인한다.
만약 테스트가 통과하면, 이후 테스트는 진행하지 않는다.

const numbers = [17, 20, 199, 5, 48]
const isValid = numbers.some(num => num > 200)
console.log(isValid)

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]
console.log(users.some(user => user.email))
console.log(users.some(user => user.phone))

false
true
false


.sort( )

: 배열의 요소를 콜백의 반환 값에 따라 정렬한다.
만약 콜백을 제공하지 않으면, 요소를 유니코드 포인트 순서대로 정렬한다.
배열 원본이 변경된다!

const numbers = [17, 20, 199, 5, 48]
numbers.sort()
console.log(numbers)

numbers.sort((a, b) => a - b)
console.log(numbers)

numbers.sort((a, b) => b - a)
console.log(numbers)

const users = [
  { name: 'Neo', age: 12, email: 'neo@heropy.dev' },
  { name: 'Evan', age: 47, email: 'evan@heropy.dev' },
  { name: 'Lewis', age : 24 }
]

users.sort((a, b) => a.age - b.age)
console.log(...users)

[17, 199, 20, 48, 5]
[5, 17, 20, 48, 199]
[199, 48, 20, 17, 5]
{ name: 'Neo', age: 12, email: 'neo@heropy.dev' }, { name: 'Lewis', age : 24 }, { name: 'Evan', age: 47, email: 'evan@heropy.dev' }


.splice(인덱스, 삭제개수, 추가요소 )

: 배열의 요소를 추가하거나 삭제하거나 교체한다.
배열 원본이 변경된다!

// 요소 추가
const fruits1 = ['Apple', 'Banana', 'Cherry']
fruits1.splice(2, 0, 'Durian')
console.log(fruits1)

// 요소 삭제
const fruits2 = ['Apple', 'Banana', 'Cherry']
fruits2.splice(1, 1)
console.log(fruits2)

// 요소 교체
const fruits3 = ['Apple', 'Banana', 'Cherry']
fruits3.splice(1, 1, 'Durian', 'Orange', 'Mango')
console.log(fruits3)

['Apple', 'Banana', 'Durian', 'Cherry']
['Apple', 'Cherry']
['Apple', 'Durian', 'Orange', 'Mango', 'Cherry']


.unshift( )

: 배열의 시작 부분에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. (.push 반대)
배열 원본이 변경된다!

const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits.unshift('Durian'))
console.log(fruits.length)
console.log(fruits)

const numbers = [17, 20, 199, 5, 48]
console.log(numbers.unshift(9, 10, 11))
console.log(numbers.length)
console.log(numbers)

4
4
['Durian', 'Apple', 'Banana', 'Cherry']
8
8
[9, 10, 11, 17, 20, 199, 5, 48]

⭐ 배열 메소드의 콜백은 항상 현재 반복의 인덱스를 얻을 수 있다.

const numbers = [17, 20, 199, 5, 48]
numbers.every((num, idx) => {
  console.log(num, idx)
  return true
})

17 0
20 1
199 2
5 3
48 4

numbers.filter((num, idx) => {
  console.log(num, idx)
  return true
})

17 0
20 1
199 2
5 3
48 4

numbers.reduce((acc, cur, idx) => {
  console.log(acc, cur, idx)
  return acc + cur
}, 0)

0 17 0
17 20 1
37 199 2
236 5 3
241 48 4


.isArray( )

  • Array.isArray( ) : 배열 데이터인지 확인한다.
  • 정적 메소드 (Array라는 클래스에 보조 기능으로 배열데이터인지 아닌지 확인해주는 메소드)
const fruits = ['Apple', 'Banana', 'Cherry']
const arrayLikeFruits = {
  0: 'Apple',
  1: 'Banana',
  2: 'Cherry',
  length: 3
}  // 유사 배열(배열이 아니고 Object임)

console.log(fruits[2])
console.log(arrayLikeFruits[2])
console.log(Array.isArray(fruits))
console.log(Array.isArray(arrayLikeFruits))

Cherry
Cherry
true
false

  • Array.from( ) : 유사배열을 실제 배열로 반환한다.
const fruits = ['Apple', 'Banana', 'Cherry']
const arrayLikeFruits = {
  0: 'Apple',
  1: 'Banana',
  2: 'Cherry',
  length: 3
}

console.log(fruits)
console.log(arrayLikeFruits)

console.log(fruits[1])
console.log(arrayLikeFruits[1])

console.log(fruits.length)
console.log(arrayLikeFruits.length)

console.log(Array.isArray(fruits))
console.log(Array.isArray(arrayLikeFruits))

console.log(fruits.map(fruit => fruit.toUpperCase()))
console.log(Array.from(arrayLikeFruits).map(fruit => fruit.toUpperCase()))

['Apple', 'Banana', 'Cherry']
{ 0: 'Apple', 1: 'Banana', 2: 'Cherry', length: 3 }
Banana
Banana
3
3
true
false
['APPLE', 'BANANA', 'CHERRY']
['APPLE', 'BANANA', 'CHERRY']

profile
메이
프론트엔드 개발자를 꿈꾸는 코린이₊⋆ ☾⋆⁺
이전 포스트

[ JS ] 표준 내장 객체 (1) - String / Number / Math / Date

다음 포스트

[ JS ] 표준 내장 객체 (3) - Object / JSON

0개의 댓글