[JavaScript] 반복문(loop) 정리 for / for in / for of / foreach

 

JavaScript의 반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문입니다. 가장 전형적인 for문을 시작으로 다양한 종류의 반복문들이 있습니다. 각 반복문마다 장점이 있고, 성능 또한 차이가 있기 때문에 어떠한 경우에 어떤 반복문을 사용해야 가장 효율적인 코드를 짤 수 있을 거 같아서 이번 포스팅에서 각 반복문을 정리해보고자 합니다.

 

---

1. for 문

for([초기문]; [조건문]; [증감문]) { 
    // 실행할 코드
}

 

for 문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 [조건문]의 조건이 거짓(false)이 될 때까지 반복문을 수행하게 됩니다.

 

[초기문]
반복문 카운터로 초기 설정이 됩니다.

[조건문] 
부분에서는 조건문은 조건을 검사합니다.
만약 조건문이 참(true)이라면 반복문은 계속 실행되고, 거짓이라면 for반복문은 종료하게 됩니다.

[증감문] 
부분에서는 초기문에서 작성한 카운터가 for문이 반복될 때마다 증가시킬지, 감소시킬지 정해줍니다.

 

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

let alphabet = ["A", "B", "C", "D", "E", "F", "G"];

for(int i=0; i<alphabet.length; i++) {
  console.log(alphabet[i]); // 결과 : A B C D E F G
}

 

❗  const를 쓰면 값 변경이 불가하여 에러가 발생하니 주의해야 합니다.

 

2. for in 문

for (variable in object) {
    // 실행할 코드
}

 

• variable: 각 프로퍼티 이름을 저장할 변수입니다.
• object: 순회할 객체입니다.
  
  

for...in 문은 자바스크립트에서 객체의 프로퍼티를 순회하는 반복문입니다. 즉, 객체에 접근해서 객체의 값들 접근하고 조작해야하는 작업에서 더욱 간단하게 for in 문으로 통해 활용할 수 있습니다. 

const person = {
    name: "Park",
    age: 26,
    hobby: "Soccor"
};

for (let key in person) {
    console.log(key + ": " + person[key]);  
}

// 프로퍼티(key) 결과 : name: Park age: 26 hobby: Soccor

 

❗ 객체에 접근해야 하는 만큼 for 반복문들 중 성능 측면에서 제일 속도가 느립니다.

const obj = {
    enumerableProp: "I will be enumerated",
};

Object.defineProperty(obj, "nonEnumerableProp", {
    value: "I will not be enumerated",
    enumerable: false
});

for (let key in obj) {
    console.log(key); // enumerableProp만 출력
}

❗ 해당 객체가 상속받는 프로토타입 체인상의 모든 프로퍼티 키를 열거합니다. (단, [[Enumerable]] 값이 false인 프로퍼티는 제외)

 

❗ 프로퍼티 순서는 보장되지 않습니다. 객체의 프로퍼티 순서가 중요한 경우라면 다른 방법을 고려해야 합니다.

ES6부터는 Map과 Set 등 순서가 보장되는 데이터 구조를 사용하는 것이 더욱 안전합니다. 배열(객체) 일 경우에는 forEach() 함수를 사용하시기 바랍니다.

 

3. foreach 문

배열.forEach(function(currentValue[, index[, array]]) {
    // 실행할 코드
}[, thisArg]);

• CurrentValue (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach 메서드를 호출한 배열

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

numbers.forEach(function(number) {
    console.log(number); // 결과: 1 2 3 4 5
});

 

forEach문은 배열을 순회해서 처리하는 데 사용되는 메서드이며, 반복문을 통해 배열의 요소를 접근하지 않고도, 간편하게 배열 요소들을 처리할 수 있습니다.

foreach함수 자체의 리턴 값은 항상 undefined입니다. 또한 새로운 배열을 생성하지 않습니다. 

 

 

위의 코드는 forEach함수를 사용했던 [프로그래머스] 홀수 vs 짝수 (JavaScript) 포스팅의 코드 입니다. 위의 코드 처럼  배열의 각 요소를 사용하거나 어떠한 작업을 수행하고자 할때 주로 사용됩니다.

 

4. for..of 문

 

for (variable of iterable) {
    // 반복할 코드
}

 

for...of 문은 자바스크립트에서 반복 가능한 이터러블 객체(배열, 문자열, Map, Set, NodeList  등)를 통해 반복문 객체를 순회하는 반복문입니다. 

 

const str = 'hello';

for (let s of str) {
	console.log(s); 
}

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

for (const item of iterable) {
    console.log(item); //결과: 1 2 3 4 5
}

 

 

 

---

 

Reference

• Mdn web docs
• 모던 JavaScript
• Coding EveryBody