WEBVTT

00:00:00.000 --> 00:00:03.272
지난번에 이어서, 동전던지기 게임을 만들어볼게요

00:00:03.272 --> 00:00:06.517
지난 시간에, 0과 1 사이의 임의의 숫자를 만들고

00:00:06.517 --> 00:00:08.787
반올림 해서 정수로 만들었어요

00:00:08.787 --> 00:00:11.954
그렇게 하면 0 또는 1을 얻을 수 있죠

00:00:11.954 --> 00:00:18.598
그리고 이 동전을 동그라미로 그리고 나오는 
숫자에 따라 보라색이나 노란색으로 표시되도록 했지요

00:00:18.598 --> 00:00:20.627
그 코드가 여기 있네요

00:00:20.627 --> 00:00:23.507
정수가 0이면 보라색으로

00:00:23.507 --> 00:00:25.687
그렇지 않으면 노란색으로 색칠하네요

00:00:25.687 --> 00:00:27.587
동전을 여기에 그렸죠

00:00:27.587 --> 00:00:32.455
이제 3개의 면을 가진 동전을 생각해봐요

00:00:32.455 --> 00:00:33.990
3번째 면을 추가해봅시다

00:00:33.990 --> 00:00:37.109
숫자를 0부터 2까지 만들어볼거에요

00:00:37.109 --> 00:00:41.693
그리고 반올림하면 
정수는 0, 1, 2 라는 값을 가질 수 있어요

00:00:41.693 --> 00:00:45.729
그런데 지금의 코드를 살펴보면
2가지 경우만 고려하고 있어요

00:00:45.729 --> 00:00:48.815
정수가 0이면 보라색
그렇지 않으면 노란색이죠

00:00:48.815 --> 00:00:51.885
이제 0이 아닌 경우는
1 또는 2가 되겠네요

00:00:51.885 --> 00:00:54.931
이전에 했던 걸 똑같이 적용해볼까요?

00:00:54.931 --> 00:00:57.443
else 블럭 안에, if-else를 다시 써 넣는거에요

00:00:57.443 --> 00:01:05.743
정수가 1이면 노란색으로 칠해요

00:01:05.743 --> 00:01:11.153
그렇지 않으면 빨간색으로 칠해요

00:01:11.153 --> 00:01:15.478
0이면 보라색

00:01:15.478 --> 00:01:18.984
그렇지 않고 1이면 노란색

00:01:18.984 --> 00:01:24.491
0도 아니고 1도 아닌 경우는 2이죠
그러면 빨간색을 칠해요

00:01:24.491 --> 00:01:28.566
버튼을 여러번 눌러볼게요
작동하네요!

00:01:28.566 --> 00:01:30.956
동전의 면을 더 추가하고 싶네요

00:01:30.956 --> 00:01:33.773
숫자를 0부터 3까지 만들고

00:01:33.773 --> 00:01:37.090
else 블럭 안에 if-else를 또 추가 하면 되겠죠

00:01:37.090 --> 00:01:40.158
그렇게 else로 감싸진 코드가 수없이 만들어 지게 됩니다

00:01:40.158 --> 00:01:44.704
아... 정말 좋지 않은 코드네요. 보기 안좋아요!

00:01:44.704 --> 00:01:48.881
코드는 읽기 쉽고 간결해야 합니다
못생기면 안되요

00:01:48.881 --> 00:01:50.600
그래서 무언가를 해볼거에요

00:01:50.600 --> 00:01:57.843
만약 우리가 else 블록 안에 하나의 if 문 혹은 
하나의 if-else문만 있고 그 밖에는 아무것도 없다면

00:01:57.843 --> 00:02:04.486
즉, stroke 함수나 
또 다른 if-else 구문이 없다면

00:02:04.486 --> 00:02:08.444
우리는 하나의 if 문 혹은 거기에 하나의 else 블록이 붙어 있을 수는 있어요

00:02:08.444 --> 00:02:13.156
그렇다면, 이 if 구문과 바로 앞줄을 합칠 수 있어요
그리고 이렇게 됩니다

00:02:13.156 --> 00:02:17.073
else if (integer ===1) 그러면 색깔을 노란색으로 채웁니다

00:02:17.073 --> 00:02:21.939
마지막 else는 다른것과 연결되지 않고
그냥 제일 마지막에 와서 붙습니다

00:02:21.939 --> 00:02:27.067
좋습니다! 결국, 이 코드는 
정수가 0이면 보라색

00:02:27.067 --> 00:02:30.235
그렇지 않고 1이면 노란색

00:02:30.235 --> 00:02:34.484
그렇지 않으면 (즉, 이들 두가지가 다 false이면) 
빨간색을 칠하는 겁니다

00:02:34.484 --> 00:02:37.738
restart 를 여러번 눌렀는데, 잘 작동하는거 보이죠?

00:02:37.738 --> 00:02:41.824
좋습니다! 이것의 장점은 우리가 원하는 만큼 
else-if룰 추가해서 사용할 수 있다는 겁니다

00:02:41.824 --> 00:02:44.703
동전의 면을 쉽게 늘릴 수 있겠죠

00:02:44.703 --> 00:02:48.009
한번 해봅시다. 숫자를 0~3까지 만들고

00:02:48.009 --> 00:02:56.188
else 블럭을 하나 더 추가했어요
else if (integer === 2)

00:02:56.188 --> 00:02:59.658
이 경우에는 빨간색을 칠해요

00:02:59.658 --> 00:03:02.658
마지막 else 블럭은 정수가 3인 경우입니다

00:03:02.658 --> 00:03:08.969
이 경우에는 파란색을 칠해볼께요. 좋습니다!

00:03:08.969 --> 00:03:12.816
이렇게 하려면, 제일 먼저 if 문으로부터 시작하고

00:03:12.816 --> 00:03:16.570
그 다음에 원하는 만큼의 else-if 가 추가 되고요

00:03:16.570 --> 00:03:18.698
제일 마지막 것은 옵션입니다

00:03:18.698 --> 00:03:21.900
하지만 else가 없으면, 앞의 모든 경우가 거짓인 경우에

00:03:21.900 --> 00:03:23.722
아무것도 실행하지 않겠죠

00:03:23.722 --> 00:03:26.883
하지만 이 코드에는 else가 있으니까

00:03:26.883 --> 00:03:30.354
이 경우에는 해당 코드블럭이 실행되겠죠

00:03:30.354 --> 00:03:37.017
이 경우는 if, else-if, else 를 사용하지 않고

00:03:37.017 --> 00:03:45.509
if 만을 사용해도 됩니다

00:03:45.509 --> 00:03:50.728
왜냐하면 정수는 0, 1, 2, 3 일수밖에 없으니까요

00:03:50.728 --> 00:03:54.223
모든 경우의 수가 겹치는 게 없어요
상호 배타적입니다

00:03:54.223 --> 00:03:56.609
이 코드 블럭들 중에서 하나만 실행됩니다

00:03:56.609 --> 00:03:59.218
하지만 항상 그런 경우들만 있는 것은 아닙니다

00:03:59.218 --> 00:04:02.356
숫자를 반올림 해서 정수로 만들지 않으면 어떻게 될까요?

00:04:02.356 --> 00:04:05.455
예를 들어 숫자를 반올림 해서 
정수로 만드는 것 없이 하면 어떻게 될까요?

00:04:05.455 --> 00:04:07.600
다른 부분은 화면을 그리는 코드입니다

00:04:07.600 --> 00:04:09.284
새로운 규칙을 만들어볼게요

00:04:09.284 --> 00:04:12.637
여전히 숫자는 0부터 3까지 만들거에요

00:04:12.637 --> 00:04:15.315
그리고 여기 숫자 선 위에 마크를 해볼께요

00:04:15.315 --> 00:04:26.028
그 숫자가 0과 1사이의 값이면 보라색을 칠할거에요

00:04:26.028 --> 00:04:30.504
1부터 2까지는 노란색

00:04:30.504 --> 00:04:35.533
2부터 3까지는 빨간색을 칠할거에요

00:04:35.533 --> 00:04:38.651
이것을 if와 else-if 구문으로 어떻게 표현할 수 있을까요?

00:04:38.651 --> 00:04:43.542
숫자가 1보다 작은 경우는

00:04:43.542 --> 00:04:50.796
이 경우는 0 과 3 사이에 있죠

00:04:50.796 --> 00:04:55.746
이 경우는 보라색을 칠하고

00:04:55.746 --> 00:05:06.122
그렇지 않고 2보다 작으면 노란색으로

00:05:06.122 --> 00:05:13.943
그렇지 않으면 빨간색으로 칠할거에요

00:05:13.943 --> 00:05:16.076
원하는 대로 작동하죠?

00:05:16.076 --> 00:05:19.307
1보다 작으면 이 범위에 있구요

00:05:19.307 --> 00:05:23.603
그렇지 않고, 1과 같거나 크고 2보다 작으면

00:05:23.603 --> 00:05:26.462
이 범위에 있죠. 노란색을 칠할거에요

00:05:26.462 --> 00:05:31.900
그렇지 않으면, 2보다 큰 크거나 같은 경우입니다
이 범위에 해당하죠

00:05:31.900 --> 00:05:36.277
이렇게 바꾸면 ( else if 에서 else를 삭제하면 )
숫자가 2보다 작은 경우라고 하면 안됩니다

00:05:36.277 --> 00:05:39.650
숫자가 3보다 작은 경우라고 해서도 안되죠

00:05:39.650 --> 00:05:42.932
숫자가 1보다 작은 경우는 2보다 작은 경우에 포함되니까요

00:05:42.932 --> 00:05:44.896
물론 3보다 작은 경우에도 포함되죠

00:05:44.896 --> 00:05:48.331
그러니 동전은 항상 빨간색으로 표시되겠죠

00:05:48.331 --> 00:05:52.361
이 경우에는 else-if 를 쓰는게 편리하겠죠