[JavaScript] - for, while 반복문

js 에는 파이썬과는 다르게 다양한 반복문이 존재한다.

for, for in, for of, forEach(array), while, do while

이렇게 많은 for문들을 어떻게 언제 쓰이면 좋은지에 대해서 서술해보려고 한다.

 

1. for

for ([초기문], [조건문], [증감문]) {
    문장
}

// 사용예시
for (let i = 0; i < 3; i++) {
    console.log(i);
}

// 문장이 많지 않다면 이렇게도 가능 
// [i++, j++] 보다는 i++, j++ 되긴 하지만 권장 X
for ( let i = 0, j= 0; i <= 2; [i++, j++] ) console.log(i,j);

 

추가적으로 알면 좋은 것

1. 초기문, 조건문, 증감문 모두 생략 가능하다.

2. 조건문이 거짓이 될 때까지 반복한다.

3. [] 을 사용할 수 있지만 조건문에서 사용한다면 무한 루프가 돌 수 있다. && 를 활용해 표현하는 것이 좋다.

(배열은 항상 truthy 하기 때문에 라는데 이건 나중에 정리)

 

2. for in

열거 가능한 객체에서 사용가능한 반복문이다.

배열에서도 사용되지만 권장하지 않는다.

속도면(뒤에 참고 서술)에서도 좋지않고, 순서 보장도 되지 않기 때문이다.

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

for (const key in obj) {
    console.log(key, obj[key]) // a 1 b 2 c 3
}

 

3. for of

반복 가능한 객체에 대해서 사용가능한 반복문

반복 가능한 객체에는 Array, Map, Set, String, TypedArray, arguments 객체를 말합니다.

// array
const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
    console.log(value); // 1, 2, 3, 4, 5
}

// map
const map = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3]
]);

for (const [key, value] of map) {
    console.log(key, value); // 'a' 1, 'b' 2, 'c' 3
}

// set
const set = new Set([1, 2, 3, 4, 5]);

for (const value of set) {
    console.log(value); // 1, 2, 3, 4, 5
}

// String
const str = "hello";

for (const char of str) {
    console.log(char); // 'h', 'e', 'l', 'l', 'o'
}

// typedarray
const typedArray = new Uint8Array([10, 20, 30, 40, 50]);

for (const value of typedArray) {
    console.log(value); // 10, 20, 30, 40, 50
}

// arguments
function example() {
    for (const value of arguments) {
        console.log(value); // 함수에 전달된 인자들이 출력됨
    }
}

example(1, 2, 3, 4); // 1, 2, 3, 4

 

인덱스를 통해 접근할 필요가 없다면 사용해 보는 것도 좋을듯!

참고 ! for, for in, for of 속도 비교

const arr = Array(1000000).fill(0);

// for 
console.time('for');
for (let i = 0; i < arr.length; i++) {
    const value = arr[i];
}
console.timeEnd('for');  // 1.74ms

// for...in
console.time('for...in');
for (const index in arr) {
    const value = arr[index];
}
console.timeEnd('for...in'); // 124.696ms

// for...of
console.time("for...of");
for (const value of arr) {
	const value1 = value;
}
console.timeEnd("for...of"); // 57.849ms

 

4. forEach

반복가능한 객체 array, set, map 를 순회할 때 사용할 수 있는 메소드 입니다.

각 요소에 대해 콜백함수를 실행해서 적용시킵니다.

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

arr.forEach((value, index, array) => {
    console.log(value, index);
});

 

알아둬야할 것

1. 항상 모든 요소를 탐색하고 중간에 중단할 수 있는 수단이 없다.

2. 비동기 실행에 적합하지 않다.

// 비동기 실행
const arr = [1, 2, 3];

arr.forEach(async (value) => {
    console.log('Start', value);
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('End', value);
});

/* 
Start 1
Start 2
Start 3
End 1
End 2
End 3
*/

async function run() {
    for (const value of arr) {
        console.log('Start', value);
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('End', value);
    }
}
run();

/*
Start 1
End 1
Start 2
End 2
Start 3
End 3
*/

 

 

5. do ... while 문

   do
      문장
    while (조건문);

 

조건문을 거치기 전에 do 문장을 한번 실행한 후, 조건문이 참일 때까지 문장을 반복합니다.

let i = 1;
do {
    i += 1;
    console.log(i);
  } while (i <1);
  
  // 2
  
  // 조건문에 거짓이지만 일단 do로 한번은 실행함.

 

6. while 문

do ... while 문과 다르게 조건문이 참일 경우에 실행되는 문법입니다.

let i = 0;
while (i < 3) {
	console.log(i)
	i++
{

꼭 무한 루프 돌지 않게 break 를 잘 걸도록 하자!

 

이렇게 JavaScript 내에서 사용할 수 있는 반복문에 대해서 알아봤는데,

성능면에서도 알아볼 수 있었고, 언제 어디서 어떻게 사용해야하는 지에 대한 방향성이 잡히게 된 것 같다.!

 

참고

https://buly.kr/44wkIym : <JS> for, for of, for in, forEach, while 반복문 정리

https://buly.kr/GZwXwth  : 루프와 반복 - Js 공식문서

https://buly.kr/4mbmEEG  : [2022.04.10] 자바스크립트 반복문 (for, for in, for of, forEach(), while문)