[생활코딩] javascript - 배열과 반복문

배열

[0]번째를 출력하니, scuba라고 나오는 걸 볼 수 있다.

console창에서 몇가지 명령어를 통해 작동시켜보았다. 

---

반복문

반복문은 while을 이용해주는 것!

 

<script>
document.write('<li>1</li>');
var i = 0;
while(i<3){
 document.write('<li>2</li>');
 document.wirte('<li>3</li>');
i = i+1;
}
document.write('<li>4</li>');
</script>

i=0 이라는 변수를 먼저 지정해주는 것이다.

i<3일때마다 

document.write('<li>2</li>');
 document.wirte('<li>3</li>');

해당 코드를 반복해서 실행하는데, 그때마다 i에 i+1을 해준다. 

그래서 i가 4가 되었을 때에는, 마지막 줄 코드인 document.write('<li>4</li>');를 실행하게 된다. 

---

배열과 반복문

다시, 나도 이렇게 body태그 안에 적어보았다. 

 

<script>

var coworkers = ['san', 'scuba', 'seol', 'june', 'zoze'];

</script>

<h2> Co-Workers </h2>

<ol>

<script>

var i = 0;

while(i<5){

document.write('<li>'+coworkers[i]+'</li>');

i = i + 1;

}

</script>

</ol>

 

요렇게 출력되는 것을 볼 수 있다.

그런데 이 코드에는, 멤버를 추가할 때마다 while문의 숫자를 계속 변경해줘야 하는 번거로움이 있다. 그것을 극복하기 위해, 코드를 업그레이드 해주자면 다음과 같다. 

 

<script>

var coworkers = ['san', 'scuba', 'seol', 'june', 'zoze'];

</script>

<h2> Co-Workers </h2>

<ol>

<script>

var i = 0;

while(i<cowerkers.length){

document.write('<li>'+coworkers[i]+'</li>');

i = i + 1;

}

</script>

</ol>

 

이렇게 적어준다.

while(i<cowerkers.length)

이 부분에 주목해야한다. 변수로 설정한 var coworkers의 배열 갯수에 따라 반복해주는 것이다. 따라서, 우리가 일일이 하단 자바스크립트를 신경쓸 필요 없이, 상단의 배열에 추가하거나 뺄 것에만 집중하면 알아서 목록을 출력해주는 것이다.