[ES6] 자바스크립트 ES6 - 3. 반복문

 

* 반복문 사용법 및 특징 forEach, for in, for of, map, filter, some, every, reduce

* ES6 외 for문도 포함하여 작성한다.

 

 

1. forEach

* 배열 반복

* return 해도 계속 진행

* break, continue 불가

let arr = ['A','B','C'];

arr.forEach( (val, idx, array) => {
    console.log( val ); // 1번째 매개변수: 배열 값 - A,B,C
    console.log( idx ); // 2번째 매개변수: 배열 INDEX - 0,1,2
    console.log( array ); // 3번째 매개변수: 배열 전체 -[A,B,C] [A,B,C] [A,B,C]
})

 

 

2. for .. in 

* 배열, 객체, 문자열 반복

* break, continue 사용 가능

// 배열
let arr = ['A','B','C'];

for ( let idx in arr ){
    console.log ( idx + " :: " + arr[idx] ) ; 
}

0 :: A
1 :: B
2 :: C

// 객체
let obj = {name: 'A', age: 'B', birth: 'C'};

for ( let key in obj ){
    console.log ( key + " :: " + obj[key] ) ; 
}

name :: A
age :: B
birth :: C

// 문자열
let str = "문자열";

for ( let idx in str ){
	console.log( idx + " :: " + str[idx] );
}

0 :: 문
1 :: 자
2 :: 열

 

 

3. for .. of

* 배열, 문자열, Map, Set 반복

* break, continue 사용 가능

// for in과 사용법 동일
let arr = ['A','B','C'];
let map = new Map(["key1":"val1"]["key2", "val2"]);
let set = new Set('A','A','B','C'); // Set은 중복 x

for ( let val of arr ){
    console.log ( val ); // 바로 값 꺼내기 가능
}

A
B
C

 

 

반응형

 

 

4. map

* 배열 반복

* 새로운 배열을 리턴한다. map 실행 대상 배열은 변하지 않는다.

let arr = [1,2,3,4,5];

let newArr = arr.map( (val, idx) => val * val );

console.log ( newArr ); // [1,4,9,16,25]

 

 

5. filter

* 배열 반복

* 조건에 해당하는 배열만 남겨 리턴한다. filter 실행 대상 배열은 변하지 않는다.

let arr = [1,2,3,4,5];

let newArr = arr.filter( (val) => val % 2 == 1 ); // 홀수만

console.log ( newArr ); // [1,3,5]

 

 

 

6. some

* 배열 반복

* 배열 내부 search. 원하는 조건 찾았으면 더 이상 실행되지 않고 break 된다.

let arr = [1,2,3,4,5];

let flagTf = arr.some( (val) => {
    console.log ( val ); // 1, 2, 3
    if (val == 3){
        return true; // 3을 찾으면 stop
    }
});

console.log( flagTf ); // true

 

 

7. every

* 배열 반복

* some과 비슷하나 모든 조건이 만족해야만 true

let arr = [1,2,3,4,5];

let flagTf = arr.every( (val) => {
    console.log ( val ); // 1, 2, 3, 4, 5
    if (val == 3){
        return true; 
    }
});

console.log( flagTf ); // false

 

 

8. reduce

* 배열 반복

* 누적 계산식

// 평균값 구하는 누적 계산식
let arr = [1,2,3,4,5];

let res = arr.reduce( (acc, val, idx) => { // acc는 누적값
    let avg = acc + val; // 누적값 + 배열값
    if ( idx == arr.length-1 ){ // 마지막 index에서 나눠서 평균값 계산
        avg = avg / arr.length; 
    }
    return avg; // return 값은 다음 반복의 acc으로 간다.
}, 0); // 0은 초기 acc값

console.log( res ); // 3