[JavaScript] for, forEach, map, reduce, filter 함수

 

 

 

1. for 문

: 고전적인 for문

Syntax

for(let i=0 ; i<10 ; i++) {
    //반복 수행 코드 입력
}

※ 변수 선언 시 const를 사용하면 값 변경이 불가해 에러 발생!!!

☞ var, let, const 차이 보러 가기

특징

• 가장 빠르고 단순함
• 모든 자료형에 대해 사용 가능
• 중간에 loop 건너뛰기/종료 가능 (continue / break)
• 반복 범위 컨트롤 가능 (ex. i++, i-, i+, 2*i)
• 변수 활용 가능

 

1-1. for in 문

: 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 함

※ enumerable property : 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티. 이러한 프로퍼티들은 for/in 문으로 접근할 수 있게 됨

루프마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입.

대입받은 변수를 이용하면 루프 안에서 객체의 열거할 수 있는 프로퍼티에 순차적으로 접근 가능.

Syntax

for (변수 in 객체) {
    //객체의 모든 열거 가능한 프로퍼티의 개수만큼 반복 수행할 코드
}

예제 1

const man = {
    name: 'John Doe',
    job: 'engineer'
}

for (const key in man) {
    console.log('${key} : ${man[key]}');
}

//name : John Doe
//job : engineer

예제 2

//1) 배열 요소에 접근
var arr = [3, 4, 5];

for (var i=0 ; i<arr.length ; i++) {
    //배열 요소의 모든 인덱스 출력
    document.write( i + " " );	//0 1 2
}

for (var i in arr) {
    //위와 같은 동작 실행하는 for in 문
    document.wirte( i + " " );	//0 1 2
}


//2) 객체의 프로퍼티에 접근
var obj = {
    name = "John Doe",
    job = "engineer"
};

for (var i in obj) {
    document.wirte( i +" " );	//name job
}

 

1-2. for of 문

: 반복할 수 있는 객체를 순회할 수 있도록 함

루프마다 객체의 열거 가능(ex. String, Arrary, Map, Set, DOM컬렉션)한 프로퍼티 값을 지정된 변수에 대입

(익스플로러에서 지원 X)

Syntax

for (변수 of 객체) {
    //객체의 모든 열거 가능한 프로퍼티의 개수만큼 반복 수행할 코드
}

예제

//배열 요소에 접근
var arr = [3, 4, 5];

for (var i=0 ; i<arr.length ; i++) {
    //배열 arr의 모든 요소의 인덱스를 출력
    document.write(arr[i] + " ");	//3 4 5
}

for (var value of arr) {
    //위와 같은 동작을 실행하는 for of 문
    document.write(value + " ");	//3 4 5
}


//Set 객체의 프로퍼티에 접근
var arr = new Set([
    1, 1, 2, 2, 3, 3
]);

for (var value of arr) {
    document.write(value + " ");	//1 2 3
}


//Map 객체의 프로퍼티에 접근
var arr = new Map([
    ["a", 1], ["b", 2], ["c", 3]
]);

for (let entry of arr) {
    document.write(entry + " ");	//["a", 1] ["b", 2] ["c", 3]
}

for (let [key, value] of iterable) {
    document.write(value + " ");	//1 2 3
}

 

 

2. forEach문

: 주어진 함수를 배열 요소 각각에 대해 실행

Syntax

arr.forEach((currentElement, index, array)

예제

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

arr.forEach((currentElement. index, array) -> {
    console.log('요소: ${currentElement}');
    console.log('index: ${index}');
    console.log(array);
)};

/*
    요소: 1
    index: 0
    [1, 2, 3, 4, 5]
    요소: 2
    index: 1
    [1, 2, 3, 4, 5]
    
    ...생략
    
    요소: 5
    index: 4
    [1, 2, 3, 4, 5]
*/

 

 

3. map 메소드

: 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열 반환

Syntax

arr.map(callback(currentValue, index, array), thisArg)

예제

 const array = [1, 2, 3, 4, 5];
 
 const mapEx = array.map(x => x * 2);
 console.log(mapEx);	//[2, 4, 6, 8, 10]

 

 

4. reduce 메소드

: 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수 실행, 하나의 결괏값 반환

Syntax

arr.reduce(callback[, initialValue])

☞ reduce 메소드 설명 보러 가기

 

 

5. filter 함수

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

Syntax

arr.filter(callback(currentValue[, index, [array]]) {
    //true일 경우 새로운 array로 반환할 element
} [, thisArg]);

예제

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length>6);
const.log(result);	//["exuberant", "destruction", "present"]

 

 

 

 

 

 

 

 

 

 

※ 출처

 

1) https://hyg4196.tistory.com/125?category=936425 

JavaScript - for, foreach, filter, map, reduce 기능

 

2) yjshin.tistory.com

[JavaScript] 자바스크립트 for 문, for in 문, for of 문

 

3) https://curryyou.tistory.com/202

[자바스크립트] 반복문 총정리: for in, for of, forEach 등

 

4) https://bigtop.tistory.com/58

[JavaScript] 자바스크립트 forEach 메서드 이해하기

 

5) https://developer.mozilla.org/ko/

MDN Web Docs