27장 배열 ⭐⭐⭐

27.1 배열이란?

배열은 여러 개의 값을 순차적으로 나열한 자료구조다.

const arr = ['CHA', 'PARK', 'SON']

배열이 가지고 있는 값을 요소라고 하며, 각 요소는 자신의 위치를 나타내는 정수값 인덱스를 갖는다.

length 프로퍼티 - 배열의 길이를 나타냄

배열은 인덱스와 length 프로퍼티를 갖기에 for 문을 통해 순차적으로 요소에 접근할 수 있다.

JS에 배열이라는 타입은 존재하지 않으며, 배열은 객체 타입이다.

객체와 배열은 값의 순서, length 프로퍼티라는 큰 차이가 있음.

---

27.2 JS의 배열은 배열이 아니다

자료구조에서의 배열은 동일한 메모리 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 의미한다. 즉, 하나의 데이터 타입으로 통일되고, 연속적으로 인접해 있는 밀집 배열을 의미한다.

그렇기에 한 번의 연산으로 임의의 요소에 접근할 수 있어 매우 효율적이고, 빠른 동작을 보여준다는 장점과 요소를 삽입하거나 삭제하는 경우 요소를 이동시켜야 한다는 단점이 있다.

JS 배열은 위에서 말하는 일반적인 배열과는 다르다. 요소를 위한 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져있지 않을 수도 있는 희소 배열이다. JS 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이다.

---

27.3 length 프로퍼티와 희소 배열

length 프로퍼티는 배열의 길이를 나타내는 정수를 값으로 갖는다.

빈 배열일 경우 0이며, 빈 배열이 아닌 경우 가장 큰 인덱스에 1을 더한 것과 같다.

length 프로퍼티 값은 요소의 개수를 바탕으로 결정되지만 다음과 같이 임의의 숫자 값을 명시적으로 할당할 수 있다.

const arr = [1]

arr.length = 3

console.log(arr.length) // 3
console.log(arr) // [1, empty * 2] - empty 에는 값이 존재하지 않는다.

이처럼 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열이라 한다. JS는 희소 배열을 문법적으로 허용한다. 희소 배열은 length와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.

하지만 희소 배열은 사용하지 않는 것이 좋다.

---

27.4 배열 생성

27.4.1 배열 리터럴

const arr = []

27.4.2 Array 생성자 함수

const arr = new Array(10) // [empty * 10]
const arr2 = new Array() // []
const arr3 = new Array(1,2,3) // [1,2,3]
const arr4 = new Array({}) // [{}]

27.4.3 Array.of

Array.of(1) // [1]
Array.of(1,2,3) // [1,2,3]
Array.of('string') // ['string']

ES6 도입, 전달된 인수를 요소로 갖는 배열 생성

27.4.4 Array.from

Array.from({length: 2, 0: 'a', 1: 'b'}) // ['a', 'b']
Array.from('Hello') // ['H','e','l','l','o']

ES6 도입, 유사 배열 객체 또는 이터러블 객체를 인수로 받아 배열로 변환하여 반환

---

27.5 배열 요소의 참조

배열의 요소를 참조할 때에는 대괄호 표기법을 사용해 요소의 인덱스를 넣어 확인한다.

arr[0]
arr[1]

존재하지 않는 요소에 접근하면 undefined가 반환된다.

---

27.6 배열 요소의 추가와 갱신

배열은 동적으로 요소를 추가할 수 있다. 이때 length 프로퍼티의 값은 자동 갱신된다.

const arr = [0]

arr[1] = 1

console.log(arr) // [0,1]
console.log(arr.length) // 2

arr[100] = 100

console.log(arr) // [0,1, empty * 98, 100]
console.log(arr.length) // 101

// 요소 값의 갱신
arr[1] = 10
console.log(arr) // [0,10, empty * 98, 100]

---

27.7 배열 요소의 삭제

배열은 객체이기에 delete 연산자를 사용할 수 있다.

const arr = [1,2,3]

delete arr[1]

console.log(arr) // [1,empty,3]

---

27.8 배열 메서드

배열 메서드는 원본 배열의 수정 여부로 구분된다.

Mutator Method - 원본 배열을 직접 변경하는 메서드

Accessor Method - 새로운 배열을 생성하여 반환하는 메서드

가능하면 원본을 수정하지 않는 메서드를 사용하는게 좋다.

27.8.1 Array.isArray

const arr = []

Array.isArray(arr) // true

전달된 인수가 배열이면 true, 아니면 false 를 반환한다.

27.8.2 Array.prototype.indexOf

const arr = [1,2,3]

arr.indexOf(2) // 1

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

요소가 없다면 -1 을 반환한다.

ES7 에서 도입된 Array.prototype.includes 메서드가 가독성이 더 좋다.

27.8.3 Array.prototype.push

const arr = [1,2]

let result = arr.push(3,4)

console.log(result) // 4
console.log(arr) // [1,2,3,4]

인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. 원본 배열을 직접 변경한다.

성능이 좋지 않아 push 메서드 보다 ES6의 스프레드 문법을 사용하는 것이 좋다 !

const arr = [1,2]

const newArr = [...arr, 3,4]
console.log(newArr) // [1,2,3,4]

27.8.4 Array.prototype.pop

const arr = [1,2]

let result = arr.pop()
console.log(result) // 2

console.log(arr) // [1]

원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. 빈 배열인 경우 undefined를 반환한다. 원본 배열을 직접 변경한다.

push와 pop으로 스택을 구현할 수 있음

27.8.5 Array.prototype.unshift

const arr = [1,2]

let result = arr.unshift(3,4)
console.log(result) // 4

console.log(arr) // [3,4,1,2]

인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다. 원본 배열을 직접 변경한다.

ES6의 스프레드 문법을 사용하는 것이 좋다.

const arr = [1,2]

const newArr = [3,4, ...arr]
console.log(newArr) // [3,4,1,2]

27.8.6 Array.prototype.shift

const arr = [1,2]

let result = arr.shift()
console.log(result) // 1

console.log(arr) // [2]

원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. 원본 배열을 직접 변경한다.

shift와 push를 사용해 큐를 구현할 수 있다.

27.8.7 Array.prototype.concat

const arr1 = [1,2]
const arr2 = [3,4]

let result = arr1.concat(arr2)
console.log(result) // [1,2,3,4]

result = arr1.concat(3)
console.log(result) // [1,2,3]

result = arr1.concat(arr2, 5)
console.log(result) // [1,2,3,4,5]

console.log(arr1) // [1,2]

인수로 전달된 값을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 전달하는 값이 배열일 경우 해체하여 새로운 배열의 요소를 추가한다. 원본 배열은 변경되지 않는다.

• push 와 unshift 메서드는 원본 배열을 변경하기에 원본을 변수에 저장해야함

• concat 은 반환값을 변수에 저장해야함

ES6의 스프레드 문법으로 대체할 수 있다.

⇒ 배열에 추가할때는 일관성있게 스프레드 문법을 사용하자 !

27.8.8 Array.prototype.splice

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

const result = arr.splice(1, 2, 20, 30) // 인덱스 1부터 2개의 요소를 제거하고 20, 30 추가

console.log(result) // [2,3]
console.log(arr) // [1, 20, 30, 4]

원본 배열의 중간에 요소를 추가하거나 제거하는 경우 사용한다. 원본 배열을 변경한다.

3개의 매개변수가 있음

splice(start, deleteCount, items)

deleteCount를 0으로 지정하면 요소 제거 없이 새로운 요소를 삽입한다. 생략하면 start부터 모든 요소를 제거한다.

items를 전달하지 않으면 지정된 요소를 제거하기만 한다.

27.8.9 Array.prototype.slice

const arr = [1,2,3]

arr.slice(0,1) // [1]
arr.slice(1,2) // [2]
arr.slice(-1) // [3] 인수가 음수인 경우 배열의 끝에서부터 요소를 복사해 반환한다.
arr.slice() // [1,2,3] 모두 생략하면 원본 배열의 복사본을 생성해 반환한다. (얕은 복사)

console.log(arr) // [1,2,3]

인수로 전달된 범위의 요소들을 복사해 배열로 반환한다. 원본 배열은 변경되지 않는다.

27.8.10 Array.prototype.join

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

arr.join() // '1,2,3,4'
arr.join('') // '1234'
arr.join(':') // '1:2:3:4'

원본 배열의 모든 요소를 문자열로 변환 후, 전달받은 구분자(생략가능)로 연결한 문자열을 반환한다.

27.8.11 Array.prototype.reverse

const arr = [1,2,3]
const result = arr.reverse()

console.log(arr) // [3,2,1] - 원본 배열이 변경된다.
console.log(result) // [3,2,1]

원본 배열의 순서를 반대로 뒤집는다. 원본 배열이 변경된다. 반환값은 변경된 배열이다.

27.8.12 Array.prototype.fill

const arr = [1,2,3]
arr.fill(0)
console.log(arr) // [0,0,0]

const arr2 = [1,2,3]
arr2.fill(0, 1)
console.log(arr2) // [1,0,3]

const arr3 = [1,2,3,4,5]
arr3.fill(0, 1, 3)
console.log(arr3) // [1, 0, 0, 4, 5]

ES6에서 도입.

전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. 원본 배열이 변경된다.

첫번째 인수는 채울 값

두번째 인수는 시작할 인덱스

세번째 인수는 멈출 인덱스

// 인수로 전달받은 정수만큼 요소를 생성하고 0부터 1씩 증가하면서 요소를 채운다.
const sequences = (length = 0) => Array.from({length},(_, i) => i)

console.log(sequence(3)) // [0,1,2]

27.8.13 Array.prototype.includes

const arr = [1,2,3]
arr.includes(2) // true
arr.includes(100) // false

ES7에서 도입.

배열 내에 특정 요소가 포함되어 있는지 확인해 T/F 반환한다.

27.8.14 Array.prototype.flat

[1,[2,3,4],5].flat() // [1,2,3,4,5]

ES10에서 도입.

인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다. 기본값 1

---

27.9 배열 고차 함수

고차 함수는 함수를 인수로 전달받거나 반환하는 함수를 말한다.

외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반하고 있다.

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

JS는 다수의 고차 함수를 지원하는데, 특히 배열에서 유용한 고차 함수를 제공한다.

27.9.1 Array.prototype.sort

const exSort = ["c","b","a"]
exSort.sort()
console.log(exSort) // ["a","b","c"]

const numberSort = [5,3,1,11]
numberSort.sort()
console.log(numberSort) // [1,11,3,5]

numberSort.sort((a,b)=>a-b)
console.log(numberSort) // [1,3,5,11]

배열의 요소를 정렬한다. 원본 배열을 직접 변경한다. 정렬된 배열을 반환한다.

유니코드 코드 포인트의 순서를 따르며 기본적으로 오름차순으로 요소를 정렬한다.

유니코드의 특성으로 숫자는 생각과 다르게 정렬되기에 비교함수를 인수료 전달해야 한다.

27.9.2 Array.prototype.forEach

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

numbers.forEach(item => pows.push(item ** 2))
console.log(pows) // [1,4,9]

for 문을 대체할 수 있는 고차 함수.

반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 호출한 배열을 순회하면서 수행할 처리를 콜백 함수로 전달받아 반복 호출한다.

forEach의 콜백 함수는 배열의 요소값, 인덱스, 배열 자체를 전달받을 수 있다.

반환값은 언제나 undefined.

모든 요소를 반드시 순회해야하며 희소 배열의 경우 존재하지 않는 요소는 대상에서 제외된다.

for 문에 비해 성능이 안좋지만 가독성은 더 좋다.

27.9.3 Array.prototype.map

const numbers = [1,4,9]

const roots = numbers.map(item => Math.sqrt(item))

console.log(roots) // [1,2,3]
console.log(numbers) // [1.4.9]

forEach와 같이 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

map 메서드가 반환하는 새로운 배열의 length 값은 map 메서드를 호출한 배열의 length 값과 반드시 일치한다.

map의 콜백 함수는 배열의 요소값, 인덱스, 배열 자체를 전달받을 수 있다.

27.9.4 Array.prototype.filter

const numbers = [1,2,3,4,5]
const odds = numbers.filter(item => item % 2)
console.log(odds) // [1,3,5]

배열의 모든 요소를 순회하면서 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

forEach, map 과 마찬가지로 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.

filter의 콜백 함수는 배열의 요소값, 인덱스, 배열 자체를 전달받을 수 있다.

27.9.5 Array.prototype.reduce

const sum = [1,2,3,4].reduce((acc, cur, index, array) => acc + cur, 0)
console.log(sum) // 10

배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 인수로 전달, 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다. 원본 배열은 변경되지 않는다.

reduce의 첫 인수는 콜백 함수, 두번째는 초기값이다.

reduce의 콜백 함수는 초기값(이전 반환값), 배열의 요소값, 인덱스, 배열 자체를 전달한다.

평균 구하기, 최대값 구하기, 중복 횟수 구하기, 평탄화, 중복 요소 제거 등 다양하게 사용할 수 있다.

reduce의 두번쨰 인수인 초기값을 생략할 수 있지만 전달하는 것이 안전하다.

27.9.6 Array.prototype.some

[5,10,15].some(item => item > 10) // true
[5,10,15].some(item => item < 0) // false

배열 요소를 순회하면서 전달된 콜백 함수를 호출한다. 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다. 빈 배열은 항상 false

27.9.7 Array.prototype.every

[5,10,15].every(item => item > 3) // true
[5,10,15].every(item => item > 10) // false

배열 요소를 순회하면서 전달된 콜백 함수를 호출한다. 반환값이 모두 참이면 true, 모두 거짓이면 false를 반환한다. 빈 배열은 항상 true

27.9.8 Array.prototype.find

const users = [
	{id: 1, name: '김'},
	{id: 2, name: '나'},
	{id: 3, name: '박'},
	{id: 4, name: '이'},
	{id: 5, name: '김'},
]

uesrs.find(user => user.name === '김') // {id: 1, name: '김'}

ES6에서 도입.

배열 요소를 순회하면서 전달된 콜백 함수를 호출, 반환값이 true인 첫 요소를 반환한다. 없다면 false.

27.9.9 Array.prototype.findIndex

const users = [
	{id: 1, name: '김'},
	{id: 2, name: '나'},
	{id: 3, name: '박'},
	{id: 4, name: '이'},
	{id: 5, name: '김'},
]

users.findIndex(user => user.id === 1) // 0
users.findIndex(user => user.name === '박') // 3

ES6에서 도입.

배열 요소를 순회하면서 전달된 콜백 함수를 호출, 반환값이 true인 첫 요소의 인덱스를 반환한다. 없다면 -1.

27.9.10 Array.prototype.flatMap

const arr = ['hello', 'world']
arr.map(x => x.split('')).flat()
// ['h','e','l','l','o','w','o','r','l','d']

arr.flatMap(x => x.split(''))
// ['h','e','l','l','o','w','o','r','l','d']

ES10에서 도입.

map 메서드를 통해 생성된 새로운 배열을 평탄화한다. 즉, map과 flat을 순차적으로 실행하는 효과

but 1단계만 평탄화한다.