본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 반복문

for in 반복문

for in 반복문은 for문 쉽게 사용하는 방법을 제공합니다.


for in 반복문

for in 반복문은 for문과 비슷하게 for 키워드를 사용합니다. 반복과 내부 요소에 접근하는 방식에 차이가 있으며 in 키워드를 기준으로 변수와 반복할 대상을 설정합니다.

for(변수 in 반복할 대상){
    //실행 코드
}

Sample1

for in 반복문 이용한 배열 예제입니다.

결과
100200300400500
100200300400500
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //배열과 반복문
        let arr1 = new Array(100,200,300,400,500);

        //for문
        for(var i=0; i<arr1.length; i++){
            document.write(arr1[i]);
        }
        document.write("<br><br>");

        //for in문
        for(var i in arr1){
            document.write(arr1[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>      

Sample2

for in 반복문 이용한 객체 예제입니다.

결과
1단계
2단계
3단계

HTML1단계CSS2단계JavaScript3단계

코딩 공부 순서는 다음과 같습니다.
HTML은 1단계 입니다.
CSS은 2단계 입니다.
JavaScript은 3단계 입니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트(Javasript)</title>
</head>
<body>
    
    <script>
        //객체와 반복문
        var book = {HTML: "1단계", CSS: "2단계", JavaScript: "3단계"}

        document.write(book.HTML,"<br>");
        document.write(book.CSS,"<br>");
        document.write(book.JavaScript,"<br><br>");

        //사용 불가
        for(var i=0; i<book.length; i++) {
            document.write(i,"<br>");
            document.write(book[i],"<br>");
        }   

        //for in 반복문
        for(var i in book){
            document.write(i);
            document.write(book[i]);
        }
        document.write("<br><br>");

        //for in 반복문 출력
        document.write("코딩 공부 순서는 다음과 같습니다.<br>");
        for(var i in book){
            document.write(i + "은 " + book[i]+ " 입니다.","<br>");
        }
    </script>
</body>
</html>     

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기