Coffee And Coding

이전에 '변수'에 대해서 배웠을 때 변수란 데이터를 저장하는 공간이라고 했습니다.

이런식으로 name이라는 변수에 '김커피'란 문자데이터를 저장했습니다.

그렇다면 name이라는 변수 안에 2개 이상의 데이터를 넣을 순 없을까요?

바로 하나의 변수에 여러개의 데이터를 담을 수 있는 것이 '배열'입니다.

배열은 이런식으로 대괄호[]를 이용하여 생성할 수 있습니다.

이런식으로 alert를 이용해서 name에 있는 값을 출력해보면 

name변수 안에 든 모든 값들이 출력되는 것을 볼 수 있습니다. 

그렇다면 만약 이중에서 '김라떼'라는 데이터 하나만을 출력해보고 싶으면 어떻게 할까요?

이렇게 하면 '김라떼'라는 값만 출력될 겁니다. 한번 따라해보세요.

이처럼 배열은 '인덱스(index)'를 갖고 있어서 이 인덱스를 통해서 배열 안의 여러 데이터 값들 중 특정 값만을 꺼내올 수 있습니다. 이 인덱스는 1번이 아닌, 0번부터 시작을 해서 첫번째 데이터는 name[0] 이렇게 써서 꺼내올 수 있습니다.

인덱스 번호는 1번이 아닌 0번부터 시작한다는 점을 주의해주세요!

이러한 배열은 반복문과 결합하여 자주 사용됩니다. 왜냐구요?

위의  name 배열에 현재는 3개의 데이터값만 들어있지만, 만약 100개 혹은 1000개 이런식의 많은 데이터가 들어있다고 칩시다. 그러면 모든 데이터를 하나씩 출력한다고 했을 때 일일이 alert(name[0]); alert(name[1]); alert(name[2]); .....이런식으로 쳐서 출력해야할까요? 많은 데이터가 있을때 엄청 힘들고 노가다 작업이겠죠?

그러면 0번 인덱스부터 99번 인덱스까지 하나씩 출력해줘~ 라고 할 수 있으면 얼마나 편할까요?

이처럼 반복되는 노가다 작업을 줄여주고, 효율적으로 처리할 수 있게 하는 것이 바로 '반복문'입니다.

반복문은 이와 같은 반복되는 작업을 편리하게 처리해줍니다. 그럼 이러한 반복문에 대해 배워볼까요?

반복문은 반복되는 작업을 처리해주는 것으로 여러가지 반복문 문법이 있습니다. 사용하는 방식이 다르므로 상황에 따라 더 적합한 것을 선택하여 사용하시면 됩니다. 저희는 대표적인 반복문인 while문과 for문에 대해 배워보도록 하겠습니다.

while 반복문

while(조건) {
	반복되어 실행될 코드
    }

while반복문은 위와 같이 구성됩니다. 조건이 'true(참)'일 때 '반복되어 실행될 코드'가 실행됩니다.

그리고 조건이 false(거짓)이 되면 반복문을 종료합니다. 

alert를 통해 값을 하나씩 순차적으로 출력하고 싶을 때 어떻게 해야할까요?

while반복문을 이용하여 위와 같이 코드를 짤 수 있습니다. 

이제 위 코드를 통해 while반복문에 대해 이해해보도록 하겠습니다.

먼저 i 의 값은 0입니다. while문 안에 든 조건문은 i < 5 입니다. i 는 0보다 작으므로 i < 5 (i는 5보다 작다) 는 true입니다. 그러므로 while문 내부의 코드가 실행됩니다. alert를 통해 "0번 학생은 김커피입니다"를 출력하고, i의 값을 하나 증가시켜줍니다. 

i = i + 1; //i에 1을 더하겠다.
i++; //i의 값을 1 증가시키겠다.
i += 1; // i = i + 1 을 줄여서 쓴 것으로 같은 의미이다.

이때 i의 값이 1증가하는 것은 위와 같이 다양하게 표현될 수 있습니다. 주로 1의 값을 증가시키는 경우

i++ 을 많이 사용합니다. 만약 i의 값을 1 감소시키고 싶으면 i-- 이라고 쓸 수도 있습니다.1

이처럼 i 가 5가 되었을 때는 i<5라는 조건을 만족시키지 못하고 false를 반환하면서 조건이 '거짓(false)'이 되어 while문을 더이상 실행시키지 않고 반복문을 종료하는 것입니다.

이처럼 i=0이고 i<5라는 조건을 주어 while반복문을 실행하였을때 결과적으로 총 5번이 실행되어 배열에 있는 모든 값을 한번씩 출력하고 반복문을 안전히 종료할 수 있었습니다.

만약 반복문이 존재하지 않는다면, 

위와 같이 일일이 여러번 적어야하기 때문에 번거롭고, 코드 길이도 길어지게 되는 불편함이 있겠죠.

for반복문

위 코드의 3번째 줄을 보면 

i라는 변수의 값은 0으로 초기화하고, 조건은 i < 5 이고, 반복문이 한번 실행될때마다 i의 값을 1씩 증가시켜주겠다.

는 의미입니다. while문으로 바꿔서 써보면

이 되겠습니다.

while문과 for문을 둘다 사용할 수 있는 경우도 있지만, 주로 while문은 정확히 몇번 반복해야할지 모를때 사용합니다. 그리고 for문은 정확하게 반복횟수를 지정할 수 있기 때문에 반복횟수를 알고 있을때 사용하는 편입니다.

이러한 반복문에서 주의할 점은 조건이 true일 경우엔 계속해서 반복한다는 것입니다. 그래서 반복문을 사용할때는 꼭 반복문을 빠져나올 수 있는 부분을 작성해야합니다. 앞서 진행한 예제를 보면 i값이 1씩 증가하도록 하여 일정 횟수 이후에는 조건문이 false를 반환하여 반복문을 종료할 수 있도록 하였습니다. 만약 이러한 부분이 작성되어있지 않으면 반복문은 종료하지 않고 계속해서 반복하여 프로그램은 종료되지 않고 무한루프에 빠지게 됩니다.

1. 반복문을 사용하여 구구단을 출력해보세요.

(기존에는 alert를 이용하여 출력을 했으나 이번에는 console.log()를 이용해서 콘솔창에 출력을 하세요.)

콘솔창은 codesandbox에서 오른쪽 실행결과창 아래에 console이라고 적힌 부분을 클릭하면 볼 수 있습니다.

위와 같은 식으로 구구단이 콘솔창에 9단까지 출력되도록 하세요.

더보기

<힌트>

 

구구단은 1단부터 9단까지 입니다.

1단은 1에 1부터 9까지를 곱합니다. 그러므로 총 9번이 반복됩니다. (횟수가 정해져있으니 for문을 쓰는게 좋습니다) 2단 역시 2에 1부터 9까지를 곱합니다. 2단 역시 9번 반복됩니다.

이런식으로 9단까지하면 각 단마다 9번씩 곱셈을 하기 때문에 총 81번 반복하게 됩니다.

 

1. 앞서 곱셈은 * 연산자를 통해 한다고 배웠습니다.

2. 두 값을 곱해야하므로 2개의 변수가 필요합니다. 

3. 반복문 안에 반복문을 넣어서 쓸 수 있습니다. 이런 것을 '중첩반복문'이라고 합니다.

 

2. 아래 사진과 같이 콘솔창에 출력하도록 반복문을 작성해보세요.

*은 문자로 "*"로 쓰면 됩니다.