Web

[ JS ] 배열 반복문

96__혀누 2024. 4. 18. 01:54

for in 문

변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복

    const arr = [10, 20, 30];
    const user = {userid:'apple', name:'김사과', age:20};

    예)
    for(let i in arr){
        ... // i: 0, 1, 2 (i에는 인덱스 번호가 저장)
    }

    for(let i in user){
        ... // i: userid, name, age (i에는 키가 저장)
    }

for of 문

변수에 배열의 value 저장되며 반복

    예)
    for(let v of arr) {
        ... // v: 10, 20, 30
    }

forEach 문

배열에서만 사용 가능하며, 요소의 개수만큼 반복

    변수명.forEach(function(변수1, 변수2, 변수3){
        ...
    });

    변수1 : value가 저장
    변수2 : index가 저장
    변수3 : 모든 배열요소 전체가 저장
    * 변수2, 변수3은 생략가능

    ex)
    const arr = [10, 20, 30];

    arr.forEach(function(v, i, a){
        console.log(v);  // 10, 20, 30
        console.log(i);  // 0, 1, 2
        console.log(a);  // [10, 20, 30], [10, 20, 30], [10, 20, 30]
    })

 

 

# 예제
<body>
    <h2>배열 3</h2>
    <script>
        const userArr = [1, 'apple', '김사과', 20, '서울 서초구'];
        const userObj = {userid:'apple', name:'김사과', age:20};

        // for in 배열
        for(let i in userArr){
            console.log(`i:${i}, userArr[${i}]: ${userArr[i]}`)
        }

        console.log('-----------------')

        // for in 객체
        for(let i in userObj){
            console.log(`i:${i}, userObj[${i}]: ${userObj[i]}`)
        }

        console.log('-----------------')

        // for of 배열
        for(let v of userArr){
            console.log(`v:${v}`)
        }

        console.log('-----------------')

        // // for of 배열
        // Uncaught TypeError: userObj is not iterable
        // for(let v of userObj){
        //     console.log(`v:${v}`)
        // }

        console.log('-----------------')

        // forEach
        userArr.forEach(function(v, i, arr){
            console.log(`v:${v}, i:${i}, arr:${arr}`)
        })
    </script>
</body>
</html>

출력결과