[JavaScript] 자바스크립트 반복문 for문의 종류(for, for in, for of, forEach)

📖 들어가며

이렇게 자바스크립트의 for문의 종류에 대한 글을 정리하는 이유는 현재 나중에 취업을 위한 코딩 테스트 알고리즘을 자바스크립트로 준비하면서 for문을 작성할 때가 많은데, 공부를 하면서 for문에 종류가 다양하게 있는 건 알았지만 실제로 자바스크립트를 공부하면서 제가 자주 사용한 for문은 기본적인 for문과 forEach문만 자주 사용하였고, 그 외에는 거의 한 번도 사용해 본 적이 없었다.

 

자바스크립트로 알고리즘 공부를 하면서 다양한 for문과 접촉 해보면서 각각의 상황에 따라 각 for문마다 장점이 있고, 성능의 차이도 있기 때문에 이번 기회에 확실하게 알면 좋을 것 같아서 간단하게 어떤 역할을 하는 정도인지에 대해서 정리한다.

💡 알아볼 것들

1. (전형적인) for
2. for in
3. for of
4. forEach

1. for

첫번째로 우리가 흔히 알고 있는 for문이다.

어떤 특정한 조건이 거짓(false)이 될 때까지 반복문을 수행하게 된다.

for문은 다음과 같다.

for ([초기문]; [조건문]; [증감문]) {수행할 것}

[초기문] 부분에서 초기화 구문인 초기문이 존재한다면 초기문이 실행된다.

이 표현은 보통 1이나 반복문 카운터로 초기 설정이 됩니다. 그러나 복잡한 구문으로 표현될 때도 있습니다. 또한 변수로 선언되기도 한다.

 

[조건문] 부분에서는 조건문은 조건을 검사한다.

만약 조건문이 참(true)이라면 반복문은 계속 실행되고, 거짓이라면 for 반복문은 종료하게 된다. 만약 그 조건문이 생략된다면, 그 조건문은 참으로 추정된다.

 

[증감문] 부분에서는 초기문에서 작성한 카운터가 for문이 반복될 때마다 증감하게 된다.

그리고 수행시킬 코드를 { } 대괄호를 작성해서 그 안에 작성하면 { } 대괄호 안에 작성한 코드들이 반복문을 통해 실행된다.

 

장점:

1. 가장 빠르다.

2. 모든 자료형에 대해 사용이 가능하다.

3. 반복문 건너뛰기(continue), 종료(break)가 가능하다.

4. 변수 활용이 가능하다.

 

예시:

for (let i = 0; i < 10; i++) {
	console.log(i);	
}
//출력 결과 0 1 2 3 4 5 6 7 8 9

자세한 링크:

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for</a ></span >

2. for...in

for in 문의 특징은 객체의 열거 속성을 통해 지정된 변수를 반복한다.

즉, 객체에 접근해서 객체의 값들을 for in 문으로 통해 활용할 수 있다.

각각의 고유한 속성에 대해서 자바스크립트는 지정된 수행문을 실행한다.

 

장점:

1. 간결하게 작성할 수 있다.

2. 객체에 쉽게 접근하여 반복문을 수행할 수 있다.

3. 반</span >복문 건너뛰기(continue), 종료(break)가 가능하다.

 

하지만 객체에 접근해야 하는 만큼 for 반복문들 중 성능 측면에서 제일 속도가 느리고 좋지 못하다.

그래서 나도 웬만하면 for..in문은 특정한 상황이 아니면 피하게 되는 것 같다.

for ( 변수 in 객체 ) {수행할 것들}

위와 같이 for in문에 '객체'를 넣어주면 반복문을 돌면서 작성한 '변수'에는 객체의 값이 하나하나 뽑혀서 '변수'에 객체의 key값이 담아지면서 객체 안에 들어있는 데이터만큼 반복문을 수행하게 된다.</span >

 

예시:

const obj = {
    a: 1,
    b: 2,
    c: 3
};

for (let i in obj) {
	console.log(i, obj[i]); 
}
//출력결과 a 1, b 2, c 3

자세한 링크:

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in</a ></span >

for...in - JavaScript | MDN

3. for...of

for of 반복문은 ES6에 추가된 새로운 반복문이다.

반복 가능한 객체(배열, 문자열, Map, Set, 등 포함)를 통해 반복문을 만든다.

 

장점: 

1. 반복 가능한 객체에 대해 간결하게 반복문 작성 가능하다.

2. 성능면에서도 준수하다.

3. 반복문 건너뛰기(continue), 종료(break)가 가능하다.

for (변수 of 반복 가능한 객체) {수행할 것}

예를 들어 '반복 가능한 객체'에 문자열을 입력해도 문자열을 하나하나 꺼내서 반복문을 수행할 수 있다.

 

예시:

const str = 'hello';

for (let s of str) {
	console.log(s);
}
//출력결과: h, e, l, l, o

위와 같이 간결하게 반복 가능한 객체를 넣어서 반복문에 사용할 수 있기 때문에 이번에 자바스크립트로 코딩 테스트 공부를 하면서 문자열 비교 같은 문제가 있으면 for of문을 자주 활용했다.</span >

 

자세한 링크:

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of</a ></span >

4. forEach

ES5문법인 forEach() 메서드다. 

주어진 함수를 배열 요소 각각에 대해 실행하게 된다.

 

장점:

1. 코드가 한눈에 보기 쉽고 간결하다.

2. 성능 측면에서도 매우 준수하다.

3. 여러 기본 매개변수를 통해 활용도가 높다.

 

다른 for 반복문보다 작성하기도 쉽고 코드가 한눈에 들어와서 편리하기 때문에 forEach문은 특정한 상황이 아닌 이상 웬만하면 제가 정말 자주 애용하는 메서드입니다.

하지만 건너뛰기(continue), 종료(break)가 불가능하다.

반복문을 수행하는 아주 간단한 예시다.

 

예시:

const array = [1,2,3,4,5]

array.forEach(item => console.log(item));
//출력결과: 1, 2, 3, 4, 5

딱히 다른 설명이 없어도 바로 눈에 들어오지 않나요?

 

자세한 내용:

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach</a ></span >

📕 마무리

마무리를 지으면서, 자바스크립트 반복문에 대한 벤치마킹 테스트 사이트이다.

jsben.ch/giRjy

JSBEN.CH Performance Benchmarking Playground for JavaScript

각 for문에 대해서 세부적으로 정리하지 않았지만 대략 어떤 역할을 하고 어떤 상황에 사용을 하면 좋을 지에 대해서 간략하게 정리해 보았다.

 

이번에 자바스크립트로 코딩 테스트 공부를 하면서 평소에 접하지 않았던 for문들을 각각 사용해 보면서 각 for문들이 어떤 역할들을 하는지에 대해서는 기본적으로 알고 있어야겠구나 생각이 들었다.

 

그리고 항상 자바스크립트의 내용 검색 관련해서는 MDN 공식 문서를 제일 먼저 참고하는 게 도움이 되는 것 같다.