Array

beomjin_97·2022년 3월 3일
0

javascript

목록 보기
6/13

1. 배열 생성

1.1 배열 리터럴

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

1.2 Array 생성자 함수

const arr1 = new Array(10);
console.log(arr1)   // [empty * 10]
console.log(arr1.length)  // 10

const arr2 = new Array()  // 
console.log(arr2)  // []

const arr3 = new Array(1, 2, 3)
console.log(arr3)  // [1, 2, 3]

1.3 Array.of

전달된 인수를 요소로 갖는 배열을 생성한다. Array 함수와는 다르게 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

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

1.4 Array.from

유사배열객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환한다.
유사배열객체: 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체

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

2. 배열 요소

2.1 요소 참조

대괄호 표기법으로 배열의 요소를 참조한다. 대괄호 안에는 정수로 평가되는 표현식이면 인덱스 대신 사용할 수 있다.

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

2.2 요소 추가와 갱신

존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소를 추가할 수 있다.
존재하는 요소에 값을 재할당하면 요소값이 갱신된다.

const arr = [1, 2]

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

arr[0] = 4
console.log(arr) [4, 2, 3]

2.3 요소 삭제

delete 연산자를 사용하는 것은 희소배열을 만들 수 있으므로 사용하지 않는것이 좋다. 대신 Array.prototype.splice 메서드를 사용하는 것이 바람직하다.

const arr = [1, 2, 3]
arr.splice(1,1) // (삭제를 시작할 메서드, 삭제할 요수 수)

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

3. 배열 메서드

배열 메서드는 결과물을 반환하는 패턴이 두가지다.

  • 원본배열을 직접 변경하는 메서드
  • 새로운 배열을 생성하여 반환하는 메서드

ES5 이후 도입된 대부분의 배열 메서드는 원본 배열을 직접 변경하지 않지만 초창기 배열은 원본 배열을 직접 변경하는 경우가 많다. 가급적 원본 배열을 직접 변경하지 않는 메서드를 사용하는 편이 좋다.

3.1 Array.isArray

Array.isArray([])  // true
Array.isArray(new Array())  // true

전달된 인수가 배열이면 true, 그렇지 않으면 false를 반환한다.

3.2 Array.prototype.indexOf

const arr = [1, 2, 2, 3]
arr.indexOf(2)  // 1
arr.indexOf(99)  // -1

인수로 전달된 요소의 인덱스를 반환한다.
요소가 여러개 있으면 그 중 가장 작은 인덱스를 반환하고 요소가 존재하지 않으면 -1을 반환한다.

3.3 Array.prototype.push

const arr = [1, 2]
const res = arr.push(3)
console.log(res)  // 3

전달된 인수를 원본배열의 가장 마지막 요소로 추가하고 (원본배열을 직접변경한다) 변경된 length값을 반환한다. 성능상 좋지 않으므로 arr[arr.length] = 3 를 사용하자.

3.4 Array.prototype.pop

const arr = [1, 2] 
const res = arr.pop()
console.log(res) // 2

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

3.5 Array.prototype.unshift

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

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

3.6 Array.prototype.shift

const arr = [1, 2]
const res = arr.shift()
console.log(res)  // 1

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

3.7 Array.prototype.concat

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

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

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

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

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

3.8 Array.prototype.splice

const arr = [1, 2, 3, 4]
const res = arr.splice(1, 2, 10, 20)
console.log(arr) // [1, 10, 20, 4]
console.log(res) // [2, 3]

매개변수1 : 원본배열의 제거를 시작할 인덱스
매개변수2 : 제거할 요소의 개수, 0이면 제거하지 않는다.
매개변수3~ : 제거한 위치에 삽입될 요소 , 생략하면 삭제하기만 한다.

제거된 요소로 이루어진 배열을 반환한다. 원본배열을 직접변경한다.

3.9 Array.prototype.slice

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

매개변수1 : 복사를 시작할 인덱스
매개변수2 : 복사를 종료할 인덱스 (이 인덱스는 해당되지 않는다.)
첫번째 인수로 전달받은 인수로 부터 두 번째 인수로 전달받은 인덱스 이전까지 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다.

3.10 Array.prototype.join

const arr = [1, 2, 3, 4]
const res1 = arr.join()  // 기본값: (',')
const res2 = arr.join('')
const res3 = arr.join(':')
console.log(res1) // '1,2,3,4'
console.log(res2) // '1234'
console.log(res3) // '1:2:3:4'

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

3.11 Array.prototype.reverse

const arr = [1, 2, 3]
const res = arr.reverse();
console.log(res) // [3, 2, 1]
console.log(arr) // [3, 2, 1]

원본 배열의 순서를 뒤집은 배열을 반환한다. 원본 배열이 변경된다.

3.12 Array.prototype.fill

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

매개변수1 : 채울 요소
매개변수2 : 채우기를 시작할 인덱스, 생략하면 처음부터 끝까지 매개변수 1로 채운다.
매개변수3 : 채우기를 종료할 인덱스, 생략하면 매개변수 2부터 끝까지 매개변수 1로 채운다.
변경된 원본 배열을 반환한다.

3.13 Array.prototype.includes

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

배열내에 인수로 전달된 요소가 있는지 확인하여 boolean 값을 반환한다.
두번째 인수를 전달하면 검색을 시작할 인덱스를 지정할 수 있다.

3.14 Array.prototype.flat

const arr = [1, [2, [3, 4]]]
arr.flat() // [1, [2, 3, 4]]

배열을 인수로 전달된 수 만큼 배열을 평탄화한다. 기본값은 1이다.
Infinity를 전달하면 모든 뎁스에 대해 평탄화 한다.

4. 배열 고차 함수

4.1 Array.prototype.sort

const arr1 = ['banana', 'carrot', 'apple']
arr1.sort()
console.log(arr1) // ['apple', 'banana', 'carrot']

const arr2 = [10, 20, 4, 2]
arr2.sort((a, b) => a - b )  // 숫자 배열의 오름차순 정렬
arr2.sort((a, b) => b - a )  // 숫자 배열의 내림차순 정렬

배열의 요소를 오름차순으로 정렬한다. 원본배열을 직접 변경한다. reverse 메스드를 체이닝하면 내림차순으로 정렬할 수 있다.
유니코드 코드 포인트 순으로 정렬하기 때문에 숫자를 정렬할 때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다.

4.2 Array.prototype.forEach

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

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

arr.forEach((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index} this: ${JSON.stringify(arr)}`

자신의 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백함수로 전달받아 반복 호출한다. 콜백 함수는 인수를 총 3개(요소값, 인덱스, this)까지 받을 수 있다.
원본배열을 변환하지 않는다. 리턴값은 언제나 undefined이다.

4.3 Array.prototype.map

const arr = [1, 4, 9]
const roots = arr.map(item => Math.sqrt(itme))

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

자신의 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백함수로 전달받아 반복 호출한다. 콜백 함수는 인수를 총 3개(요소값, 인덱스, this)까지 받을 수 있다.
원본배열을 변환하지 않는다.
forEach는 undefined를 항상 반환하는 반면 map은 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

4.4 Array.prototype.filter

const arr = [1, 2, 3, 4, 5]
const odd = arr.filter(item => item % 2) // 1은 true로 0은 false로 평가된다.

console.log(odd) // [1, 3, 5]

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 이 후 콜백함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
콜백 함수는 인수를 총 3개(요소값, 인덱스, this)까지 받을 수 있다. 원본배열을 변환하지 않는다.

4.5 Array.prototype.reduce

const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0)

console.log(sum) // 10

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

reduce는 콜백함수와 초기값을 인수로 받고 콜백함수는 콜백함수의 반환값(또는 초기값), 요소값, 인덱스, this 를 인수로 받는다.

4.6 Array.prototype.some

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

자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다. 이때 some 메서드는 콜백함수의 반환값이 단 한 번이라도 참이면 true, 거짓이면 false를 반환한다.
빈 배열인 경우 항상 false이다. 콜백 함수는 인수를 총 3개(요소값, 인덱스, this)까지 받을 수 있다. 원본배열을 변환하지 않는다.

4.7 Array.prototype.every

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

자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다. 이때 some 메서드는 콜백함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false를 반환한다. 콜백 함수는 인수를 총 3개(요소값, 인덱스, this)까지 받을 수 있다. 원본배열을 변환하지 않는다.

4.8 Array.prtotype.find

const users = [
  { id: 1, name: 'foo'},
  { id: 2, name: 'bar'},
  { id: 3, name: 'baz'},
  { id: 4, name: 'poo'},
  { id: 5, name: 'var'}
]

users.find(user => user.id === 2);  // {id: 2, name: 'bar'}

자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환한다. 모두 false라면 undefined를 반환한다. filter는 true인 요소들의 배열을 반환하지만 find는 요소값 그 자체로 반환한다.

4.9 Array.prototype.findIndex

const users = [
  { id: 1, name: 'foo'},
  { id: 2, name: 'bar'},
  { id: 3, name: 'baz'},
  { id: 4, name: 'poo'},
  { id: 5, name: 'var'}
] 

users.findIndex(user => user.id === 2)  // 1
users.findIndex(user => user.name === 'baz') // 2

자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소의 인덱스를 반환한다.

4.10 Array.prototype.flatMap

arr.map((x) => x.split('')).flat();
arr.flatMap(x => x.split(''))

위 두 식은 동일한 결과를 반환한다. flatMap의 평탄화 깊이는 1단계이며 지정할 수는 없다.

profile
Rather be dead than cool.

0개의 댓글