[WEB/JS] 배열/반복문(for문, while문)

배열

[배열 선언하는 법]

<script>
	var fruit = ["apple", "onrange", "banana"];
</script>

스크립트 태그 안에 변수를 하나 정해서

배열을 선언 해준다.

배열을 선언할때는 [ ] 안에 선언 해준다.

---

[배열의 인덱스를 확인하는 법] 

<script>
      var fruit = ["apple", "orange", "banana"];

      document.write(fruit[0]);
      document.write(fruit[1]);
      document.write(fruit[2]);
</script>

document.write(변수명 [ 인덱스 번호 ]) 로 확인이 가능하다.

배열은 첫번째부터 시작하는 것이 아니라

0번째 부터 시작하는 것을 유의해야 한다.

그렇기 때문에

0번째 인덱스에는 apple

1번째 인덱스에는 orange

2번째 인덱스에는 banana가 오게 된다. 

---

[배열을 중간에 추가하고 싶을 때는?]

배열을 중간에 추가하고 싶을 때도 있을 것이다.

<script>
      var fruit = ["apple", "orange", "banana"];

      fruit.push("peach");
      document.write(fruit[3]);
</script>

배열을 추가는 변수명.push("추가할 배열"); 로 가능하다.

배열을 추가하게 되면 2번째 인덱스까지 차있는 상태기이 떄문에

인덱스는 3번이 된다.

---

[배열의 크기를 알고 싶을 때]

<h1>count</h1>

<script>
	document.write(fruit.length);
</script>

배열의 크기를 알고 싶을 때는 변수명.length를 사용하면 된다.

현재 배열의 0번째부터 3번째까지 총 4개의 인덱스가 있기때문에

4가 출력된 것을 알 수 있다.

---

반복문(for문, while문)

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

위와 같은 코드가 있다고 가정하자. 결과에서 2와 3을 자신이 원하는 만큼

반복해서 출력하고 싶다면 document.write()을 사용해서 추가할 수 있다.

하지만 내가 원하는 만큼이 1억개라면 직접 코딩하기는 힘들 것이다.

그럴때 사용하는 것이 반복문이다.

 

만약, 2와 3을 3번씩 반복해서 출력해주고 싶다면 for문과 while문을 통해 

출력을 해줄 수 있다.

[for문 사용]

<h1>Loop</h1>
    <ul>
      <script>
        document.write("<li>1</li>");
        for(var i = 0; i < 3; i++){
          document.write("<li>2</li>");
          document.write("<li>3</li>");
        }
        document.write("<li>4</li>");
      </script>
    </ul>

for문의 구성은

for(초기식; 조건식; 증감식) { 반복할 내용 } 으로 구성되어 있다.

초기식에는 변수를 선언해 변수의 초기 값을 넣어준다.

조건식은 선언한 변수에 조건을 걸어 그 조건까지 반복되게 해주는 역할이다.

증감식은 반복할 내용이 끝났을 때 변수를 증가시키거나 감소시키는 역할을 한다.

 

위의 코드를 하나씩 해석해보면

1. 우선 document.write("<li>1</li>")을 통해 1이 출력된다.

2. 그 후 for문을 만나 for문이 실행되는데 현재 0인 변수 i가 2가 될때까지 반복을 하는 것이다.

3. 처음엔 변수 i가 0이고 3보다 작기 떄문에 document.write("<li>2</li>") document.write("<li>3</li>") 이 출력된다.

4. 1번의 사이클이 끝나고 증감식을 통해 i는 1로 증가하고 아직 3보다 작기때문에 다시한번 작업을 반복한다.

5. 2번의 사이클이 끝나고 증감식을 통해 i는 2로 증가하고 아직 3보다 작기때문에 다시한번 작업을 반복한다.

6. 3번의 사이클이 끝나고 증감식을 통해 i는 3로 증가하고 3보다 작지 않기때문에 for문을 빠져나온다.

7. 마지막으로 document.write("<li>4</li>")를 통해 4가 출력된다.

---

[while문]

<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++;
        }
        document.write("<li>4</li>");
      </script>
    </ul>

while문의 구성은 

while (조건식) { 반복할 내용 } 이다.

while문은 조건식이 참일 동안 계속해서 돌아간다.

만약 조건식에 true값을 넣는 다면 무한루프를 돌게 될 것이다.

또한 while문의 ( )안에는 for문과 달리 초기식과 증감식이 올 수 없기때문에

앞이나 while문 안에서 코드를 작성해야 한다.

 

위의 코드를 하나씩 해석해보면

1. while문의 ( )안에는 초기식을 넣을 수 없기떄문에 while문 앞에 변수를 선언해주고 초기값으로 0을 넣어준다.

2. while ( i < 3 )은 i가 3보다 작을 동안은 계속해서 루프를 돈다는 의미이다.

3. { }안에 반복할 내용을 써 놓고 안에서 변수 i의 값을 i++을 통해 증가시켜준다.

4. 계속 돌다 i값이 3이 되는 순간 while문을 빠져나와 밑에 있는 코드를 실행하게 된다.

---

참고한 생활코딩 자료

https://opentutorials.org/course/3085/18827

반복문 - 생활코딩

https://opentutorials.org/course/3085/18825

배열 - 생활코딩