{SFB} Javascript day 7 - 반복문과 배열

● 반복문 사용 이유

 

우리가 만든 예제에서 night 모드를 했을 경우에는 링크들이 너무 어둡고, day 모드일 경우에는 너무 밝다고 생각해보자. 따라서, night 모드일 때는 조금 밝게, day 모드일 때는 조금 어둡게 링크가 표현되면 좋겟다고 가정하면

우리가 배운 것을 이용하여 적용하기 위해서는 모든 링크에 대해 style 속성 값을 조절해서 코드를 작성해도 되지만, 극단적인 상황이라고 하면( 링크가 1억개 이상 ) 이 작업을 1억 번 이상을 해야한다. 이렇게 되면 코드의 양이 늘어나고, 유지보수가 힘들어지게 된다.

 

이런 상황에서 효율적으로 처리하기 위해 바로 반복문을 사용할 수 있다.

우선 반복문을 적용한 코드를 미리 보자.

그리고 이 결과를 살펴보기 위해 웹페이지의 검사기능을 살펴보자.

night 버튼을 누른 뒤 검사 기능에 나와있는 모든 <a> 태그를 보면 style 속성이 적용된 것을 볼 수 있다. 

 

다시 돌아가서, 위와 같이 적용하기 위한 코드가 아래 코드인데

이 코드의 대략적인 내용은 이 웹페이지의 모든 a 태그를 가져온 다음, <a> 태그 하나하나에 대해 반복적으로 powderblue 색상을 지정하는 것이다.

이렇게 반복문을 이용함으로써 더욱 더 효율적으로 처리하는 것을 예시로 알아봤다.

이를 위해, 우선 배열을 공부해보자.

 

● 배열(array)

 

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

 

 ○ 배열 만들기

 

우선 예제를 만들어보자.

array syntax 는 배열 문열이란 뜻이고 <script> 안에 ["egoing", "leezche"] 가 바로 배열이다.

우리가 배운 string 은 따옴표로 시작해서 따옴표로 끝났다. 

array 는 대괄호로 시작해서 대괄호로 끝난다. []

그리고 이 [] 안에 값들을 적을 수 있고, 여러 개도 물론 가능하다.

그리고 값과 값 사이는 , 콤마로 구분해준다. 

["egoing", "leezche"] 상태만으로는 사용하기 불편하니 변수에 배열을 담아보자.

coworkers 라는 변수에 ["egoing", "leezche"] 와 같은 배열이라는 새로운 데이터 타입이 담긴 것이다. 이 배열에 이름을 붙인 것과 같다.

이것은 우리가 새로운 수납상자에 물건 2개를 넣은 것과 같은 것이다.

 

 ○ 배열 값(인덱스) 가져오기

 

이번엔 우리가 만든 배열에서 값을 가져오는 것을 해보자.

<script> 안에 document.write(coworkers[0]); 을 적어주면 왼쪽 페이지에 보이는 것과 같이 배열의 첫번째 값인 egoing 이 출력되는 것을 확인할 수 있다.

즉, 첫 번째 자리에 있는 값은 배열에서 0 번째라는 것이다. 이를 index 인덱스 라고 한다.

따라서, index 0번은 egoing, index 1번은 leezche 라는 데이터를 가리킨다고 할 수 있다.

 

 ○ 배열에 들어있는 값 개수 확인하기

 

배열에 들어있는 값의 개수를 구해보자. 이때 사용하는 것이 바로 .length 이다. 배열에 length를 지정하면 배열 안에 몇 개의 값이 있는지 알려준다.

 <script> 안에 document.write(coworkers.length) 를 입력하고 페이지를 보면 2 라는 결과가 출력된다. 즉 배열 항목의 개수가 2개 라는 것이다.

인덱스를 지정할 때는 0이 첫 번째, 1이 두 번째였지만, 배열안의 개수(항목)을 셀 때는 1부터 세기 때문에 값이 2개라면 length 값은 2가 되는 것이다.

 

○ 배열에 데이터 추가하기

 

이번엔 앞서 있는 배열에 데이터를 추가하는 방법을 알아보자.

이때 사용하는 것은 .push() 이다.

<script> 태그 안에 coworkers.push('duru');,  coworkers.push('taeho');  를 추가하고 coworker.length 값을 보면 4로 늘어난 것을 확인할 수 있다.

 

.push 는 배열에 값을 추가하기 위한 방법 중 하나이다. .push 는 배열의 끝에 데이터를 추가하는 방법이고, 앞쪽에 추가하는 방법, 중간에 추가하는 방법 등 다양한 방법들이 있다. 이런 것은 검색을 통해 알아보자. 모르면 그냥 검색이다.

 

이 배열 자체로는 어디에 쓰일까 라는 생각이 들 것이다. 이제 배열과 잘 맞는 콤비인 반복문을 알아보자.

 

● 반복문(Loop)

 

 

위 이미지를 보면 위에서부터 아래로 순서대로 코드를 실행하기 위해 작성한 코드로 보면된다. 

위에서부터 아래로 순서대로 코드를 실행하는 것이 프로그램의 기본적인 실행 순서이다.

 

만약에 위 코드에서 2번쨰와 3번째로 실행돼야 하는 명령을 여러 번 반복해야 할 경우가 있다고 가정해보자.

그렇다면 아래와 같이 코드를 작성해도 되긴하다.

단순히 몇번 반복할 것인지에 대해 그만큼 적어주면되는데... 만약 이 반복을 1억번 해야된다고 하면 당연하게도 좋은 코딩이 아닐뿐더러 할 수도 없다.

이러한 반복문이 나오는 상황에서 반복문에 대해 알고 있다면 아주 좋은 해결방안이 되는 것이다.

 

 ○ 반복문의 기본 문법 - while

 

while 이 반복문의 기본 문법이다. while 외에 for 문도 있지만 우선 while 을 공부하자.

우선 while (true) { } 를 통해서 반복해야될 코드를 감싸고 있는 것을 볼 수 있다. 그리고 () 안에는 boolean type이 와야한다. 이는 if 문 과 같다. 따라서 true 나 false 둘 중 하나가 와야한다.

그리고 () 안의 내용이 true 인 동안에는 while 문 안의 코드가 반복적으로 실행된다.

그리고 이러한 반복은 () 안의 내용이 false가 되면 멈추는 시스템이다.

 

즉, while 문이 실행되면 js 는 while 문의 true/false 상태를 본다. ( 예에선 true )

true면 {} 안에 있는 코드를 한 줄씩 실행하고 마지막까지 가면 다시 while 조건의 값이 true인지 false 인지 확인한다. 

역시나 true 라면 {} 안의 코드가 반복 실행되고, false 라면 while 문 바깥쪽에 있는 코드가 그때서야 실행되는 프로그램이다. ( 예에선 document.write('<li>4</li>') 가 실행될 것 )

 

※ 만약 저 코드대로 실행시키면 무한히 반복될 것... 따라서 반복문이 언제 종료될 것인가를 잘 지정하는 것이 중요하다.

 

반복문이라는 것은 if 문과 마찬가지로 순서대로 실행되는 프로그램의 흐름을 제어하는 제어문이라고 할 수 있다.

 

while 안의 코드를 3번 반복하기 위해선 어떻게 해야할까?

그러기 위해서 우선 {} 안의 코드가 몇번 실행되는지 알려줘야 한다. 이때 필요한 것이 바로 변수이다.

관습적으로 변수 i 에 그런 역할을 부여한다.

var i = 0; 을 적어주고 반복문이 실행될 때마다 i의 값을 1식 증가시키면 된다. 즉 {} 안에 i = i + 1 을 적어주면

반복될 때마다 i 에 1씩 더하게 된다. 

그러면, 처음 반복문을 시작할때 i = 0 이고 반복될 때마다 1씩 증가하기 때문에 while 의 조건을 ( i < 3 ) 이라고 지정해주면 {} 안의 코드가 3번 실행되는 결과를 볼 수 있다. 

처음 i = 0 따라서 조건( i < 3 ) 은 true 가 되기에 {} 안의 코드가 실행되고 i = i + 1 에 의해 i 는 1이 된다. 그리고 다시 while 의 조건을 따져보면 ( i < 3 ) 은 true 이기 때문에 {} 안의 코드가 실행되고 i = i + 1 에 의해 i 는 2가 된다. 조건은 여전히 true 이기에 다시 한번 실행되고 i 가 3 이 되면 i < 3 조건에 대해 false 값이기 때문에 반복문이 끝나고

document.write('<li>4</li>') 가 실행되는 것이다.

 

이것이 바로 변수를 이용한 반복문이다. 아주 간결하고 효율적인 모습이 되었다.

 

 

참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)