forEach
: for문 대체, 배열 안에 있는 모든 원소들을 모두 출력
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
//for문으로 배열 안에 있는 모든 원소 출력
for (let i=0; i<superheroes.length; i++){
console.log(superheroes[i]);
}
//forEach함수 사용
superheroes.forEach(hero => {
console.log(hero);
});- forEach 함수의 파라미터로 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줌
- 콜백함수: 함수형태의 파라미터를 전달하는 것
map
: 배열 안의 각 원소를 변환할 때 사용, 새로운 배열이 만들어짐
const array = [1,2,3,4,5,6,7,8];
const squared = [];
//for문 이용
for (let i=0; i<array.length; i++){
squared.push(array[i]*array[i]);
}
console.log(squared);
//forEach 이용
array.forEach(n => {
squared.push(n*n);
});
console.log(squared);
//map이용
const square= n => n*n;
const squared = array.map(square);
console.log(squared);- map함수의 파라미터로 변화를 주는 함수 전달(변화함수)
indexOf
: 원하는 항목이 몇 번째 원소인지 찾아주는 함수
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index=superheroes.indexOf('토르');
console.log(index);- index값은 0부터 시작
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);
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
}
];
*/- filter함수에 넣는 파라미터: 조건을 검사하는 함수(각 원소의 값 받아옴)
splice
: 배열에서 특정 항목 제거
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);
//결과값
//[10, 20, 40]- 첫 번째 파라미터는 어떤 인덱스를 지울지 의미, 두 번째 파라미터는 그 인덱스로 부터 몇 개를 지울지 의미
slice
: 배열을 잘라낼 때 사용, 기존의 배열은 건들이지 않음
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);
console.log(numbers);
/*
10
[20, 30, 40]
*/pop: push의 반대 개념, push는 배열의 맨 마지막에 새 항목 추가, pop은 맨 마지막 항목을 추출
const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value);
console.log(numbers);
/*
40
[10, 20, 30]
*/
unshift
: 배열의 맨 앞에 새 원소 추가
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];- arr1과 arr2에 변화를 주지 않음(즉, 새로운 배열을 만들어냄)
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;
//forEach 사용
numbers.forEach(n => {
sum += n;
});
console.log(sum);
//reduce 사용
let sum = array.reduce((accumulator, current) = > accumulator+current,0);
console.log(sum);- 첫 번째 파라미터는 accumulator와 current를 파라미터로 가져와 결과를 반환하는 콜백함수
- 두 번째 파라미터는 reduce함수에서 사용 할 초기값