자바스크립트에는 배열이나 객체를 순회할 수 있는 여러 가지 메소드가 존재한다.
1. for
사용법
for (var i = 0; i < 반복횟수; i++) {
...
}
기능
배열을 순회할 때 사용할 수 있다.
여느 언어의 for문과 마찬가지로 break, continue를 이용해 원하는 조건을 만났을 때 빠져나올 수 있다.
예제
var fruits = ['apple', 'banana', 'carrot', 'mango', 'kiwi'];
for(var i=0; i<fruits.length; i++) {
if (fruits[i] === 'carrot') {
console.log('carrot is not a fruit');
break;
}
else {
console.log(fruits[i], 'is a fruit.');
}
}
/** 실행결과
apple is a fruit.
banana is a fruit.
carrot is not a fruit. (브레이크됨)
*/
2. forEach
사용법
배열.forEach(function callback(element, index) => {
...
});
기능
배열을 순회해서 하나씩 개체를 꺼내 무언가 일을 수행해야 할 때 사용한다. 배열에서 element를 하나씩 가져와서 콜백함수를 실행한다.
forEach는 무조건 순회를 완료한다. 중간에 빠져나올 수 없다. 'carrot'읆 만나면 return false를 써서 break를 걸려고 해 봤으나 작동하지 않고 kiwi까지 순회했음을 알 수 있다.
예제
var fruits = ['apple', 'banana', 'carrot', 'mango', 'kiwi'];
fruits.forEach(f => {
if (f === 'carrot') {
console.log('carrot is not a fruit.');
return false; // 작동하지 않는다.
}
else {
console.log(f, 'is a fruit.');
return true;
}
});
/** 실행결과
apple is a fruit.
banana is a fruit.
carrot is not a fruit.
mango is a fruit.
kiwi is a fruit.
*/
3. map
사용법
배열.map(function callback(element, index) => {
...
}
기능
배열을 순회해서 새로운 배열을 만들어낼 때 사용한다. 원래 배열의 개체들을 하나씩 순회해서 일대일로 결과물을 만들어내는 메소드이기 때문에 애초에 break나 continue가 존재하지 않는다.
예제
var fruits = ['apple', 'banana', 'carrot', 'mango', 'kiwi'];
var fruits_sentences = fruits.map(f => {
if (f === 'carrot') return f + ' is not a fruit.';
else return f + ' is a fruit.';
});
console.log(fruits_sentences);
/**
*
* [
'apple is a fruit.',
'banana is a fruit.',
'carrot is not a fruit.',
'mango is a fruit.',
'kiwi is a fruit.'
]
*/
4. some
사용법
배열.some(function callback(element, index) {
if (찾고자 하는 조건) return true; // 원하는 조건의 개체가 있다면 순회 종료
else return false; // 없어도 되는 문장
}
기능
배열에 원하는 조건의 개체가 하나라도 존재하는지 찾는다. 콜백함수 내에서 true가 반환되면 some 순회가 종료된다.
예제
var fruits = ['apple', 'banana', 'carrot', 'mango', 'kiwi'];
var isExistCarrot = fruits.some(f => {
if (f === 'carrot') return true;
});
console.log('Does a carrot exist?', isExistCarrot);
// 실행결과
// Does a carrot exist? true
5. every
사용법
배열.every(function callback(element, index) {
if (!모두 만족해야 하는 조건) return false;
else return true;
}
기능
배열의 모든 개체가 조건을 만족하는 지 검사한다. 콜백함수가 false를 리턴하면 조건을 충족시키지 않는다고 판단하고 순회를 종료한다.
예제
var fruits = ['apple', 'banana', 'carrot', 'mango', 'kiwi'];
var isAllFruit = fruits.every(f => {
if (f === 'carrot') return false;
});
console.log('Is all a fruit?', isAllFruit);
// 실행결과
// Is all a fruit? false
6. filter
사용법
var 결과물 = 배열.filter(function callback(element, index) {
if (찾고자 하는 조건) return true;
else return false;
}
기능
조건을 통과하는 개체로만 이루어진 새로운 배열을 만들어낼 때 사용한다. 콜백이 true를 반환하면 해당 개체가 새로운 배열에 추가되고, 아니면 무시된다.
예제
var fruits = ['apple', 'banana', 'carrot', 'mango', 'kiwi'];
var onlyFruits = fruits.filter(f => {
if (f !== 'carrot') return true;
else return false;
});
console.log(onlyFruits);
// 실행결과
// [ 'apple', 'banana', 'mango', 'kiwi' ]
7. reduce
사용법
var 결과 = 배열.reduce(function callback(누적값, 현재값) {
if (조건에 맞으면) return 누적값 + 현재값;
else return 누적값; // return 누적값 + 0;
}, 초깃값)
기능
배열을 순회해서 원하는 조건을 충족시키는 개체로만 무언가 누적해서 결과를 만들어낼 때 사용한다. 덧셈이라던가...
예제
var numbers = [1, 2, 3, 4, 5];
var sumOfOneTwoThreeFour = numbers.reduce((prev, curr) => {
if (curr < 5) return prev + curr;
else return prev;
}, 0);
console.log(sumOfOneTwoThreeFour);
// 실행결과
// 10