[JavaScript] 알아두면 유용한 배열(Array) APIs

자바스크립트(JavaScript)에서 제공하는 API 중 배열을 다루는 유용한 함수들이 많다. 배열은 프로젝트에서 필수적으로 다뤄지므로 유용한 API들을 꼭 짚고 넘어가자. 

 

• 배열의 순회 (forEach)
• 배열의 추가 (push, unshift, splice)
• 배열의 삭제 (pop, shift, splice)
• 배열의 검색 (indexOf, lastIndexOf)
• 두 배열 합치기 (concat)

 

 

1. Array.forEach()

forEach() 메서드는 배열의 각 요소마다 특정 액션을 취해준다. 

// forEach 구문
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

forEach()은 첫번째 파라미터에 콜백(callback)함수를 필수적으로 받는다. 콜백의 파라미터(crruntvalue[, index[, array]])는 현재 배열의 요소를 필수적으로 받으며, 인덱스(index)와 해당 배열(array)을 옵션으로 줄 수도 있다.

 

콜백(callback)함수에서는 배열의 각 요소마다 순서대로 함수를 실행한다. 

let arr = ['가', '나', '다', '라', '마']

arr.forEach((value) => {
	console.log(value)
})
/* 결과:
'가'
'나'
'다'
'라'
'마 */

 

 

2. Array.push()

push()은 배열의 끝에 하나 이상의 요소를 추가하고, 그 배열의 길이를 반환하는 메서드이다.

// push 구문
arr.push(element1[, ...[, elementN]])

push()은 배열의 끝에 추가할 요소(들)을 파라미터로 받는다. 요소는 하나 또는 하나 이상일 수 있다. 요소가 추가되고 난 뒤의 배열의 길이를 반환한다. 

 

let arr = ['가', '나', '다']

arr.push('라') // arr = ['가', '나', '다', '라']
arr.push('마', '바') // arr = ['가', '나', '다', '라', '마', '바']
let length = arr.push('사') // '사' 추가 후 길이 7 반환
console.log(length) // 7

 

 

3. Array.pop()

pop()은 배열의 마지막 요소를 제거하고 그 요소를 반환한다.

// pop 구문
arr.pop()

pop()은 어떠한 파라미터도 받지 않고 호출 시 해당 배열의 마지막 요소를 제거하고, 제거한 요소를 반환한다. 

let arr = ['가', '나', '다', '라', '마']

arr.pop() // arr = ['가', '나', '다', '라']
let value = arr.pop() // '라' 삭제 후 '라' 반환
console.log(value) // '라'

 

 

4. Array.unshift()

unshift()은 새로운 요소(들)을 배열의 맨 앞쪽에 추가하고, 그 배열의 길이를 반환한다. 

// unshift 구문
arr.unshift([...elementN])

unshift()은 배열 맨 앞에 추가할 요소를 파라미터로 받는다. 호출 후 추가된 배열의 길이를 반환한다. 

 

let arr = ['가', '나']

arr.unshift('다') // arr = ['다', '가', '나']
let length = arr.unshift('라', '마') // arr = ['라', '마', '다', '가', '나']
console.log(length) // 5

 

 

5. Array.shift()

shift()은 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 

// shift 구문
arr.shift()

shift()은 어떠한 파라미터도 받지 않고 arr[0]의 요소를 삭제한다. 기존에 arr[0]에 있던 요소는 삭제되는 것이 아니라 한칸씩 밀려 길이가 1 늘어난다.

 

let arr = ['가', '나', '다', '라', '마']

arr.shift() // arr = ['나', '다', '라', '마']
let value = arr.shift() // '나' 삭제, arr = ['다', '라', '마']
console.log(value) // '나'

 

※  shift() unshift() 주의할 것!!!

• push, pop에 비해 속도가 매우 느리다.
• posh, pop은 기존 배열을 이동할 필요가 없지만, shift, unshift는 배열의 첫번째 요소에서 변화가 일어나기 때문에 기존 배열이 모두 이동해야 한다!!!

 

 

6. Array.splice()

splice()은 시작점을 지정해서 배열의 기존 요소(들)을 삭제하는 메서드이다. 옵션값을 줘서 삭제 후 새로운 요소를 추가할 수 있다. 

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

• start (필수): 삭제를 시작할 인덱스
• deleteCount: 삭제할 요소의 수. 입력하지 않으면 start부터 모든 요소 제거
• item: 새로 추가할 요소

splice()은 제거한 요소(들)을 담은 배열을 반환한다. 

let arr = ['가', '나', '다', '라', '마', '바', '사']

arr.splice(5) // arr = ["가", "나", "다", "라", "마"] 인덱스5부터 삭제
arr.splice(1, 2) // arr = ["가", "라", "마"] 인덱스1부터 2개 삭제
arr.splice(1, 2, '나', '다') // arr = ["가", "나", "다"] 인덱스1부터 2개 삭제 후 '나', '다' 추가

 

 

7. Array.concat()

concat()은 인자로 주어진 배열을 기존 배열과 합쳐 새로운 배열을 반환하는 메서드이다.

중요한 것은 기존배열을 변경하는 것이 아니라 새로운 배열을 반환한다는 것이다. 

// concat 구문
array.concat([value1[, value2[, ...[, valueN]]]])

• value(옵션): 합치고자 하는 배열. 생략하면 기존배열의 얕은 복사본을 반환

let arr = ['가', '나', '다', '라']
let arr2 = ['A', 'B', 'C']

let newArr = arr.concat(arr2) // newArr = ['가', '나', '다', '라', 'A', 'B', 'C']

 

 

8. Array.indexOf()

indexOf()은 주어진 값과 일치하는 첫번째 인덱스를 반환하는 메서드이다. 배열에서 특정 요소가 어디에 들어있는지 검색할 때 사용할 수 있다. 

// indexOf 구문
arr.indexOf(searchElement[, fromIndex])

• searchElement (필수): 배열에서 찾을 요소
• fromIndex: 검색을 시작할 인덱스

일치하는 요소가 배열에 없으면 -1을 반환한다. 

let arr = ['가', '나', '다', '라']

let index = arr.indexOf('다')
console.log(index) // 2

 

 

9. Array.lastIndexOf()

lastIndexOf()은 주어진 값과 일치하는 마지막 인덱스를 반하는 메서드이다. indexOf()처럼 인덱스값을 반환하지만 indexOf()는 첫번째 인덱스를, lastIndexOf()은 마지막 인덱스를 반환한다. 

 

let arr = ['가', '나', '다', '가']

let index = arr.lastIndexOf('가')
console.log(index) // 3