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

JavaScript 에서 빼먹을 수 없는 for 관련 반복문들의 소개 및 차이점을 소개합니다.

 

 

 

목차

• for 
• for ... in 
• for ... of 
• forEach

 

 

1. for 문

일반적인 형태의 반복문 입니다. 구조는 초기식, 조건식, 증감식을 포함하고 이에 따라 반복할 코드 블럭으로 구성되어 있습니다. 

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

 

 

 

 

 

 

 

 

주의할 점은 i의 값은 반복문의 증감식에 의해 변하게 되니 재할당이 가능한 let 선언자로 선언을 해야됩니다. 또한 증감식은 for문 블록 내 코드내용이 실행된 이후 그 다음 실행됩니다. 즉, for문의 동작원리는, 반복문의 초기식을 가지고 코드내용이 실행되면, 이후 증감식이 실행되고, 반복문 내 변수(여기서는 i)가 재할당되고 그 재할당된 값을 통해 조건식의 참거짓 유무를 매 회마다 판별하며 반복문이 진행됩니다. 

 

for문을 사용함에 있어 숙지해야될 문구 중 break와 continue가 있습니다.

 

(1) break

break는 for문 반복 중 특정 조건이 성립되어 break를 만나게 되면 for문을 빠져나오게 됩니다.

 // break
      for (let i = 0; i < 10; i++) {
        if (i === 5) {
          break; // break를 만나면 for문 종료
        }
        console.log(i);
      }

 

 

 

 

 

 

 

(2) continue

continue는 for문 반복 중 특정한 조건이 성립되어 continue 구문을 만나게되면, 아래 실행을 중단하고 바로 다음 반복 구문을 수행합니다.

 

      // continue
      for (let i = 0; i < 10; i++) {
        if (i === 5) {
          continue; // continue를 만나면 증감식으로 바로 이동하여 다음 반복진행
        }
        console.log(i);
      }

(아래 결과를 보면, i == 5일때, continue를 만났기에 console.log(5)가 실행되지 않음을 볼 수 있습니다.)

 

 

 

 

 

 

 

 

 

 

 

 

2. for ... in문

객체의 속성을 반복하는 구문입니다. 열거형(Enumerable)과 함께 사용됩니다. for in 구문은 객체의 key 또는 index에 접근할 수 있지만, value에 접근하는 직접적인 방법은 갖고 있지 않습니다. 즉, Array객체를 사용할 경우 인덱스를 번호를 반환하며 object객체의 경우 키값을 반환합니다.

 

 //for in 구문 - Array 객체 
 let brands = ['Apple', 'Google', 'Amazon', 'MicroSoft', 'Meta'];
 for (const index in brands) {
        console.log(index);
      }

 

 

 

 

 

 

// for in구문 - Object 객체
let person = {
        name: '홍길동',
        age: 22,
        tel: '010-0000-0000',
        city: 'seoul',
      };

      // object에서 조건문 안의 in은 키값을 돌려준다
      for(const key in person){
        console.log(key, person[key]);
      }

 

 

 

3. for ...of문

반복가능한(iterable) 객체에 가능한 구문입니다. iterable 객체에는 Array, Set, Map, String(문자열), NodeList 등이 있으며, iterable하지 않은 객체에 for of구문을 사용할 경우 iterable하지않다며 TypeError에러문구가 나타납니다.

 

Array객체에 사용 시 for in문에서는 인덱스를 반환했던 것과 달리 for of에서는 요소 값을 반환합니다.

  let brands = ['Apple', 'Google', 'Amazon', 'MicroSoft', 'Meta'];
      for (const brand of brands) {
        console.log(brand);
      }

 

 

 

 

 

 

 

4. forEach 문

forEach문은 배열객체의 내장함수(메소드)로서 최대 3개의 매개변수를 가지는 함수를 파라미터(일명, 콜백함수)로 가질 수 있습니다. 참고로, ES6부터는 Map, Set 등에서도 사용할 수 있는 메소드입니다. 콜백함수의 각 파라미터는 순서대로 (요소의 값, 인덱스, 원본 배열)을 의미합니다.

    // forEach - Array Object
    let brands = ['Apple', 'Google', 'Amazon', 'MicroSoft', 'Meta'];
        // forEach 메소드의 파라미터로 콜백함수가 들어옴
        brands.forEach(function(item, index,array){
            console.log(item,index, array);
        })

 

 

 

 

 

 

 

 

 

 

 

 

 

 

결론

 

for반복문에 종류 및 사용법에 대해 알아 보았습니다.

정리를 하자면, 다른 언어에서도 볼 수 있는 일반적인 for문과 Array객체 등의 메소드로 쓰일 수 있는 forEach가 있고, 여기에 for in과 for of 구문이 있는데 혼동이 될 수 있으니 정리를 해보겠습니다.

 

For in 반복문

• Enumerable자료형에 적용할 수 있다.(Array타입, Object타입 둘 다 사용가능 합니다.)
• 인덱스 및 키값을 반환한다.(직접적으로 value를 반환하지 않습니다.)
• Object 객체에 유용(Enumerable 이지만, iterable하지 않음)

 

For of 반복문

• Iterable자료형에 적용할 수 있다. (그러므로 Object 타입은 사용할 수 없습니다)
• 직접적으로 요소 값을 반환한다. 
• Array 객체에 유용(Iterable)

 

Object는 For in문을, Array는 For of문 또는 ForEach 반복문을 사용하는게 편의성이 좋을 것 같습니다.