8.배열 내장함수
forEach
다음과 같은 텍스트 배열이 존재할 시
const 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 함수의 파라미터로는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줌
- 함수형태의 파라미터를 전달하는 것이 콜백함수
map
배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어짐
const array = [1, 2, 3, 4, 5, 6, 7, 8];
만약에 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만들고 싶다면?
※배운 지식들을 활용
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 square = n => n * n;
const squared = array.map(square);
console.log(squared);
- map 함수의 파라미터로는 변화를 주는 함수를 전달 (변화함수)
- 변화 함수를 꼭 이름을 붙여서 선언 할 필요는 없음
const squared = array.map(n => n * n);
console.log(squared);
indexOf
원하는 항목이 몇번째 원소인지 찾아주는 함수
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
토르가 몇번째 항목인지 알고싶다고 가정
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index); //2 출력
findIndex
배열 안에 있는 값이 숫자, 문자열, 또는 불리언이라면 찾고자하는 항목이 몇번째 원소인지 알아내려면 indexOf 를 사용
<주의!> 배열 안에 있는 값이 객체이거나, 배열이라면 indexOf 로 찾을 수 없음
const todos = [
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
}
];
만약 id 가 3 인 객체가 몇번째인지 찾으러면, findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있음
const todos = [
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
}
];
const index = todos.findIndex(todo => todo.id === 3);
console.log(index); //2 출력
find
findIndex 랑 비슷, 찾아낸 값이 몇번째인지 알아내는 것이 아니라, 찾아낸 값 자체를 반환
const todos = [
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
}
];
const todo = todos.find(todo => todo.id === 3);
console.log(todo); //{id: 3, text: "객체와 배열 배우기", done: true} 출력
filter
배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듬
const todos = [
{
id: 1,
text: '자바스크립트 입문',
done: true
},
{
id: 2,
text: '함수 배우기',
done: true
},
{
id: 3,
text: '객체와 배열 배우기',
done: true
},
{
id: 4,
text: '배열 내장함수 배우기',
done: false
}
];
const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);
//[
// {
// id: 4,
// text: '배열 내장 함수 배우기',
// done: false
//}
//];
splice
배열에서 특정 항목을 제거할 때 사용
const numbers = [10, 20, 30, 40];
위 배열에서 30 을 지운다고 가정
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers); //[10, 20, 40] 출력- 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미, 두번째 파라미터는 그 인덱스부터 몇개를 지울지를 의미
slice
splice 랑 조금 비슷, 배열을 잘라낼 때 사용하는데, 중요한 점은 기존의 배열은 건들이지 않는다는 것
const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지
console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]
- 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디까지 자를지 를 의미
shift 와 pop
- shift 는 첫번째 원소를 배열에서 추출 (추출하는 과정에서 배열에서 해당 원소는 사라집니다.)
const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value); // 10
console.log(numbers); // [20, 30, 40]
- pop 은 push 의 반대
- push 는 배열의 맨 마지막에 새 항목을 추가하고, pop 은 맨 마지막 항목을 추출
const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value); //40
console.log(numbers); //[10, 20, 30]
unshift
- shift 의 반대
- 배열의 맨 앞에 새 원소를 추가
const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers); //[5, 10, 20, 30, 40]
concat
- 여러개의 배열을 하나의 배열로 합쳐줌
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
- 배열 안의 값들을 문자열 형태로 합쳐줌
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
reduce
- 잘 사용 할 줄 알면 정말 유용한 내장 함수
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(n => {
sum += n;
});
console.log(sum); // 15
reduce 함수 사용시 다음과 같이 구현 가능
const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);
- reduce 함수에는 두개의 파라미터를 전달
- 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수
- 두번째 파라미터는 reduce 함수에서 사용 할 초깃값
- accumulator 는 누적된 값을 의미
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => {
console.log({ accumulator, current });
return accumulator + current;
}, 0);
console.log(sum);
※ 가장 처음엔 accumulator 값이 0 ( 두번째 파라미터인 초깃값으로 0을 설정했기 때문)
1. 처음 콜백 함수가 호출되면, 0 + 1 을 해서 1이 반환
※1이 반환되면 그 다음 번에 콜백함수가 호출 될 때 accumulator 값으로 사용
2. 콜백함수가 두번째로 호출 될 땐 1 + 2 를 해서 3이 반환
※2.의 값이 세번째로 호출될 때의 accumulator
3. 쭉- 누적돼서 결과물 15
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
if (index === array.length - 1) {
return (accumulator + current) / array.length;
}
return accumulator + current;
}, 0);
console.log(sum); //3
- 위 코드의 reduce 에서 사용한 콜백함수에서는 추가 파라미터로 index 와 array 를 받음
- index 는 현재 처리하고 있는 항목이 몇번째인지 가르키고, array 는 현재 처리하고 있는 배열 자신을 의미