배열과 반복문

집에 시간이지날수록 살림은 늘어나고 살림이 늘어날 수록 정리가 힘들어집니다.

때문에 사물들을 잘 정리할 수 있도록 옷장, 책장, 냉장고 등을 구입하기도 하고, 방이 많은 집을 선호합니다.

 

프로그래밍 역시 코딩할때 굉장히많은 데이터를 관리하게되고 데이터의 종류도 매우 다양하기 때문에 이러한 데이터를 정리할 수 있는 수납공간을 만들어 나누게 됩니다. 데이터중에서도 서로 연관되어있는 데이터끼리 잘 묶어서 담아두는 일종의 수납상자가 배열(array)이라고 할 수 있습니다.

 

기본적인 배열의 문법은 [ 대괄호로 시작해서 대괄호로 끝나며 ] , 배열안에는 여러 값을 입력할 수 있고 값과 값 사이는 콤마( , )로 구분합니다. 또한 배열은 그자체로는 이용하기 어렵기때문에 주로 변수에 담아 사용합니다.

 

이렇게하면 coworkers라는 변수에 "egoing", "leezche"라는 두개의 데이터가 담긴 배열이 담긴 것이죠.

즉 coworkers라는 책장에 두개의 책을 꽂은 것과 같습니다.

 

그렇다면 이 배열의 값을 꺼내올 수 있어야 사용할 수 있겠죠.

 

document.write(coworkers[0]); 은 coworker라는 변수에 저장된 배열 중 0번째 데이터를 가져오겠다는 의미입니다.

배열은 0부터 시작되기때문에 위치값으로 따지자면 아래와 같이 저장되어있는 것입니다.

egoing	leezche
배열 0번째	배열 1번째

때문에 coworkers[0] 은 배열 0번째에 위치한 egoing을, coworkers[1]은 배열 1번에 위치한 leezche를 출력합니다.

 

---

또한 배열에 들어있는 값이 몇개인지 count해주는 속성도 있습니다.

 

.length 라는 속성을 활용하면 coworkers 변수에 저장된 배열의 데이터 개수를 출력해줍니다.

 

---

생성된 배열에 값을 추가하고 싶을때는 .push 속성을 이용하면 값을 넣을 수 있습니다.

이 외에도 배열관련 속성은 다양하기 때문에 아래 사이트를 참고하여 활용하기 바랍니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Array.prototype.push() - JavaScript | MDN

---

위에서 학습한 배열은 반복문과 함께할 때 빛을 발하는 기능입니다.

 

그렇다면 이번에는 반복문에 대해서 공부해봅시다.

반복문에는 여러 종류가 있지만 이번 학습과정에서는 while문을 활용할 것입니다.

 

while문의 기본 문법은 while 뒤의 괄호 안에 조건을 기입(조건이 될 수 있는값 : Boolean)하며,

괄호 안의 조건이 true이면 중괄호 { } 내의 구간이 실행되고,

괄호 안의 조건이 false이면 while문이 종료되면서 다음 구간으로 넘어가게 됩니다.

 

그렇기 때문에 while문을 적용할때 해당 구문을 종료할 시점을 설정하는 것이 매우 중요합니다.

만약 조건을 제대로 설정하지않으면 무제한 루프가 돌아 과부하가 생길 수 있기 때문입니다.

 

그래서 while문을 이용할때 i 라는 변수를 주로 이용합니다.

아래 예시를 통해 반복문의 개념에 대해 먼저 이해해보겠습니다.

 

위 예시를 분석해봅시다.

 

먼저 i 라는 변수를 선언하고 i에는 0이라는 숫자를 초기값으로 설정하였습니다.

 

그리고 i<2 가 true이면, 즉 i가 2보다 작으면 while문을 실행합니다.

반대로 i가 2보다 작지 않다면(false) while문을 종료하도록 반복문을 생성하였습니다.

 

while문의 내용을 보면 <li>1</li>과 <li>2</li>를 출력하고 i라는 변수에 +1을 대입하도록 되어있습니다.

 

---

자바스크립트가 실행되면 먼저 i=0 으로 초기값이 설정되어있으므로

while ( i<2 )에 0을 대입하면 0<2는 True이므로 while 뒤의 중괄호 { }구간을 실행합니다.

그럼 <li>1</li>, <li>2</li>를 출력하고 i의 값에 1을 더해줍니다 . ( i = 0(초기값) + 1)

 

그리고 다시 while문을 실행하면 i의 값이 이전 실행문으로 인해 1로 변경되었습니다.

while ( i<2)에 1을 대입하면 1<2는 True 이므로 while 뒤의 중괄호 { } 구간을 다시 실행합니다.

그럼 <li>1</li>, <li>2</li>를 출력하고 다시 i의 값에 1을 더해줍니다. ( i = 1+1 )

 

그리고 다시 while문이 실행되면 i 의 값이 이전 실행문으로 인해 2로 변경되어있습니다.

while ( i<2 ) 에 2를 대입하면 2<2는 False 이므로 반복문이 종료됩니다.

 

결과적으로 <li>1</li>, <li>2</li>를 총 2번 실행 시키고 종료되도록 반복문이 만들어진것을 볼 수 있습니다.

 

---

---

 

그렇다면 여기서 학습한 반복문과 배열이 어떤 관계가 있는걸까요?

배열을 이용한 반복문의 예시를 살펴보도록 합시다.

 

먼저 var coworkers = ['ester', 'benjamin', 'nosso', 'dia'] 라는 것은

coworkers라는 변수에 아래와 같은 데이터 배열을 저장한 것입니다.

ester	benjamin	nosso	dia
[ 0 ]	[ 1 ]	[ 2 ]	[ 3 ]

그리고 i라는 변수에 0을 저장하고 반복문을 실행합니다.

 

이때 while문의 조건을 살펴보자면 ( i < coworkers.length) 라고 되어있는데

coworkers.length란, coworkers 변수에 저장된 배열의 데이터 개수를 카운트한것이라고 해석하면 됩니다.

즉, 위 예시의 경우 coworkers 안에 'ester', 'benjamin', 'nosso', 'dia' 라는 네개의 데이터가 저장되어있으므로

실제로는 i < 4 일때까지 반복문을 실행한다고 할 수 있겠죠.

 

그런데 i < 4라고 하지않고 배열의 속성(length)를 이용한 이유는 데이터는 충분히 바뀔 수 있는 값이기 때문입니다.

예를 들어 i < 4 만큼 반복문을 실행하도록 설정해놓았는데 배열에 데이터가 추가/삭제되어 데이터의 개수가 바뀌게된다면, 매번 데이터가 수정될때마다 로직도 함께 수정해야하는 번거로움이 생깁니다.

때문에 데이터가 변하더라도 로직을 수정할 필요가 없게끔 ( i < coworkers.length ) 이라고 코딩을 한 것입니다.

---

위의 반복문의 실행과정을 좀더 상세하게 구분하여서 설명하자면 아래와 같습니다.

 

 

첫번째 반복문 실행

최초 반복문을 시작하는 시점의 i 의 값은 0 이고, coworkers.length은 배열 내 저장된 데이터의 개수(4)입니다.

그럼 while문의 조건인 while ( i < coworkers.length ) 에 값을 대입하여 생각해보았을때 0 < 4 가 되므로 True입니다.

값이 True 이므로 while 뒤의 { } 중괄호 구간을 실행합니다.

 

document.write('<li>'+coworkers[i]+'</li>') 은 coworkers 배열의 [ i ] 번째에 위치한 값을 출력하되 <li> 리스트 형태로 출력하라는 뜻입니다.

i 는 위의 초기값을 확인하였을때 0 이었으므로 coworkers [ 0 ], 즉 0번째 위치한 'ester' 이라는 값을 출력합니다.

그리고 i = i+1 을 실행하도록 하기 때문에 i 의 값에 1을 더한 값을 저장해줍니다. ( i=0+1 )

 

 

두번째 반복문 실행

두번째 반복문을 시작하는 시점의 i 의 값은 앞에서 1을 더해주었기 때문에 1로 변경되었습니다.

그럼 while문의 조건인 while ( i < coworkers.length ) 에 값을 대입하여 생각해보았을때 1 < 4 가 되므로 True입니다.

값이 True 이므로 while 뒤의 { } 중괄호 구간을 실행합니다.

 

document.write('<li>'+coworkers[i]+'</li>') 은 coworkers 배열의 [ i ] 번째에 위치한 값을 출력하되 리스트 형태로 출력하라는 뜻입니다.

i 의 값은 1이므로 coworkers [ 1 ], 즉 1번째 위치한 'benjamin' 이라는 값을 출력합니다.

그리고 i = i+1 을 실행하도록 하기 때문에 i 의 값에 1을 더한 값을 저장해줍니다. ( i=1+1 )

 

 

세번째 반복문 실행

세번째 반복문을 시작하는 시점의 i 의 값은 앞에서 1을 더해주었기 때문에 2로 변경되었습니다.

그럼 while문의 조건인 while ( i < coworkers.length ) 에 값을 대입하여 생각해보았을때 2 < 4 가 되므로 True입니다.

값이 True 이므로 while 뒤의 { } 중괄호 구간을 실행합니다.

 

document.write('<li>'+coworkers[i]+'</li>') 은 coworkers 배열의 [ i ] 번째에 위치한 값을 출력하되 리스트 형태로 출력하라는 뜻입니다.

 

i 의 값은 2이므로 coworkers [ 2 ], 즉 2번째 위치한 'nosso' 이라는 값을 출력합니다.

그리고 i = i+1 을 실행하도록 하기 때문에 i 의 값에 1을 더한 값을 저장해줍니다. ( i=2+1 )

 

 

네번째 반복문 실행

네번째 반복문을 시작하는 시점의 i 의 값은 앞에서 1을 더해주었기 때문에 3으로 변경되었습니다.

그럼 while문의 조건인 while ( i < coworkers.length ) 에 값을 대입하여 생각해보았을때 3 < 4 가 되므로 True입니다.

값이 True 이므로 while 뒤의 { } 중괄호 구간을 실행합니다.

 

document.write('<li>'+coworkers[i]+'</li>') 은 coworkers 배열의 [ i ] 번째에 위치한 값을 출력하되 리스트 형태로 출력하라는 뜻입니다.

 

i 의 값은 3이므로 coworkers [ 3 ], 즉 2번째 위치한 'dia' 이라는 값을 출력합니다.

그리고 i = i+1 을 실행하도록 하기 때문에 i 의 값에 1을 더한 값을 저장해줍니다. ( i=3+1 )

 

 

다섯번째 반복문 실행

다섯번째 반복문을 시작하는 시점의 i 의 값은 앞에서 1을 더해주었기 때문에 4로 변경되었습니다.

그럼 while문의 조건인 while ( i < coworkers.length ) 에 값을 대입하여 생각해보았을때 4 < 4 가 되므로 False 입니다.

값이 False 이므로 while 뒤의 { } 중괄호 구간을 실행하지않고 반복문을 종료합니다.