WEB2 - JavaScript 19 to 22 (반복문, 배열)

728x90

반복문의 예고

예제에서 주간 모드와 야간모드 상태에서 링크들의 색상을 변경하려고 한다.

주간 모드일 경우 좀 더 어둡게, 야간 모드일 경우 밝게

즉 버튼을 눌렀을 때 모든 링크들의 스타일 속성 값을 바꿔주는 코드를 짜 보자.

그런데 만약 이렇게 바꿔야 할 링크가 1억개가 넘는다면? 이때 반복문이 필요하다.

배열(Array)

(먼저 배열이 무엇인가를 알고 왜 필요한지는 반복문 수업에 가서 알자.)

집에 살림이 늘어날 수록늘어날수록 이 살림들을 수납할 수 있는 냉장고나 책장, 서랍을 구매하게 된다. 우리는 살림, 물건이 늘어날수록 이것들을 그 필요성에 따라 정리 정돈할 수 있는 여러 가지 수납공간들을 마련하게 된다.

프로그래밍도 마찬가지이다.

데이터가 많아짐에 따라서 그 데이터를 그냥 둘 수 없기 때문에 그 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아 두는 일종의 수납상자, 그것이 배열, 영어로는 Array 라고 한다.

ex6.html
배열의 문법과 성격을 알아보자.

배열은 [대괄호]로 시작해서 [대괄호]로 끝난다.
그리고 대활고 안에 값을 적는데 여러 개의 값을 적을 수 있다.
갑과 값 사이는 콤마, 로 구분한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
    <script>
      var coworkers = ["egoing","livebyfaith117"];
    </script>
  </body>	
</html>

방금 만든 배열을 변수에 담는다.

var coworkers = ["egoing","livebyfaith117"];

coworkers 라는 변수에 배열이라는 새로운 데이터 타입이 담긴 것이다.

그리고 그 데이터 타입에 coworkers 라는 이름을 붙인 것

이것은 우리가 새로운 수납상자를 집에 갖다 놓으면서 그 안에 물건을 2개 넣어놓은 것과 똑같은 것이다.

반대로 꺼내오는 것을 알아보자.
document.write(coworkers[0]);
즉, 첫 번째 자리에 있는 값은 0번째라는 뜻. 다른 말로 index 0번은 egoing 이 되는 것이고document.write(coworkers[1]);
index 1번은 livebyfaith117 이 되는 것이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
    <script>
      var coworkers = ["egoing","livebyfaith117"];
    </script>
    <h2>get</h2>
    <script>
      document.write(coworkers[0]);
      document.write(coworkers[1]);
    </script>
  </body>
</html>

들어있는 값이 몇 개인가를 체크해보자.
추천 검색어 javascript array count
우리가 index 를 정할 때는 0 은 첫 번째이고 1 은 두 번째이다.
그런데 개수를 셀 때에는 1 부터 세기 때문에 값이 두 개라면 length 의 값은 2 가 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
    <script>
      var coworkers = ["egoing","livebyfaith117"];
    </script>

    <h2>get</h2>
    <script>
      document.write(coworkers[0]);
      document.write(coworkers[1]);
    </script>

    <h2>count</h2>
    <script>
      document.write(coworkers.length);
    </script>
  </body>
</html>

데이터를 추가하는 방법
추천 검색어 javascript array add data
document.push("weixin","wechat")
이렇게 추가한다면 length 의 값은 4 가 된다.
(참고. push 는 데이터를 끝에다가 추가하는 것)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
    <script>
      var coworkers = ["egoing","livebyfaith117"];
    </script>

    <h2>get</h2>
    <script>
      document.write(coworkers[0]);
      document.write(coworkers[1]);
    </script>

    <h2>add</h2>
    <script>
      coworkers.push("weixin","wechat")
    </script>

    <h2>count</h2>
    <script>
      document.write(coworkers.length);
    </script>
  </body>
</html>

추천 검색어 javascript array

반복문(Loop)
- 배열과 환상의 콤비

ex7.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <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>
  </body>
</html>

document.write('<li>1</li>'); 는 순서대로 실행될 어떤 기능들 하나하나를 의미.

이러한 4개의 기능들이 있다고 했을 때

2,3 기능을 반복해서 실행해야 한다. 그런데 그 반복해서 실행하는 두줄의 프로그램 코드가 1억 개라면?

반복적으로 copy&paste 하는 건 불가능하다. 만약 만들었다고 해도 버그가 있어 수정해야 한다면 절망적일 것.

반복문 문법

Ex)

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

document.write('<li>3</li>'); 가 3번 반복하도록 만들어보자.

<script>
	document.write('<li>1</li>');
	while(true,false){
		document.write('<li>2</li>');
		document.write('<li>3</li>');
	}
	document.write('<li>4</li>');
</script>

while 괄호 안의 값이 (if문과 같이) true 일 때 아래의 코드가 실행되며 false 가 될 때까지 실행된다.

구체적으로, while 문이 시작되면 JS가 괄호 안을 본다. true 면 중괄호 안에 있는 걸 하나하나 실행시켜서 마지막까지 가면 다시 while 괄호 안의 값이 true 인지 false 인지 확인한다. true 면 실행되고 false 면 그때 실행이 끝나면서 while문 바깥쪽의 코드가 실행된다.

그렇다면 반복문이 언제 종료가 될 것인지 지정하는 것이 필요하다.

변수를 i 로 지정하고 0 으로 시작하게 한다.

var i = 0;

다음으로 반복문이 실행될 때마다 i 의 값을 1 씩 증가시킨다.

i = i + 1;

('기존의 i 의 값에 1 을 더한 결과를 i 의 새로운 값에 준다.'라는 뜻)

다음으로 반복문을 3번 반복하고 싶다면.

while ( i < 3 )

즉 i = 0, i = 1, i = 2 일 때 총 3번 실행된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <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 = i + 1;
        }
        document.write('<li>4</li>');
      </script>
    </ul>
  </body>
</html>

~~(어렵지만 반복문을 사용하지 않았을 때 느껴야 할 절망감에 비하면 아무것도 아니다.)~~

배열과 반복문 (Loop & Array)

ex8.html
JS 없이 만들어보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Loop & Array</h1>
    <h2>Co workers</h2>
    <ul>
      <li>egoing</li>
      <li>livebyfaith117</li>
      <li>weixin</li>
      <li>wechat</li>
    </ul>
  </body>
</html>

그런데 만약 글 목록이 1억 개이며 복잡한 태그이고 빈번하게 수정이 일어난다면?

JS 에서 이렇게 서로 연관된 데이터들을 담는 배열과 그리고 그 배열에 담겨있는 데이터를 순차적으로 꺼내서 <li>라는 태그로 반복문이 해주는 것을 만들어보자.

배열, 데이터를 담고

var coworkers = ['egoing','livebyfaith117','weixin','wechat'];

변수 coworkers 가 가리키는 배열에 담겨 있는 데이터를 하나하나 꺼내서 <li> 태그를 만들자.

반복문을 4번을 실행시켜야 한다.

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

이제는 반복문이 실행될 때마다 coworkers 라는 변수 안에 있는 배열에서 하나하나의 원소 값을 가져와서 <li> 태그에 위치시키면 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','livebyfaith117','weixin','wechat'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        i = 0;
        while (i < 4) {
        document.write('<li>'+coworkers[i]+'</li>')
        i = i + 1;
        }
      </script>
    </ul>
  </body>
</html>

이렇게 하면 처음 JS 없이 만든 ex8.html 과 같다. 그러나 이 코드는 완벽하지 않다.

예를 들어 배열에 맴버를 한 명 더 추가하면 바뀌지 않는다.
while ( i < 4 ) 라면 배열에 하나의 데이터를 추가할 경우 나타나지 않고 하나를 삭제한다면 undefined 라고 실행된다.

즉 맴버를 하나 추가하고 while문도 수정해야 한다.

생활코딩님 曰 개발자가 수치스럽게 여기는 것,

데이터를 바꿨다고 해서 로직을 바꾸는 것을 되게 창피스러워한다고 한다.

데이터가 바뀌면 그 바뀐 데이터에 따라서 유연하게, 다이나믹하게, 일레스틱하게 바뀌는 걸 원한다.

그렇다면 맴버를 추가하거나 삭제할 때 while ( i < 4 ) 에서 숫자에 무엇이 들어가야 할까?

coworkers 배열에 담겨있는 원소의 숫자가 들어간다면 직접 수정하지 않아도 탄력적으로 로직이 변할 것이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','livebyfaith117','weixin','wechat','line'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        i = 0;
        while (i < coworkers.length) {
        document.write('<li>'+coworkers[i]+'</li>')
        i = i + 1;
        }
      </script>
    </ul>
  </body>
</html>

while ( i < coworkers.length ) 로 한다면 데이터를 추가하거나 삭제해도 잘 실행된다.

여기 있는 <li> 태그에 링크를 걸고 싶다면?

만약 1억 개라면 1억 개를 직접 다 바꿨어야 했는데.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','livebyfaith117','weixin','wechat','line'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        i = 0;
        while (i < coworkers.length) {
        document.write('<li><a href="http://livebyfaith117.tistory.com'+coworkers[i]+'">'+coworkers[i]+'</a></li>')
        i = i + 1;
        }
      </script>
    </ul>
  </body>
</html>

즉 배열(Array)이라는 것은 순서대로 서로 연관된 데이터를 잘 정리 정돈하는 것이고

반복문(Loop)은 순서대로 그 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법이기 때문이네

이 두 개의 기능은 환상의 콤비 같은 기능이라고 할 수 있다.

반복문을 순수하게 생각해보았다.

순수하게 생각해보았다는 것은 웹브라우저와 상관없이.

그럼 이 기능을 어떻게 하면 웹브라우저에서 활용할 수 있고 예제에서 사용할 수 있을까?

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 24 to 27 (함수, function) (4)	2021.09.23
WEB2 - JavaScript 23 (배열과 반복문의 활용) (5)	2021.09.19
WEB2 - JavaScript 18 (리팩토링 중복의 제거) (6)	2021.09.15
WEB2 - JavaScript 14 to 17 (조건문) (2)	2021.09.15
WEB2 - JavaScript 8 to 13 (4)	2021.09.14

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

티스토리툴바