자바스크립트에는 배열을 좀 더 쉽게 다룰 수 있게 만들어 주는 내장함수들이 존재한다.
이번 포스트에서는 배열의 내장함수들 중 많이 쓰이는 것들을 알아보자.

1. forEach

const animals = ["cat", "dog", "tiger", "lion", "horse"]

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i])
}

배열 안에 있는 모든 원소들을 출력해야 할 때 보통 for 문을 사용하여 다음과 같이 구현 할 수 있다. 하지만 forEach를 사용하면 좀 더 간단하게 만들 수 있다.

const animals = ["cat", "dog", "tiger", "lion"]

animals.forEach((animal, idx) => {
  console.log(animal, idx) // "cat" 0 "dog" 2 "tiger" 3, "lion" 4
})

forEach 내부에는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 매개변수 animal는 배열의 각각의 원소를 가르키게 된다. 이 콜백함수의 첫 번째 매개변수는 배열의 각각의 원소를 의미하고 두 번째 매개변수는 각 원소의 index(0,1,2,3)를 의미한다.

2. map

map 은 배열 안의 각 원소를 변환 할 때 사용 된다, 이 과정에서 새로운 배열이 만들어지며 원본배열은 변화가 없다.

const numbers = [1, 2, 3, 4, 5]
const double = numbers.map((n) => 2*n)

console.log(double)   //  [2, 4, 6, 8, 10]
console.log(numbers)  //  [1, 2, 3, 4, 5]

3. indexOf, includes

indexOf 는 원하는 항목이 몇번째 index인지 찾아주는 함수이다. 원하는 항목이 배열 내에 없으면 -1을 반환한다.

const animals = ["cat", "dog", "tiger", "lion"]

const indexDog = animals.indexOf('dog')   
const indexLion = animals.indexOf('lion') 
const indexLion = animals.indexOf('cow')

console.log(indexDog)   // 1
console.log(indexLion)  // 3
console.log(indexCow)   // -1

includes 는 배열이 특정 요소를 포함하고 있는지 판별한다. 포함하고 있으면 true 없으면 false를 반환한다.

const animals = ["cat", "dog", "tiger", "lion"]

console.log(animals.includes("cat"))   // true
console.log(animals.includes("cow"))   // false

4. filter

filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

const numbers = [1, 2, 3, 4, 5, 6]
const evenNum = numbers.filter((n) => n % 2 === 0)

console.log(double)   //  [2, 4, 6]

위 코드르 보면 filter 함수의 콜백함수에 n이 짝수인 경우만 통과하도록 조건을 걸었고 그 조건에 만족하는 2, 4, 6만 반환된다.

5. slice

slice 는 배열을 잘라낼 때 사용한다. slice 에는 두 개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디까지 자를지 를 의미한다. 추가로 기존의 배열은 건들이지 않는다.

const numbers = [1, 2, 3, 4, 5, 6]
const sliced = numbers.slice(0, 3) // index 0부터 시작해서 3전까지

console.log(sliced) // [1, 2, 3]
console.log(numbers) // [1, 2, 3, 4, 5, 6]

6. splice

splice 는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

const months = ['Jan', 'March', 'April', 'June']

months.splice(1, 0, 'Feb')  // index 1에 Feb 추가
console.log(months)  // ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May')  // index 4에서 요소 하나를 지우고 그 자리에 May 추가
console.log(months)  // ["Jan", "Feb", "March", "April", "May"]

마치며

이번 포스트에서는 자바스크립트의 배열 내장함수에 대해서 알아보았다. 배열을 다룰 일이 많을텐데 그 때마다 유용하게 잘 사용해야겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧