자바스크립트 순회 (for, forEach, for ... in, map, some, every, filter, reduce)

자바스크립트에는 배열이나 객체를 순회할 수 있는 여러 가지 메소드가 존재한다. 

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