> For the complete documentation index, see [llms.txt](https://westsilver.gitbook.io/study-script/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://westsilver.gitbook.io/study-script/javascript/basic/untitled-2.md).

# 배열과 반복문

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

### 예시)

![](/files/-Mj3zYXOKWFiPxbGjsZz)

{% 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. 데이터 추가/ 제거에 유동적으로 실행되는 반복문

### 예시)

![](/files/-Mj3z2RjPCVawNctoYkS)

![](/files/-Mj3zb1qJD48x6qUe4d1)

```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링크를 추가하고 싶을 때

### 예시)

![](/files/-Mj3z5a_HqbwRqk3wNGF)

![](/files/-Mj3zew-fcSo2M9PirCV)

```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>
```