[생활코딩|WEB_JavaScript#7] 반복문 上 : 배열, 반복문 2020.02.03

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

#0. 반복문 예고

See the Pen JavaScript#7 by nani6765 (@nani6765) on CodePen.

 

 

'반복문' 이라는 새로운 문법을 알아보기 앞서서 불만족스러운 부분을 찾아보겠습니다.

야간모드일 때 표시되는 링크(Web, example link)가 너무 어두운 것이 불만일 수 있습니다.

또, 주간모드일 때 표시되는 링크가 너무 밝은 것도 불만일 수 있습니다.

버튼을 클릭할 때마다 모든 페이지의 링크 style의 속성 값을 바꿔주는 코드를 삽입하면 해결할 수 있겠지만,

링크의 숫자가 지금 처럼 적지 않고 매우 많다면,

그 작업은 매우 비효율적일 것이며, 후에 유지보수도 매우 힘들어 질 것입니다.

이런 상황을 구원해주는 것이 바로 '반복문'입니다.

먼저 반복문이 적용된 코드를 보여드리겠습니다.

See the Pen JavaScript#8 by nani6765 (@nani6765) on CodePen.

 

 

<!--
  <input id="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';
-->
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } 

<!--
    else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';
-->
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">

(중괄호 때문에 한 블럭에서 주석처리가 동시에 이루어지지 않아 코드 블럭을 두개로 작성하였습니다.)

이 코드에서 주석처리 된 부분을 제외한 부분이 저희가 구현하고자 하는 '반복문'입니다.

코드의 대략적인 기능을 소개하자면,

모든 a태그를 가져온 다음, a 태그에 반복적으로 powderblue/blue 컬러를 지정하는 내용입니다.

앞으로 이 코드를 구현하기 위해 필요한 부품을 알아 볼 예정입니다.

 css, 조건문과 마찬가지로 배열과 반복문의 정의를 알고 있다면,

다음 강의를 뛰어 넘을 것을 생활코딩에서는 권장하고 있습니다.

그리고 역시 마찬가지로 저는 학습을 진행하도록 하겠습니다.

 

#1. 배열

배열이란 주제에 대하여 이야기 해보겠습니다.

배열을 용이성, 쓸모에 대해서는 사실 배열 자체로는 파악하기 어렵습니다.

반복문을 학습하면서 배열이 가진 힘을 알 수 있습니다.

그 이전에는 실용적인 예제가 아닌 관념적인 느낌의 개념을 먼저 알 필요가 있습니다.

 

#1-1.

생활코딩에서 하나의 비유를 들어주었습니다.

사람은 시간이 지날수록 집안에 살림이 늘어납니다.

살림이 늘어날 수록 마음이 힘들어지면서 정리의 필요성을 느끼게 됩니다.

그 필요에 따라 책장이나 수남상자, 혹은 더 큰 집으로 이사를 결정하게 됩니다.

집에 있는 사물이 많아질 수록 잘 정리정돈할 필요성이 생기고,

필요성에 따라 정리정돈할 수 있는 수납공간등을 마련하게 됩니다.

코딩 프로그램도 이와 마찬가지 입니다.

프로그래밍을 하게 되면 굉장히 많은 데이터를 다루게 되고, 그 데이터들은 제각각 다른 성격을 지니게 됩니다.

데이터가 많아짐에 따라 코딩하기 힘들게 되면서 결국 한계에 도착하게 됩니다.

프로그램을 더 복잡하게 발전 시키지 못하게 되는 순간, 사람이 감당할 수 없는 프로그램이 되고 맙니다.

살림을 수납상자에 보관하게 된다면, 많은 살림을 생각하고 고려할 것이 아니라 그 수납상자만 고려하게 됩니다.

머릿속이 다시 단순해지는 효과를 가질 수 있습니다.

배열이란 것도 마찬가지의 느낌입니다.

데이터가 많아짐에 따라, 더 이상 방치할 수 없게 되어서

연관된 데이터를 잘 정리정돈하게 됩니다. 데이터를 담아 두는 일종의 수납상자가 필요하게 된 것이죠.

그리고 그 기능이 배열, Array입니다.

 

#1-2.

배열의 문법에 대하여 살펴보겠습니다.

<h1>Array</h1>
<h2>Syntax</h2>
<script>
  var coworkers = ["egoing", "leezche"];
</script>

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

<h2>add</h2>
<script>
  coworkers.push('duru');
  coworkers.push('taeho');
</script>

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

위 코드는 생활코딩 사이트에서 확인하실 수 있으십니다.

배열을 만드는 방법, Syntax 즉 문법은 '[' , ']' 대괄호입니다.

문자를 만들기 위하여 따옴표를 사용했듯이 배열을 만들기 위하여 대괄호를 사용할 것입니다.

배열은 많은 데이터의 수납상자, 집합이라고 앞에서 말씀드렸습니다.

즉 배열에는 통상적으로 한 개 이상의 데이터가 담기기 마련인데,

그 다수의 데이터를 ',' 반점으로 구분하게 됩니다.

다시 설명하여 배월의 값과 값 사이는 콤마로 구분합니다.

배열을 선언하는 것에서 그치지 않고, 우리는 변수 coworkers를 선언하여 그 안에 배열을 담았습니다.

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

다른 말로 표현하여 배열에 coworkers라는 이름을 붙였다로 이해하셔도 무방합니다.

 

#1-3.

배열에 담겨진 데이터를 가져오는 방법은 'get'입니다.

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

위 문장을 해석해보면, "coworkers 배열에서 0번째 index 값을 가져와줘"로 해석할 수 있습니다.

따라서 "egoing"을 가져올 것이며, 이러한 방식을 get이라고 지칭합니다.

우리는 변수를 이용하여 배열에 coworkers라는 이름을 부여하였고, 그 배열 속 0번째 순서의 값을 가져오고 있습니다.

이러한 숫자 0, 1등을 우리는 index라고 표현합니다.

여기서 통상적인 숫자개념과 조금 혼돈이 올 수 있는데,

일반적으로 coworkers의 첫번째 값은 "egoing", 두 번째 값은 "leezche"라 생각할 수 있습니다.

하지만 컴퓨터의 세계에서 시작은 1이 아니라 0임을 명심하시길 바랍니다.

아무튼, 이와 같은 방식으로 배열의 index에 맞는 값을 가져올 수 있습니다.

지금의 경우에는 값이 2개밖에 담겨있지 않지만,

배열에 값을 저장할 때 마다 우리는 배열에 얼마나 많은 값이 저장되어 있는지 궁금할 수 있습니다.

역시 검색을 통해 해결할 수 있겠죠?

검색 : JavaScript Array Count

Array.length

데이터에 들어간 값의 총 숫자를 확인할 수 있는 방법은 .length인 것을 확인할 수 있습니다.

그렇다면 지금 우리의 배열에는 length가 2로 표시되는지 확인해보겠습니다.

네, 선언한 바와 같이 배열에 총 2개의 값이 저장됨을 잘 보여주고 있습니다.

 

#1-4.

그렇다면 배열은 처음에 선언할 때 필요한 모든 값을 선언해 주어야 할까요?

아닙니다. 배열은 선언이후 얼마든 값을 추가할 수 있습니다.

검색 : JavaScript Array Add Data 

Array.prototype.push()

push를 통해 배열에 데이터를 삽입할 수 있음을 확인하였습니다.

그리고 이 push를 사용하여 데이터를 추가한 부분이 앞서 보여드렸던 코드에서

<h2>add</h2>
<script>
  coworkers.push('duru');
  coworkers.push('taeho');
</script>

이 부분입니다.

현재 "egoing"과 "leezche" 값이 선언되어 있는 배열 coworkers에 "daru"와 "taeho"를 추가하였습니다.

제대로 추가되었는지 확인해볼려면, get을 사용하여 [2], [3]의 값을 확인하거나,

length를 사용하여 총 데이터의 개수를 알아보면 될 것 같습니다.

count 2에서 4로 증가하여 표현한 것을 확인할 수 있습니다.

사실 배열과 관련한 많은 method가 있습니다.

index값을 몰라도, 배열의 첫번째(0) 혹은 마지막(?) 순서의 값을 지칭하는 방법이나,

index값을 부여하여 배열에 추가하는 방법, 삭제하는 방법, 삭제하는 방법 역시 index값을 부여할 수도 있습니다.

배열과 관련하여 다양한 기능이 있으니, 이는 필요할 때마다 따로 검색을 통해 확인하거나,

미리 살펴두면 좋을 것 같습니다.

검색 : JavaScript Array

Array

 

#2. 반복문

이번 실습에 등장하는 생활코딩 사이트에서 확인하실 수 있습니다.

반복문, 영어로 Loop라고 표현합니다.

먼저 아래와 같은 코드가 있습니다.

<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>

지금은 숫자 1부터 4까지 화면에 출력되겠지만, 프로그램이 진행되는 순서라고 가정합시다.

여기서 2번째 프로그램과 3번째 프로그램이 3번 반복되어 실행하게 하려면 어떻게 해야 할까요?

<h1>Loop</h1>
<ul>
<script>
    document.write('<li>1</li>');
    // 첫 번째 실행
    document.write('<li>2</li>');
    document.write('<li>3</li>');
    // 두 번째 실행
    document.write('<li>2</li>');
    document.write('<li>3</li>');
    // 세 번째 실행
    document.write('<li>2</li>');
    document.write('<li>3</li>');
    document.write('<li>4</li>');
</script>

위와 같은 방법으로 코드를 직접 추가하여 해결할 수 있을 겁니다.

하지만 만약 반복하여야 할 횟수가 1억개라면 어떻게 될까요?

또 반복하고 있는 코드를 수정해야 하는 상황에서는?

우리는 절망에 빠질 수도 있습니다.

그리고 이와같은 문제를 해결하기 위해 학습하는 반복문은 결코 어렵지 않을 것입니다.

 

#2-1.

반복문에는 기본적으로 for문과 while문이 있지만, 이번 실습은 while문만 알아보도록 하겠습니다.

<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>

위에서 다뤄보았던 문제를 반복문으로 해결한다면 이와 같은 코드가 될 것입니다.

먼저 while문 뒤에 등장하는 소괄호에는, if문 처럼 true 혹은 false의 값을 가지는 boolean type이 올 수 있습니다.

소괄호 안의 값이 참일 때, 중괄호 안의 코드가 하나씩 실행되고,

다시 while문으로 돌아와 소괄호 안의 값이 참인지 검사합니다.

위 과정을 반복하여 while문 값이 거짓이 될 때까지 중괄호 안의 코드를 반복하게 됩니다.

따라서 'while(true)'등으로 반복문을 선언하게 된다면,

해당 반복문은 언제나 '참'이기 때문에 반복문이 종료되지 않을 것이고, 프로그램은 끝나지 않을 것입니다.

즉, 우리는 반복문의 종결조건을 잘 선언해 줄 필요성이 있습니다.

이처럼 반복문은 프로그램의 순서를 제어하기 때문에, if문과 함께 '제어문'의 범주에 속합니다.

 

#2-2.

반복문의 종결조건을 정의하기 위하여 반복문이 얼마나 실행되었는지 저장할 공간이 필요합니다.

그리하여 위 코드를 살펴보시면 L5. 의 코드에서 변수 i에서 정수 0을 선언하고,

L8. 의 코드, 즉 반복문이 끝나는 시점에 i의 값을 자기 자신의 값에서 1씩 더하여 재정의하고 있습니다.

그리고, 반복문의 조건은 i의 값이 3보다 작을 때 반복문이 실행되도록 하고 있습니다.

따라서 최초 실행 시 i의 값은 0이므로 반복문의 코드가 실행되고,

i의 값이 1씩 증가하다 3이 되는 순간,

i는 3보다 작지 않으므로 반복문에서 탈출하여 4번째 프로그램이 실행되게 될 것입니다.

가시적으로 코드를 확인해보면 아래의 사진과 같습니다.

i가 각각 0, 1, 2일 때 2번째와 3번째 프로그램이 실행되고,

i가 3이 되는 순간 4번째 프로그램이 실행되는 것을 확인할 수 있습니다.

우리는 이렇게 반복되어서 실행하여야 할 코드를,

반복문을 통하여 효과적으로 제어하고 관리할 수 있습니다.