[JS] 12. 배열과 반복문

    <h1> Loop & Array </h1>
    <h2> Co Workers</h2>
    <ul>
        <li>david</li>
        <li>daniel</li>
        <li>paul</li>
        <li>kim</li>
      </ul>

결과는 이렇겠죠.

배열과 반복문을 활용해서 아래와 같이 바꿔보았습니다.

    <h1> Loop & Array </h1>
    <script>
      var coworkers = ['david','daniel','paul','kim'];
    </script>
    <h2> Co Workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i<4){
            document.write('<li></li>');
            i = i + 1;
        }
      </script>
    </ul>

위와 같이 작성하고 화면을 보면 아래와 같이 된걸 볼 수 있는데요.

위와 같이 작성된 상태에서, 한줄만 추가하여 처음과 같은 결과가 출력되게 해볼께요

아래의 한줄로 바꿔줍니다.

스크립트 안에 <li></li> 사이에 +coworkers[i] +를 추가해줍니다.

i=0부터 하나씩 증가하니깐, coworkers[0], coworkers[1], coworkers[2], coworkers[3]이 차례로 출력되겠죠.

      <script>
        var i = 0;
        while(i < 4){
            document.write('<li>'+coworkers[i]+'</li>');
            i = i + 1;
        }
      </script>

한번 결과를 볼까요?

이런 결과가 나왔습니다.

아마도 4명의 이름은 구지 반복문을 사용할 필요가 없겠지만,

이름이 1,000명, 혹은 10,000명, 혹은 그 이상이 된다면 반드시!!! 필요하겠죠?

그런데, 위 코드에 문제가 있습니다.

위 배열에서 마지막 kim을 빼고 코드를 실행했더니 아래와 같이 undefined라고 뜹니다.

이러한건 우리가 원하는게 아니죠. 그리고 배열이 추가가 되어도 위 코드는 추가된 코드를 실행시키지 못합니다.

이를 해결하기 위해서, 반복문을 아래와 같이 조금 수정해보겠습니다.

반복문 안에 조건을 coworkers의 배열수만큼 반복하도록 수정했습니다.

i<4 에서 coworkers.length로 변경했죠.

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

이렇게 수정하고 결과를 확인했더니, 정상적으로 우리가 원하는 결과를 출력해주네요.

배열을 더 추가해도 자동으로 등록된 배열, 즉 데이터가 변경함에 따라서 동일한 결과를 출력하게 됩니다.

그럼 이걸 실전에서 어떻게 적용할까요?

사이트별 링크를 걸고, 해당 링크를 이름별로 자동으로 지정하게 하는걸 생각한다면, 아래와 같이 할 수 있겠죠.

아래와 같이 a 태그에 홈페이지 주소를 입력하고 그 뒤에 따라오는 주소를 해당 이름별로 지정해놓으면, 인원이 추가도리때마다(이름이 추가될때마다) 자동으로 링크를 홈페이지에서 업데이트 됩니다.

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

이런식으로 말이죠.