/JavaScript/배열과 반복문 사용

배열과 반복문의 사용

지난 학습에서 배웠던 배열과 반복문의

사용 형태에 대해 알아보자.

 

<li>apple</li>
<li>banana</li>
<li>grapes</li>
<li>peach</li>

<script>
   var fruit = ['apple','banana','grapes','peach'];
</script>

다음 예제와 같이 <li> 태그를 사용하여 과일의 종류에 대해

나열하여 출력하는 코드를 만들었다.

 

저번 학습을 통해 알아봤던 배열을 사용하여 fruit라는 변수에 데이터를

담아 정리하였다. 이렇게 담겨있는 데이터를 원소라고 한다.

 

이러한 데이터들을 <li> 태그를 사용하여 하나씩 꺼내오는 방법으로

반복문을 사용할 수 있다.

<script>
   var fruit = ['apple','banana','grapes','peach'];
</script>

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

이처럼 반복문을 통해 <li> 태그를 만들어주고 

fruit변수의 데이터의 개수만큼 while문에 설정해두고 실행해보면

웹브라우저에 <li> 태그가 적용되어 4개가 출력되는 걸 볼 수 있다.

 

그렇담 여기서 알 수 있듯이 <li> 태그 사이에 원하는 데이터를 넣게 되면 웹브라우저에 출력이

가능하다는 걸 생각할 수 있다.

 

그렇다면 태그 사이에 무엇을 넣으면 좋을까?

바로 각각의 데이터를 담은 fruit변수와 [데이터의 인덱스 값]을 넣어주면 가능하다.

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

위와 같이 변경해주면 변수 안 데이터의 자릿수(0부터 시작)에 맞게

i에 적용이 되고 이에 따라 웹브라우저에 출력이 가능하다.

 

하지만 위와 같은 예제들은 간단하게 표현하기 위한 예시일 뿐이다.

배열의 데이터 값을 추가하거나 제거할 경우 로직을 수정해야 하는 상황이 벌어질 것이다.

하지만 지금의 코드에서 몇 가지만 변경하면

수정된 변수의 데이터 값에 따라 로직이 알아서 인식하여 자연스럽게

변경될 수 있게 할 수 있다.

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

이전에는 변수의 원소 값이 변경되면 일일이 while의 값을 변경시켜줘야 했다.

하지만 위의 예시처럼 while문에 조건을 수정하게 되면 배열의 원소 값을 인식하여 배열의 데이터를 수정할 때

자동으로 인식하여 출력해줄 것이다.