너무 많은 'for'문 정리

'for', 'for in', 'forEach', for of 를 내 것으로 만들어 보자.

1. for

자바스크립트 공부했다면 바로 아는 것, 그래도 한번 정리 해 보았다.

let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);
// expected output: "012345678"

-> for ([카운트변수선언]; [조건]; [조건이 참일 때 카운터 변수 변화]) {
실행 할 반복문
}

for문을 사용한 가장 작은 값 찾기

 function findSmallestElement(arr){
     if(arr.length === 0) {
       return 0;
     } else { 
       let min = arr[0];
       for (i = 0 ; i < arr.length; i++) {
         if (arr[i] < min ) {
           min = arr[i];
         } 
       } return min;  
     }
 }

findSmallestElement([2000000, 30, 5, 7, 200, 1, 0, 9])

2. for in

for in 반복문은 객체의 key에 접근하여 value를 뽑아 올때 주로 사용합니다.

--> for (key in obj) (key 값이 순환!!)

하지만, 순서가 있는 배열에도 접근이 가능하다. (인덱스 번호로 접근, 인덱스 번호가 반복!!)

for-in 문을 사용한 가장 작은 값 찾기

function findSmallestElement(arr){
    if(arr.length === 0) {
      return 0;
    } else { 
      let min = arr[0];
      for (i in arr) {
      	console.log(i, arr[i])
        if (arr[i] < min ) {
          min = arr[i];
        } 
      } return min;  
    }
}
배열의 순환이 잘 되는 것을 확인할 수 있다.
findSmallestElement([2000000, 30, 5, 7, 200, 1, 0, 9])

3. forEach

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. -> mdn

배열에 주로 사용한다.
배열의 첫번쨰부터 마지막까지 반복하면서 item을 꺼낼수 있다.

forEach 문을 사용한 가장 작은 값 찾기

function findSmallestElement(arr){
    if(arr.length === 0) {
      return 0;
    } else { 
      let min = arr[0];
      arr.forEach((element) => {
        if(element < min) {
            min = element
        } 
    })
      return min;  
    }
}

findSmallestElement([2000000, 30, 5, 7, 200, 1, 0, 9])

for-in 과 차이점은 for-in은 인덱스가 아니라 배열의 값에 바로 접근한다는 것이다.

4. for of

배열을 순환할때 사용한다.
객체 순환은 for-in 배열 순환은 for-of 이렇게만 사용해도 헷갈리지 않을 것이다.

for-of 문을 사용한 가장 작은 값 찾기

     function findSmallestElement(arr){
         if(arr.length === 0) {
           return 0;
         } else { 
           let min = arr[0];
           for (val of arr) {
             if ( val < min ) {
               min = val;
             } 
           } return min;  
         }
     }

위의 코드를 보면 값에 바로 접근한다는 것을 알 수 있다.

마무리

위에 4가지의 방법으로 가장 작은 값 찾기를 해 보면서, 각각의 방법의 특징을 살펴 보았다.

객체를 순환하고 싶을 때, 또는 인덱스 번호가 중요한 역할을 할 거 같을 때(필요할 때),for-in을 사용하고,
나머지는 일단 입맛대로 쓰고, 안되면 배제하는 방법으로 사용하고, 나중에 깊게 파 보겠다.