반복문에 배열 활용하기

반복문에 배열을 활용하는 방법을 알아보자!

<h1> Loop & Array </h1>
<h2> Co workers </h2>
<ul>
  <li>egoing</li>
  <li>heina</li>
  <li>luna</li>
  <li>yunsisters</li>
</ul>

직원(co workers)이 이고잉, 해이나, 루나, 윤시스터즈 - 총 4명이 있다. 만약  co workers의 목록이 일억개이고 <li> 가 매우 빈번하게 수정되는 긴 코드라면 유지보수에 상당한 어려움을 겪을 것이다. 

<h1> Loop & Array </h1>
<script>
  var coworkers = ['egoing' , 'heina' , 'luna' , 'yunsisters'];
</script>
<h2> Co workers </h2>
<ul>
<script>
  var i = 0;
  while(i < 4){
    document.write('<li>'+coworkers[i]+'</li>');
    i = i + 1;
  }
</script>
</ul>

위와 같이 배열을 사용하여 직원 명단을 반복적으로 추출할 수 있다. 만약 멤버가 한명 추가되면, coworkers에 요소를 추가하고 반복문의 조건값도 i < 5 로 수정하면 된다. 만약 멤버가 두명 삭제된다면 빈 값 만큼 undefined로 추출된다. 매번 멤버의 수를 맞추어 주어야 하기 때문에 번거롭다. 데이터가 바뀌었을 때, 바뀐 데이터에 따라서 유연하게 결과값도 바뀌도록 하고 싶다면 아래와 같이 쓸 수 있다.

<h1> Loop & Array </h1>
<script>
  var coworkers = ['egoing' , 'heina' , 'luna' , 'yunsisters'];
</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>

이제 자동으로 배열 요소의 갯수를 파악하여 직원수가 바뀌어도 오류 없이 추출한다. 더하여 해당 멤버 이름을 클릭했을 때 "http://a.com/1멤버이름"의 url로 이동하도록 소스를 추가했다.

---

웹브라우저 콘솔창에서 !

document.querySelector('a') : a 태그에 해당하는 첫번째 것 하나만 가져옴

document.querySelectorAll('a') : a 태그에 해당하는 모든 태그 가져옴 (배열 형태)

var alist = document.querySelectorAll('a');
console.log(alist[0]);

첫번째 것 하나만 가져옴 - document.querySelector('a') 과 동일한 결과값을 얻음

var alist = document.querySelectorAll('a');
console.log(alist[1]);

두번째에 해당되는 태그를 가져옴

var alist = document.querySelectorAll('a');
console.log(alist.length);

a 태그의 갯수가 추출됨 (ex) 4

var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
  console.log(alist[i]);
  alist[i].style.color = 'powderblue';
  i = i + 1;
}

해당 페이지에서 a 태그를 모두 찾아서 색상을 powderblue로 변경함

※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다.