JavaScript 배열 다루기(추가, 삭제, 찾기, 변형)

자바스크립트에서 배열을 다룰 때 자주 사용하고 유용한 방법을 소개합니다.

 

추가/삭제

push, pop: 배열의 제일 뒤에 추가/삭제

let myArray = [1, 2, 3]

// 배열 제일 뒤에 요소 추가
myArray.push(4)
console.log(myArray)
// [1, 2, 3, 4]

// 배열 제위 뒤 요소 삭제
myArray.pop()
console.log(myArray)
// [1, 2, 3]

 

unshift, shift: 배열의 제일 앞에 추가/삭제

let myArray = [1, 2, 3]

// 배열 제일 앞에 요소 추가
myArray.unshift(0)
console.log(myArray)
// [0, 1, 2, 3]

// 배열 제위 앞의 요소 삭제
myArray.shift()
console.log(myArray)
// [1, 2, 3]

 

splice: 배열 임의의 위치에 추가/삭제

let myArray = [0, 1, 2, 3, 4]

// index 1번에서 2개 요소 삭제
myArray.splice(1, 2)
console.log(myArray)
// [0, 3, 4]

// index 1번에서 0개 요소 삭제, 41, 42 추가
myArray.splice(1, 0, 41, 42)
console.log(myArray)
// [0, 41, 42, 3, 4]

// index 3번에서 2개 요소 삭제, 43, 44 추가
myArray.splice(3, 2, 43, 44)
console.log(myArray)
// [0, 41, 42, 43, 44]

splice함수의 정의는 "arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])"입니다.

 

찾기

find: callback 함수에 부합되는 항목 찾기

findIndex: callback 함수에 부합되는 항목의 index 찾기

const fruit = ['apples', 'oranges', 'peaches', 'pears', 'cherries', 'peaches']

const pFruit = fruit.find(fruit => fruit.startsWith('p'))
console.log(pFruit)
// "peaches"

const pFruitIndex = fruit.findIndex(fruit => fruit.startsWith('p'))
console.log(pFruitIndex)
// 2

find함수의 정의는 "arr.find(callback[, thisArg])"입니다.

callback 함수의 정의는 "callback(element, index, array)"입니다.

 

indexOf: 일치하는 항목의 index 얻기

lastIndexOf: 뒤에서 부터 일치하는 항목 index 얻기

const fruit = ['apples', 'oranges', 'peaches', 'pears', 'cherries', 'peaches']

console.log(fruit.indexOf('peaches'))
// 2
console.log(fruit.lastIndexOf('peaches'))
// 5
console.log(fruit.indexOf('grapes'))
// -1

 

includes: 항목을 포함하는지 여부 확인

const fruit = ['apples', 'oranges', 'peaches', 'pears', 'cherries', 'peaches']

console.log(fruit.includes('peaches'))
// true
console.log(fruit.includes('grapes'))
// false

 

변형

slice: 추출

let myArray = [0, 1, 2, 3, 4]

console.log(myArray.slice(2))
// (3) [2, 3, 4]
console.log(myArray.slice(1, 3))
// (2) [1, 2]
console.log(myArray.slice(0, -2))
// (3) [0, 1, 2]

slice함수의 정의는 "arr.slice([begin[, end]])"입니다.

 

concat: 병합

let myArray1 = [1, 2]
let myArray2 = [3, 4]
let myArray3 = [5, 6]

let combined = myArray1.concat(myArray2, myArray3, 7)
console.log(combined)
// (7) [1, 2, 3, 4, 5, 6, 7]

concat함수의 정의는 "array.concat([value1[, value2[, ...[, valueN]]]])"입니다.

 

filter: 거르기

let myArray = [1, 2, 3, 4, 5]

let evens = myArray.filter(number => number % 2 === 0)
console.log(evens)
// (2) [2, 4]

filter함수의 정의는 "arr.filter(callback(element[, index[, array]])[, thisArg])"입니다.

 

map: 변형

let myArray = [1, 2, 3, 4, 5]

let doubled = myArray.map(number => number * 2)
console.log(doubled)
// (5) [2, 4, 6, 8, 10]

map함수의 정의는 "arr.map(callback(currentValue[, index[, array]])[, thisArg])"입니다.

 

flat: 평탄화(중첩 배열을 1차원 배열로 나열)

let myArray = [[1, 2, 3], [4], 5]

let flat = myArray.flat()
console.log(flat)
// (5) [1, 2, 3, 4, 5]

flat함수의 정의는 "arr.flat([depth])"입니다.

 

reduce: 결과값과 요소들의 연속된 연산 후 하나의 결과값 추출

let myArray = [1, 2, 3, 4, 5]

let factorial = myArray.reduce((result, element) => result * element, 1)
console.log(factorial)
// 120

reduce함수의 정의는 "arr.reduce(callback[, initialValue])"입니다.

 

join: 요소들을 하나의 문자열로 합침

let myArray = [1, 2, 3, 4, 5]

let joined = myArray.join('.')
console.log(joined)
// "1.2.3.4.5"

join함수의 정의는 "arr.join([separator])"입니다.