# 배열과 반복문

### 1. 배열과 반복문의 기본

### 예시)

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj3zU5_BeIeIleVZOvk%2F-Mj3zYXOKWFiPxbGjsZz%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%20034.jpg?alt=media\&token=e903278e-e323-4a89-a719-1b7ab3453370)

{% tabs %}
{% tab title="basic" %}

```javascript
<h1>Loop & Array</h1>
<script>
    var coworkers = ['west', 'sliver', 'red', 'cho'];
</script>
<h2>Co workers</h2>
<ul>
    <script>
        var i = 0;
        while(i < 4){
            document.write('<li>'+coworkers[i]+'</li>');
            i = i + 1;
        }
    </script>
</ul>
```

{% endtab %}
{% endtabs %}

### 2. 데이터 추가/ 제거에 유동적으로 실행되는 반복문

### 예시)

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj3yJAE9cMqzplj-xcA%2F-Mj3z2RjPCVawNctoYkS%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%2012.jpg?alt=media\&token=af64c91e-f3f6-4eae-a4a3-2e8f590280c7)

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj3zU5_BeIeIleVZOvk%2F-Mj3zb1qJD48x6qUe4d1%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%2012.jpg?alt=media\&token=23838ff5-3d0a-4555-8c95-405cfe935b1b)

```javascript
<h1>Loop & Array</h1>
<script>
    var coworkers = ['west', 'sliver', 'red', 'cho', 'seoeun'];
</script>
<h2>Co workers</h2>
<ul>
    <script>
        var i = 0;
        while(i < coworkers.length){
            document.write('<li>'+coworkers[i]+'</li>');
            i = i + 1;
        }
    </script>
</ul>
```

{% hint style="success" %}
데이터의 개수가 달라졌을 때를 대비하여 반복문의 조건을 '변수명.length' 로 대입
{% endhint %}

### 3. 데이터에 a링크를 추가하고 싶을 때

### 예시)

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj3yJAE9cMqzplj-xcA%2F-Mj3z5a_HqbwRqk3wNGF%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%2013.jpg?alt=media\&token=612b94de-bdf3-4bac-95ee-af7fc24ba249)

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj3zU5_BeIeIleVZOvk%2F-Mj3zew-fcSo2M9PirCV%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%2013.jpg?alt=media\&token=1d6cf995-fea5-4050-9b61-656eaba3d36a)

```javascript
<h1>Loop & Array</h1>
<script>
    var coworkers = ['west', 'sliver', 'red', 'cho', 'seoeun'];
</script>
<h2>Co workers</h2>
<ul>
    <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>
</ul>
```
