[JavaScript] 배열 내장함수에 대해 알아보자

비얌·2022년 8월 2일
자바스크립트
2
post-thumbnail

자바스크립트 배열의 내장함수인 forEach, map, indexOf, indIndex, find, filter, splice, shift, unshift, pop, push, concat, join, reduce에 대해 공부하고 간단한 예시와 함께 정리해보았다 📌


forEach

  • forEach는 for문과 같이 반복적인 일을 수행할 때 사용되는 배열의 내장함수이다.
  • arr.forEach(callback) 형태로 사용되며, callback 함수는callback(element, index, array) 형식으로 인자를 받는다.
  • 따라서 forEach()는 arr.forEach(callback(element, index, array)) 형태로 사용된다.
  • 콜백함수란? 함수의 파라미터로 함수가 전달되는 것을 말한다.
  • forEach()는 💡 리턴값이 없다! (다음 단락에 다룰 map()과 달리)


아래의 코드에서 superheroes 배열의 원소들을 모두 출력하려고 했을 때, 기존에는 for문을 사용해서 아래와 같이 출력할 수 있었다. 

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

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


하지만 forEach 함수를 사용하면 아래와 같이 간결한 코드로 구현할 수 있다.

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach(hero => {
  console.log(hero);
});


그런데! 여기서 forEach 함수의 파라미터로 hero ⇒ {console.log(hero)}가 들어가는게 잘 이해가지 않았다.

이때 hero를 element로 보고 일반 함수로도 보니 이해가 더 쉬워졌다.

arr.forEach(element => console.log(element));

// 위와 같다
arr.forEach(function(element){
    console.log(element);
});


마지막으로 forEach()가 element, index, array 모두를 인자로 받을 때를 살펴보자.

const fruits = ['kiwi', 'orange', 'apple', 'banana'];

fruits.forEach((element, index, arr) => {
  console.log("index "+index+", element: "+element+", fruits["+index+"]: "+fruits[index]);
});

/* "index 0, element: kiwi, fruits[0]: kiwi"
"index 1, element: orange, fruits[1]: orange"
"index 2, element: apple, fruits[2]: apple"
"index 3, element: banana, fruits[3]: banana" */

element, index, arr 모두를 잘 전달받아 출력한 것을 알 수 있다!



map

  • map은 배열 안의 각 원소를 변환할 때 사용되며, 이 과정에서 새로운 배열이 만들어진다. forEach()와 다른 점은 💡 리턴값이 있다!
  • arr.map(callback)
  • callback(element, index, array)
  • arr.map(callback(element, index, array))


어떤 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만든다고 가정하자. for문을 사용한다면 아래와 같이 만들 수 있을 것이다. 

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];
for (let i = 0; i < array.length; i++) {
  squared.push(array[i] * array[i]);
}

console.log(squared);


위에서 배운 forEach()를 사용한다면 다음과 같이 만들 수도 있을 것이다.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];

array.forEach(n => {
  squared.push(n * n);
});

console.log(squared);


하지만 map()을 쓴다면 더 간결한 코드로 구현할 수 있다.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = array.map(n => n * n);
console.log(squared);


여기서 map을 forEach로 바꿔도 구현되지 않을까? 싶어서 바꿔보았다.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = array.forEach(n => n * n);
console.log(squared); // undefined

정답이 아닌 undefined라고 뜬다.

forEach()는 구문 밖으로 리턴값을 받지 못하기 때문에 undefined라고 뜬 것 같다.



indexOf

  • str.indexOf(searchValue[, fromIndex])
    • searchValue: 찾으려는 문자열
    • fromIndex(Optional)
  • 배열 안의 항목이 숫자, 문자열, 불리언일 때 indexof()는 원하는 항목이 몇번째 원소인지 찾아준다.
  • 찾고자 하는 항목이 없을 시 -1을 반환한다.


예를 들어 ‘apple’이 몇번째 항목인지 알고싶을 때, indexOf()를 사용하면 알 수 있다. 

const fruits = ['kiwi', 'orange', 'apple', 'banana'];
const index = fruits.indexOf('apple');
console.log(index);


배열에 없는 항목을 찾으려고 하면 -1을 반환한다.

const fruits = ['kiwi', 'orange', 'apple', 'banana'];
const index = fruits.indexOf('love');
console.log(index); // -1


findIndex

  • arr.findIndex(callback)
  • callback(element, index, array)
  • arr.findIndex(callback(element, index, array))
  • 배열 안의 항목이 객체 혹은 배열이라면 indexOf()대신 findIndex()를 사용한다.


아래의 코드에서 name이 ‘bibi'인 객체가 몇번째인지 찾으려면 findIndex()를 사용해 코드를 작성하면 된다.

const todos = [
  {
    id: 1,
		name: 'biyam',
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
		name: 'zikzik',
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
		name: 'jay',
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
		name: 'bibi',
    text: '배열 내장함수 배우기',
    done: false
  }
];

const name = todos.findIndex(todo=>todo.name==='bibi');
console.log(name); // 3


find

  • arr.find(callback)
  • callback(element, index, array)
  • arr.find(callback(element, index, array))
  • findIndex와 비슷하지만 인덱스를 찾는 것이 아니라 찾아낸 값 자체를 반환한다.


아래의 코드에서 findIndex는 인덱스를 반환한 것과 달리 find는 name이 bibi인 값 자체를 리턴한 것을 알 수 있다.

const todos = [
  {
    id: 1,
		name: 'biyam',
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
		name: 'zikzik',
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
		name: 'jay',
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
		name: 'bibi',
    text: '배열 내장함수 배우기',
    done: false
  }
];

const name = todos.find(todo=>todo.name==='bibi');
console.log(name); 

/*
[object Object] {
  done: false,
  id: 4,
  name: "bibi",
  text: "배열 내장함수 배우기"
}
*/


filter

  • arr.filter(callback)
  • callback(element, index, array)
  • arr.filter(callback(element, index, array))
  • filter()는 배열에서 특정 조건을 만족하는 값들만 추출하여 새로운 배열을 만든다.


done: false인 값들만 추출하여 새로운 배열을 만든 것을 알 수 있다. 

const todos = [
  {
    id: 1,
		name: 'biyam',
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
		name: 'zikzik',
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
		name: 'jay',
    text: '객체와 배열 배우기',
    done: false
  },
  {
    id: 4,
		name: 'bibi',
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo=>todo.done===false);
// 위와 같다. 
// const tasksNotDone = todos.filter(todo => !todo.done);
console.log(tasksNotDone);

/*
[[object Object] {
  done: false,
  id: 3,
  name: "jay",
  text: "객체와 배열 배우기"
}, [object Object] {
  done: false,
  id: 4,
  name: "bibi",
  text: "배열 내장함수 배우기"
}]
*/


splice

  • array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
    • start: 배열의 변경을 시작할 인덱스
    • deleteCount(Optional): 배열에서 제거할 요소의 수
    • item1, item2, …(Optional): 배열에 추가할 요소. 생략할 경우 요소를 제거하기만 한다


30을 지워보자.

const numbers = [10, 20, 30, 40];

const index = numbers.indexOf(30)
// 위와 같다.
// const index2 = numbers.findIndex(number=>number===30);

// 30을 지워준다
numbers.splice(index, 1);

console.log(numbers); // [10, 20, 40]


30을 지우고 지워진 30 자리에 0과 1을 추가해보자.

const numbers = [10, 20, 30, 40];

const index = numbers.indexOf(30)
// 위와 같다.
// const index2 = numbers.findIndex(number=>number===30);

// 30을 지우고 0과 1을 추가한다
numbers.splice(index, 1, 0, 1);

console.log(numbers); // [10, 20, 0, 1, 40]


shift와 unshift

  • arr.shift()
  • arr.unshift()
  • 가장 첫번째 원소를(인덱스 0) 빼내고(shift), 추가한다(unshift).
  • shift로 추출되면 해당 원소는 배열에서 사라진다.


가장 첫번째 원소를 빼내고(shift), 추가해봤다(unshift).

const numbers = [10, 20, 30, 40];

const shiftValue = numbers.shift();
console.log(shiftValue); // 10
console.log(numbers); // [20, 30, 40]

numbers.unshift(0);
console.log(numbers) // [0, 20, 30, 40]


pop과 push

  • arr.pop()
  • arr.push()
  • 가장 마지막 원소를(인덱스 -1) 빼내고(pop), 추가한다(push).
  • pop으로 추출되면 해당 원소는 배열에서 사라진다.


가장 마지막 원소를 빼내고(pop), 추가해봤다(push).

const numbers = [10, 20, 30, 40];

const shiftValue = numbers.pop();
console.log(shiftValue); // 4
console.log(numbers); // [10, 20, 30]

numbers.push(0);
console.log(numbers) // [10, 20, 30, 0]


concat

  • array.concat([value1[, value2[, ...[, valueN]]]])
    • 매개변수는 배열 또는 값이다
  • 여러개의 배열을 하나의 배열로 합쳐준다.
  • 얕은 복사로, concat함수는 기존 배열에 변화를 주지 않는다.


arr1와 arr2의 모든 원소들이 합쳐진 배열 concated를 만들었다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);

console.log(concated); // [1, 2, 3, 4, 5, 6];


join

  • arr.join([separator])
    • seperator: 배열의 각 요소를 구분할 문자열을 지정한다. 예를 들어 각 요소들 사이에 콤마를 넣고 싶다면 arr.join(’, ‘)라고 하면 된다.


예시1) 배열의 요소가 숫자일 때

const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

예시2) 배열의 요소가 문자일 때

const array = ['지현', '지수', '지민', '지혁', '지우'];
console.log(array.join()); // "지현,지수,지민,지혁,지우"
console.log(array.join(' ')); // "지현 지수 지민 지혁 지우"
console.log(array.join(', ')); // "지현, 지수, 지민, 지혁, 지우"


Reduce

  • arr.reduce(callback[, initialValue])
    • callback - 아래의 네 가지 인수를 받는다.
      • accumulator - 누산값
      • currentValue - 현재 요소 값
      • currentIndex(Optional) - 현재 요소의 인덱스
      • array(Optional) - 현재 배열
    • initialValue(Optional) - 초기 누산값
  • map(), forEach()와 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 한다


가장 기본적인 예시로 요소들의 합을 구해보자.

초기 누산값 0 + 현재 요소 값(1) = 1(누산값)
누산값(1) + 현재 요소 값(2) = 3(누산값)
누산값(3) + 현재 요소 값(3) = 6(누산값)
누산값(6) + 현재 요소 값(4) = 10(누산값)
누산값(10) + 현재 요소 값(5) = 15(누산값)

→ 이러한 과정을 거쳐 결과는 15가 됨을 확인할 수 있다!

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15


초기 누산값이 100이 되면 어떻게 될까?

초기 누산값 100 + 현재 요소 값(1) = 101(누산값)
누산값(101) + 현재 요소 값(2) = 103(누산값)
누산값(103) + 현재 요소 값(3) = 106(누산값)
누산값(106) + 현재 요소 값(4) = 110(누산값)
누산값(110) + 현재 요소 값(5) = 115(누산값)
→ 이러한 과정을 거쳐 결과는 115가 됨을 알 수 있다.

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 100);
console.log(sum); // 115


💡 참고한 자료: https://learnjs.vlpt.us/basics/09-array-functions.html

profile
비얌
🐹강화하고 싶은 기억을 기록하고 공유하자🐹
이전 포스트

[LeetCode]Valid Parentheses

다음 포스트

[리액트] 컴포넌트 생성하기

0개의 댓글