[JS] for와 관련된 문법

[for와 관련된 문법]

 

1. for

2. for...in

3. for...of

4. forEach

 

[for 각각의 정보]

 

문법	설명	장점	단점
for	초기화, 조건검사, 증감식으로 구성된 기본 반목문	- 높은 유연성 및 제어가능 - 조건에 따라 루프를 중단(break)하거나 건너뛸 수 있음(continue)	- 코드가 길어질 수 있음 - 가독성이 떨어질 수 있음
for...in	객체의 열거 간으한 속성(Key)을 반복	- 객체의 속성을 순회하기에 유용 - 간결한 문법	- 배열 순회에 적합하지 않음 - 객체의 프로토타입 체인에 있는 속성까지 순회할 수 있음
for...of	이터러블 객체(Array, Map, Set, String 등)을 순회	- 이터러블 객체 순회에 적합 - 간결한 문법 - break, continue, return 사용가능	- 객체의 속성을 순회할 수 없음 - 일반 객체에 사용할 수 없음
forEach	배열의 각 요소에 대해 제공된 함수를 한번씩 실행	- 배열 순회에 매우 간결하고 직관적 - 코드 가독성이 좋음 - thisArg를 전달하여 this 값 설정 가능	- 루프를 중단하거나 건너뛸 수 없음 - 비동기 작업 처리에 적합하지 않음 - 모든 배열 요소에 대해 반드시 함수가 호출됨

 

[for 각각의 정보에 따른 코드]

 

1. for

 

[장점]

let array = [1, 2, 3, 4, 5];

// 기본적인 for 문 사용
for (let i = 0; i < array.length; i++) {
    console.log(array[i]); // 1, 2, 3, 4, 5
}

// 조건에 따라 루프 중단
for (let i = 0; i < array.length; i++) {
    if (array[i] === 3) {
        break; // 3에서 루프 중단
    }
    console.log(array[i]); // 1, 2
}

// 조건에 따라 루프 건너뛰기
for (let i = 0; i < array.length; i++) {
    if (array[i] === 3) {
        continue; // 3을 건너뜀
    }
    console.log(array[i]); // 1, 2, 4, 5
}

 

[단점]

let array = [1, 2, 3, 4, 5];
let sum = 0;

// 복잡한 논리로 인해 코드가 길어짐
for (let i = 0; i < array.length; i++) {
    if (array[i] % 2 === 0) {
        sum += array[i];
    }
}
console.log(sum); // 짝수의 합: 6

 

 

2. for...in

 

[장점]

let object = {a: 1, b: 2, c: 3};

// 객체의 속성을 순회
for (let key in object) {
    if (object.hasOwnProperty(key)) {
        console.log(key, object[key]); // a 1, b 2, c 3
    }
}

 

[단점]

let array = [1, 2, 3];
Array.prototype.customMethod = function() {};

for (let key in array) {
    console.log(key); // 0, 1, 2, customMethod (예상치 못한 속성 포함)
}

 

 

3. for...of

 

[장점]

let array = [1, 2, 3, 4, 5];

// 배열의 각 요소를 순회
for (let value of array) {
    console.log(value); // 1, 2, 3, 4, 5
}

// 조건에 따라 루프 중단
for (let value of array) {
    if (value === 3) {
        break; // 3에서 루프 중단
    }
    console.log(value); // 1, 2
}

// 조건에 따라 루프 건너뛰기
for (let value of array) {
    if (value === 3) {
        continue; // 3을 건너뜀
    }
    console.log(value); // 1, 2, 4, 5
}

 

[단점]

let object = {a: 1, b: 2, c: 3};

// for...of는 객체에 사용할 수 없음
try {
    for (let value of object) {
        console.log(value);
    }
} catch (e) {
    console.log(e.message); // object is not iterable
}

 

 

4. forEach

 

[장점]

let array = [1, 2, 3, 4, 5];

// 배열의 각 요소를 순회
array.forEach(function(value) {
    console.log(value); // 1, 2, 3, 4, 5
});

// thisArg 전달
let obj = {
    value: 10,
    addValue: function(element) {
        console.log(this.value + element);
    }
};
array.forEach(function(value) {
    this.addValue(value);
}, obj); // 11, 12, 13, 14, 15

 

[단점]

let array = [1, 2, 3, 4, 5];

// 루프 중단 불가
array.forEach(function(value) {
    if (value === 3) {
        return; // break 대신 return을 사용하지만, 루프 중단되지 않음
    }
    console.log(value); // 1, 2, 4, 5 (3 이후의 요소도 출력됨)
});