배열에서 반복문 이용하기 (Video Version)

제 친구들을 출력하는 배열로 돌아왔어요

그런데 저를 굉장히 거슬리게 하는 것이 있네요

새로운 친구를 배열에 추가할 때마다
새로운 text 명령어를 추가해야 해요

Winston을 추가해 볼게요

자동으로 나타나지는 않아요

그를 나타나게 하고싶으면 'text(myFriends[3]'
을 쓰고 y좌표를 바꿔야 하죠

이렇게 하면 일이 너무 많아요

배열에 누군가를 추가할 때마다 text 명령어도
자동으로 되었으면 좋겠어요

반복문에 대해 배웠던 것 기억나세요?

반복문은 같은 코드를 반복해서
사용할 때 쓰면 좋은 방법이에요

마치 나무나 풍선들을 한 줄로
세운다거나 할 때 말이죠

반복문은 배열의 각 요소들에 대해
코드를 실행할 때 쓰면 좋아요

사실 여러분들이 배열을 쓸 때마다
반복문을 함께 사용하게 될거에요

둘은 굉장히 잘 어울리거든요

제 친구들의 이름을 출력할 때 매번
명령어를 쓰지 않고 반복문을 사용해볼게요

반복문을 사용할 때의 세 가지 질문들로 시작할게요

첫번째, 뭘 반복해야하나요?

여기 뭐가 반복되나요?
text 명령어죠.

매번 무엇을 바꿔야 하나요?

여기 뭐가 다른지 한번 살펴볼게요

y좌표와 현재 인덱스군요
그러니까 친구 번호와 y좌표

몇 번 반복해야하죠?
친구가 없을 때까지 반복해야해요

이제 필요한 것을 알았으니
반복문을 만들 수 있어요

반복문에서 우리가 어디까지 와 있는지를
알려주는 카운터 변수로 시작할게요

그러니까 'var friendNum = 0;' 으로요

0부터 시작할거에요
배열의 첫번째는 0인걸 기억하세요

다음에 여기 while문을 쓸게요

'while(friendNum < myfriends.length)'

현재 카운터 변수와
배열 요소의 총 개수를 비교할 거에요

반복문 안에는 text명령어를 쓸거에요

'text(myFriends['라고 쓰고, 여기에 숫자 대신 'friendNum'을 쓰세요
왜냐하면 그것이 현재의 순서를 말해주는 것이니까요

지금은 좌표를 고정시켜 둘게요

지금은 friendNum을 바꾸지 않아서
무한반복 에러가 발생해요

매번 friendNum을 증가시키는 걸 잊지마세요

아니면 조건이 항상 참이기 때문에
반복문이 무한히 수행될 거에요

여기 뭔가 생겼네요
예전 코드는 주석으로 처리할게요

모든 이름들이 나타났지만
다 겹쳐져 있어요

y좌표를 바꿔보도록 하죠

'friendNum * 30'으로 할게요

낫긴한데 Sophia가 화면 밖으로 벗어났군요
얘가 알면 별로 좋아하지 않을 것 같아요

여기 30을 더할게요
이제 30만큼 내려왔네요

아름답네요!
반복문을 사용해 배열을 출력하게 되었어요

이제 OhNoesGuy나 Sal을 array에 추가하면
바로 제 친구가 되는 거에요

항상 배열 전체를 훑기 때문에
새 친구들을 자동으로 보여줄 거에요

예전 코드는 더 이상 필요없으니 지울게요

이 코드가 어떤 일을 하는지 다시 살펴볼게요

friendNum = 0 부터 시작해요

그리고 friendNum이 배열의
현재 길이보다 작은지 체크해요

0은 6보다 작아요
참이죠

그러면 반복문안으로 들어가서
text명령어를 수행해요

처음에는 myFriends[0] 에요

다음엔 30 + 0 * 30 이고요

그러니까 Sophia를 (10,30)위치에 출력해요

그리고 friendNum++ 을 하니까 1이 되요

다시 돌아가서 "1은 myFriends.length
보다 작지? 응, 맞아" 를 하는거에요

그리고 또 하고, 또 하고, 또 계속 반복 해요

마지막으로 Sal이 나와요

기억하세요. Sal은 6번째 요소지만
0에서 시작하니까 인덱스는 5에요

5가 6보다 작나요?
그렇죠

myFriends[5]를 출력하게 돼요

그럼 이 값이 6이 될 거고
"6이 6보다 작나요?" 아뇨. 같죠

이건 거짓이 될 거에요
여섯 번째 요소를 출력하지 않겠죠

6번 인덱스엔 아무것도 없으니까 괜찮아요

6번째 요소는 있지만
6번 인덱스엔 아무것도 없어요

좀 헷갈릴 수 있지만
곧 익숙해 질거에요

좋아요. 이게 반복문이에요

만약 for문을 더 좋아하면
for문을 사용해도 돼요.

for문에서는 'for'랑 'var friendNum = 0;'
을 쓰고 여기 조건을 쓸게요

'friendNum < myFriends.length;'

그리고 증가하는 부분도요
'friendNum++'

for문 안에는 이 코드를 쓰면 돼요

여러분이 보이도록 x좌표를 바꿀게요

둘 다 완전히 같은 일을 해요

어떤 걸 사용할지는
여러분 마음이에요

요점은 반복문을 배열과 함께
사용하면 좋다는 거에요

왜냐면 여러분들을 훨씬
강력하게 해줄거니까요