이진욱의코딩

배열과 반복문 본문

JS

배열과 반복문

Crucifi 2019. 7. 27. 14:41

저번 시간에 했던 내용의 연장선으로 설명해 드리겠습니다.

<html>
    <head>
        <meta charset="UTF-8">
        <title>Loop & array</title>
    </head>
    <body>
        <h1>Loop & array</h1>
        <h2>js</h2>
        <ul>
            <li>jongho</li>
            <li>jinwook</li>
            <li>undong</li>
            <li>seyeon</li>
            <li>Sanggeol</li>
        </ul>
    </body>
</html>

저희동아리사람입니당.

만약 <li> 태그 대신 목록이 아주 복잡한 태그입니다. 이처럼 서로 연관된 대이터들을 담는 방법이 배열입니다.

그리고 그 배열에 담긴 데이터를 순차적으로 꺼내서 <li>라는 태그를 만드는 역할을 반복문이 할 수 있습니다.

 

 <script>
            var coworkers = ['jongho','jinwook','undong','seyeon','Sanggeol']
        </script>
        <h2>co workers</h2>
        <ul>
            <script>
                var i = 0;
                while(i < 4){
                    document.write('<li></li>');
                    i = i + 1;
                }    
 </script>

 

코드 실행을 4번 반복하는 코드를 작성했습니다. 0부터 시작해서 while문의 중괄호 안의 코드가 실행될 때마다 i값을 1씩 증가하게 합니다.

 

목록이 4개 나오는 결과

이번에는 co workers라는 변수에 할당된 배열에서 반복문이 실행될 때마다 원소 값을 하나하나 가져와 <li> 태그 안에 배치하기만 하면 됩니다. i라는 변수를 사용해서 i는 0부터 1씩 증가해서 3까지 증가합니다. 

 

<li> 안에서는 coworkers배열에서 데이터를 가져와서 넣으면 되는데 배열의 데이터를 가져올 때는 대괄호 안에 가져오고 싶은 데이터의 인덱스 값을 넣으면 되고, 이때 i값이 인덱스와 일치한다는 특성을 활용할 수 있습니다.

 

결과를 한 번 보시죠

 

배열에 데이터를 가져와서 출력

coworkers의 배열에 담긴 원소의 개수가 조건에 올 수 있다면 직접 개수를 입력하지 않더라도 탄력적으로 로직이 변활 것입니다. 5 대신 coworkers lenngth를 넣고 실행해 보겠습니다.

 

 while(i < coworkers.length){

만약 링크를 추가하고 싶을 때 <li>태그가 1억 개면 1억 개 전부를 바꿔야 하지만 코드만 변경하면 링크가 완성될 수 있도로 해보겠습니다.

 <script>
                var i = 0;
                while(i < coworkers.length){
                    document.write('<li><a href = "http://"a.com/' + coworkers[i] + '">"' +  coworkers[i] +'</a></li>');
                    i = i + 1;
                }    
            </script>

<li>태그에 링크 추가

배열이라는 것은 순서대로 연관된 데이터를 잘 정리 정돈하는 것이고, 반복문은 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법이기 때문에 배열과 반복문이 콤비라고 할 수 있습니다.

'JS' 카테고리의 다른 글

BOM에 대한 A to Z  (0) 2019.08.27
DOM, BOM에 대해 알아봅시다.  (0) 2019.08.26
배열과 반복문의 기초  (0) 2019.07.26
중복의 제거를 위한 리펙터링  (0) 2019.07.24
조건문의 활용  (0) 2019.07.24
'JS' Related Articles more