[JS] 배열(Array)

# 배열이란?

Object 중에서 순서가 있는 collection

순서가 있는 데이터 집합을 저장하는 자료구조

서로 관련있는 데이터들을 하나의 변수에 할당

 

 

• 대괄호를 이용해 작성
• 배열 요소 자료형: 제약 없음
• length 속성을 사용해서 몇개가 있는지 알 수 있음
• 음수 인덱스는 없음 → 마지막 요소는 length - 1 인덱스 사용
• JS에서는 명시적 타입이 없기때문에 여러자료형을 가질 수 있음
• 많은 method들이 내장되어있음

 

 

# 배열의 메서드

1. 기본적인 method

• push / pop: 배열의 끝 요소를 추가 / 제거 + 반환
• unshift / shift: 배열의 앞 요소를 추가 / 제거 + 반환
• join: 파이썬에서의 join과 비슷한 역할, array의 요소들을 구분자로 이어줌

const arr1 = ['www', 'samsung', 'com']
const str1 = arr1.join('.')
console.log(str1) 	// www.samsung.com

• includes: array 안에 해당 요소가 있는지 확인하는 역할

const languages = ['python', 'javascript', 'html', 'java']
const query = 'java'
const mylanguage = languages.filter((element) => {
    return element.includes(query)
})
console.log(mylanguage)		// ['javascript', 'java']

 

2. Array Helper Methods

배열을 순회하며 특정 로직을 수행하는 메서드

메서드 호출 시 인자로 함수를 받음

가독성도 높고, for문보다 빠르게 동작함

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array 에서 다양한 함수 확인 가능

그 중, 많이 쓰이는 것들 위주로 정리해보면,

 

(1) forEach

인자로 주어진 함수(콜백 함수)를 배열 요소 각각에 실행(return이 없음)

원본 배열을 건들지 않고, 내부 요소들에 접근해서 사용하고 싶을 때

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

numbers.forEach((element, index, array) => {
    console.log(element, index, array)
})

• element: 처리할 배열의 요소
• index: 처리할 배열 요소의 인덱스(선택)
• array: 원본 배열

 

(2) map

배열 내의 모든 요소 각각에 대해 함수를 호출하고, 함수 호출 결과를 모아 새로운 배열을 반환

즉, 원본 배열을 기반으로 새로운 배열을 만들고 싶을 때

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

const newNumbers = numbers.map((element) => {
    return element + 5
})
console.log(numbers) 	// [1, 2, 3, 4, 5] 원본은 그대로
console.log(newNumbers)		// [6, 7, 8, 9, 10] 새로운 배열 생김

 

(3) filter

원본 배열에서 필요한 데이터만 골라서 새로운 배열로 생성

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

const filterNumbers = numbers.filter((element) => {
    return element % 2 === 0		// 조건
})
console.log(filterNumbers)	// [2, 4]

 

(4) reduce

원본 배열 데이터를 활용해서 특정 하나의 값을 얻고 싶을 때

예시: 총합 구하기

let initialValue = 0	// 초기값
const sumValue1 = numbers.reduce((total, element, index, array) => {
    return total + element	// total은 누적합
}, initialValue)	// 초기값을 맨 뒤에 넣어주기

const sumValue2 = numbers.reduce((total, element, index, array) => {
    return total + element
}, 0)	// 초기값 바로 숫자로 넣어줘도 됨
console.log(sumValue1)	// 15
console.log(sumValue2)	// 15

// numbers에서 10부터 시작해서 짝수만 더해볼까?
const result = numbers.reduce((total, element) => {
    if (element % 2 === 0) return total + element
    else return total
}, 10)
console.log(result)


// 좀더 간단하게
const result = numbers.reduce((total, element) => {
    return element % 2 === 0? total + element : total
}, 10)
console.log(result)

 

(5) find

배열에서 특정 값을 찾아서 반환, 못찾으면 undefined가 반환됨

let target = 3
const findNumber = numbers.find((element) => {
    // 조건이 true인 순간 검색 끝
    return element === target
})
console.log(findNumber)	// 3

 

(6) some

특정 조건이 하나라도 맞으면 true, 모두 틀리면 false (one of)

const someNumber = numbers.some((element) => {
    // 2보다 작은 게 하나라도 있다면 true
    return element < 2
})
console.log(someNumber)	// true

 

(7) every

특정 조건이 모두 맞으면 true, 하나라도 틀리면 false (all of)

const everyNumber = numbers.every((element) => {
    // 모든 숫자가 5보다 작은가?
    return element < 5
})
console.log(everyNumber)	// false

 

---

# 배열과 객체

기본적으로 배열 ⊂ 객체

const arr = [1, 2, 3]
const obj = {
    'name' : 'Mino',
}
console.log(arr)
console.log(obj)

 

데이터 타입은 서로 다르게 나옴

그렇다면, 

const obj1 = {
    0: 1,
    1: 2,
    length: 2
}
console.log(obj)

이렇게 하면??

객체로 나온다.

이렇게 배열처럼 쓰는 객체를 유사배열객체라고 한다

 

 

 

# 유사 배열 객체

key로 인덱스를 가지며 length 속성을 가지는 객체

 

 

왜쓸까?

• 배열보다 메모리가 효율적으로 관리됨
• 배열의 동작을 제한하거나, 가지고 있지 않은 동작을 추가하는 등의 커스터마이징 가능
• 객체를 배열처럼 인덱스로 접근 가능

 

주의 사항

• map, filter 등의 배열 메서드를 사용 못함!
  • 놀랍게도 forEach는 있음..

 

그럼 얘를 아예 Array로 바꿀 수는 없을까? → 가능

1. Array.from

const array1 = Array.from(liList)
console.log(array1)

2. 전개 연산자(...) 사용

얘는 근데 Object( Nodelist같은 iterable한 객체 )는 안된다

const array2 = [...liList]
console.log(liList)

 

3. 그럼 iterable하지 않은 일반 객체? → Object.values

 

const array3 = Object.values(liList)
console.log(array3)