자바스크립트 배열의 내장함수인 forEach
, map
, indexOf
, indIndex
, find
, filter
, splice
, shift
, unshift
, pop
, push
, concat
, join
, reduce
에 대해 공부하고 간단한 예시와 함께 정리해보았다 📌
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
은 배열 안의 각 원소를 변환할 때 사용되며, 이 과정에서 새로운 배열이 만들어진다. 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
라고 뜬 것 같다.
str.indexOf(searchValue[, fromIndex])
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
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
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: "배열 내장함수 배우기"
}
*/
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: "배열 내장함수 배우기"
}]
*/
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
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]
arr.shift()
arr.unshift()
가장 첫번째 원소를 빼내고(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]
arr.pop()
arr.push()
가장 마지막 원소를 빼내고(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]
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];
arr.join([separator])
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(', ')); // "지현, 지수, 지민, 지혁, 지우"
arr.reduce(callback[, initialValue])
accumulator
- 누산값currentValue
- 현재 요소 값currentIndex
(Optional) - 현재 요소의 인덱스array
(Optional) - 현재 배열initialValue
(Optional) - 초기 누산값가장 기본적인 예시로 요소들의 합을 구해보자.
초기 누산값 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