이진욱의코딩

배열과 반복문의 기초 본문

JS

배열과 반복문의 기초

Crucifi 2019. 7. 26. 15:48

배열(array)란 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기 때문에 데이타 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자라고 생각하면 된다.

 

배열은 대괄호로 시작해 대괄호로 끝이난다. 예를 들어 ["banana", "tomato"]로 둘 수 있으며 값과 값사이는 콤마(,)로 구분이 가능합니다. 

 

var coworkers = ["engoing", "leezche"]

coworkers라는 변수에 배열이라는 새로운 데이터 타입이 담긴 것입니다.

 

이제는 배열에 들어있는 항목을 가져오는 방법에 대해 설명드릴게요.

 

 <h2>get</h2>
        <script>
            document.write(coworkers[0]);
            document.write(coworkers[1]);
        </script>

첫 번째 자리에 있는 값은 0번째라는 뜻입니다. 이를 인덱스(index)라고 합니다. 인덱스0번은 engoing이 되고

인덱스1은 leezche라는 데이터를 가리킨다고 할 수 있습니다.

 

전체적인 코드와 결과를 살펴보면서 나머지를 설명드릴게요.

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>Array</title>
    </head>
    <body>
        <h1>Array</h1>
        <h2>Syntax</h2>
        <script>
            var coworkers = ["egoing", "leezche"];
        </script>

        <h2>get</h2>
        <script>
            document.write(coworkers[0]);
            document.write(coworkers[1]);
        </script>


        <h2>add</h2>
        <script>
            coworkers.push('duru');
            coworkers.push('ddududdudu');
        </script>

        <h2>count</h2>
        <script>
            document.write(coworkers.length);
        </script>
    </body>

</html>

28번째 줄을 살펴보면 이 부분은 배열에 length를 지정하면 배열안에 몇개의 값이 있는지 알려줍니다.

 

데이터를 추가시킬때는 push()를 통해 배열에 데이터가 추가되는 모습을 볼 수 있습니다.

 

이 코드의 실행시키면서 결과를 보시면 훨씬 이해하시기 편합니다.

 

차례대로 코드를 입력시켰을 때의 결과입니다.

 

이렇게 배열에 대해 살펴봤습니다. 배열은 그 자체로는 어디에 쓰는지 알기가 어렵습니다. 배열과 콤비를 이뤄서 같이 쓰이는 반복문에 대해서도 이번시간에 한 번 살펴봅시다.

 

 

 

반복문(Loop)

 

우선 예제를 먼저 보도록 합니다.

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>Loop</title>

    </head>
    <body>
    	<h1>Loop</h1>
        <ul>
        	<script>
            	document.write('<li>1</li>');
                document.write('<li>2</li>');
                document.write('<li>3</li>');
                document.write('<li>4</li>');
             </script>
          </ul>
       </body>
 </html>

결과를 보면

 

이런식으로나옵니당.

위에서부터 아래로 순서대로 코드를 실행하는 것이 프로그램의 기본적인 실행 순서 입니다.

 

여기서 2,3번째 코드를 3번 반복해 보겠습니다.

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>Loop</title>

    </head>
    <body>
        <h1>loop</h1>
        <ul>
            <script>
                document.write('<li>1</li>');
                var i = 0;
                while(i < 3){
                    document.write('<li>2</li>');
                    document.write('<li>3</li>');
                    i = i + 1;
                }
                document.write('<li>4</li>');    
            </script>
        </ul>
    </body>
</html>

while이라는 것이 반복문의 키워드입니다. while 괄호 안에는 불리언 데이터 타입이 들어옵니다. while괄호안의 내용이  true인 동안에는 while문안의 코드가 반복적으로 실행됩니다. false가 될 때 까지..

 

결과를 한 번 볼까요?

 

2,3이 반복되는 모양

반복문을 사용하면 훨씬 편하다는 것을 볼 수 있습니다.

'JS' 카테고리의 다른 글

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