[Javascript] 반복문 정리(for, for in, for of, forEach)

반복문은 결과가 참인 경우 코드 블록을 실행한다.

자바스크립트는 세 가지 반복문인 for문, while 문, do... while문이 있다.

 

이번에는 for문과 반복문을 대체할 수 있는 기능들을 알아보려고 한다.

 

for문

for문은 세 개의 선택식과 반복을 실행할 문(주로 코드 블록)으로 이루어져 있다. 구문은 아래와 같다.

for(할당식 또는 변수 선언; 조건식; 매 반복 후 평가할 식){
	조건식의 평가 결과가 참일 때 실행하는 문
}

 

간단한 예제로 for문을 알아보자.

for(let i = 0; i < 5; i++){
	console.log(i);
}

위의 예제를 풀이해보자면 i라는 변수를 선언하고 초기값을 0으로 시작한다고 선언한 것이다. i가 5보다 작으면 명령문을 실행하고 i의 값을 1 높인다. i의 값이 5가 되면 조건은 성립되지 않으므로 더이상 명령문을 실행하지 않는다.

 

output

0
1
2
3
4

 

반복문을 대체할 수 있는 기능 3가지

1. for ... in문

2. for ... of문

3. forEach 메서드

 

1. for ... in문

1) in 연산자

in 연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다.

2) for ... in문

for ... in문은 객체의 모든 프로퍼티를 순회하며 열거한다. 특정 값을 가진 키가 있는지 확인하려는 경우 for ... in문을 사용한다. 구문은 아래와 같다.

for(변수 in 객체){
	명령문
}

 

간단한 예제로 for ... in문을 알아보자.

 

const obj = {name: "홍길동", age: "20", address: "서울"}

for(const key in obj) {
    console.log(key + ':' + obj[key])
}

위의 예제를 풀이하자면 객체의 프로퍼티 개수만큼 순회하며 여기서 obj 객체에는 3개의 프로퍼티가 있고 객체를 3번 순회하면서 프로퍼티 키를 key라는 변수에 할당한 후 명령문을 실행한다.

 

output

name:홍길동
age:20
address:서울

for ... in문은 객체의 반복을 위한 거고 배열의 반복을 위해서 for ... in문보다는 일반적인 for문 혹은 for ... of문 또는 forEach메서드를 사용하기를 권장한다.

 

2. for ... of문

for ... of문은 반복가능한 객체를 순회하면서 이터러블의 요소를 변수에 할당한다. 구문은 아래와 같다.

for(변수 of 반복가능한 객체){
	명령문
}

간단한 예제로 for ... of문을 알아보자

const arr = [{name: "홍길동", age: "20"},{name: "김영희", age: "23"},{name: "이철수", age: "29"}]

for(const ele of arr){
    console.log(ele);
}

위의 예제를 풀이하자면 ele라는 변수에 arr 값이 할당된다. 

output

{name: '홍길동', age: '20'}
{name: '김영희', age: '23'}
{name: '이철수', age: '29'}

3. forEach()

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 순회하여 실행한다. forEach는 자신 내부 배열의 모든 요소를 순회하여 실행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. 사용법은 아래와 같다.

array.forEach((callback) => 명령문)


// callback 3가지
처리할 현재 요소, 처리할 현재 요소의 인덱스, forEach를 호출한 배열

 

 

각 요소에 대해 알아보자.

const arr = [{name: "홍길동", age: "20"},{name: "김영희", age: "23"},{name: "이철수", age: "29"}]

arr.forEach((item(처리할 현재 요소), index(처리할 현재 요소의 인덱스), array(forEach를 호출한 배열) => {
    console.log(item),
    console.log(index), 
    console.log(array)
})

{name: '홍길동', age: '20'} 	// console.log(item)
0				// console.log(index)
0: {name: '홍길동', age: '20'}	// console.log(array)
1: {name: '김영희', age: '23'}
2: {name: '이철수', age: '29'}
{name: '김영희', age: '23'} 	// console.log(item)
1				// console.log(index)
0: {name: '홍길동', age: '20'}	// console.log(array)
1: {name: '김영희', age: '23'}
2: {name: '이철수', age: '29'}
{name: '이철수', age: '29'} 	// console.log(item)
2				// console.log(index)
0: {name: '홍길동', age: '20'}	// console.log(array)
1: {name: '김영희', age: '23'}
2: {name: '이철수', age: '29'}

forEach의 경우 for문과 다르게 조건식을 설정해주지 않아도 자신 내부를 순회할 수 있다. 하지만 break, continue문을 사용할 수 없어 배열의 모든 요소를 순회가 끝날 때까지 중단할 수 없다. 중단이 필요한 경우에는 forEach의 사용은 올바르지 않다.