If/Else Part 2 (Video Version)

지난번에 이어서, 동전던지기 게임을 만들어볼게요

지난 시간에, 0과 1 사이의 임의의 숫자를 만들고

반올림 해서 정수로 만들었어요

그렇게 하면 0 또는 1을 얻을 수 있죠

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

그 코드가 여기 있네요

정수가 0이면 보라색으로

그렇지 않으면 노란색으로 색칠하네요

동전을 여기에 그렸죠

이제 3개의 면을 가진 동전을 생각해봐요

3번째 면을 추가해봅시다

숫자를 0부터 2까지 만들어볼거에요

그리고 반올림하면
정수는 0, 1, 2 라는 값을 가질 수 있어요

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

정수가 0이면 보라색
그렇지 않으면 노란색이죠

이제 0이 아닌 경우는
1 또는 2가 되겠네요

이전에 했던 걸 똑같이 적용해볼까요?

else 블럭 안에, if-else를 다시 써 넣는거에요

정수가 1이면 노란색으로 칠해요

그렇지 않으면 빨간색으로 칠해요

0이면 보라색

그렇지 않고 1이면 노란색

0도 아니고 1도 아닌 경우는 2이죠
그러면 빨간색을 칠해요

버튼을 여러번 눌러볼게요
작동하네요!

동전의 면을 더 추가하고 싶네요

숫자를 0부터 3까지 만들고

else 블럭 안에 if-else를 또 추가 하면 되겠죠

그렇게 else로 감싸진 코드가 수없이 만들어 지게 됩니다

아... 정말 좋지 않은 코드네요. 보기 안좋아요!

코드는 읽기 쉽고 간결해야 합니다
못생기면 안되요

그래서 무언가를 해볼거에요

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

즉, stroke 함수나
또 다른 if-else 구문이 없다면

우리는 하나의 if 문 혹은 거기에 하나의 else 블록이 붙어 있을 수는 있어요

그렇다면, 이 if 구문과 바로 앞줄을 합칠 수 있어요
그리고 이렇게 됩니다

else if (integer ===1) 그러면 색깔을 노란색으로 채웁니다

마지막 else는 다른것과 연결되지 않고
그냥 제일 마지막에 와서 붙습니다

좋습니다! 결국, 이 코드는
정수가 0이면 보라색

그렇지 않고 1이면 노란색

그렇지 않으면 (즉, 이들 두가지가 다 false이면)
빨간색을 칠하는 겁니다

restart 를 여러번 눌렀는데, 잘 작동하는거 보이죠?

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

동전의 면을 쉽게 늘릴 수 있겠죠

한번 해봅시다. 숫자를 0~3까지 만들고

else 블럭을 하나 더 추가했어요
else if (integer === 2)

이 경우에는 빨간색을 칠해요

마지막 else 블럭은 정수가 3인 경우입니다

이 경우에는 파란색을 칠해볼께요. 좋습니다!

이렇게 하려면, 제일 먼저 if 문으로부터 시작하고

그 다음에 원하는 만큼의 else-if 가 추가 되고요

제일 마지막 것은 옵션입니다

하지만 else가 없으면, 앞의 모든 경우가 거짓인 경우에

아무것도 실행하지 않겠죠

하지만 이 코드에는 else가 있으니까

이 경우에는 해당 코드블럭이 실행되겠죠

이 경우는 if, else-if, else 를 사용하지 않고

if 만을 사용해도 됩니다

왜냐하면 정수는 0, 1, 2, 3 일수밖에 없으니까요

모든 경우의 수가 겹치는 게 없어요
상호 배타적입니다

이 코드 블럭들 중에서 하나만 실행됩니다

하지만 항상 그런 경우들만 있는 것은 아닙니다

숫자를 반올림 해서 정수로 만들지 않으면 어떻게 될까요?

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

다른 부분은 화면을 그리는 코드입니다

새로운 규칙을 만들어볼게요

여전히 숫자는 0부터 3까지 만들거에요

그리고 여기 숫자 선 위에 마크를 해볼께요

그 숫자가 0과 1사이의 값이면 보라색을 칠할거에요

1부터 2까지는 노란색

2부터 3까지는 빨간색을 칠할거에요

이것을 if와 else-if 구문으로 어떻게 표현할 수 있을까요?

숫자가 1보다 작은 경우는

이 경우는 0 과 3 사이에 있죠

이 경우는 보라색을 칠하고

그렇지 않고 2보다 작으면 노란색으로

그렇지 않으면 빨간색으로 칠할거에요

원하는 대로 작동하죠?

1보다 작으면 이 범위에 있구요

그렇지 않고, 1과 같거나 크고 2보다 작으면

이 범위에 있죠. 노란색을 칠할거에요

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

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

숫자가 3보다 작은 경우라고 해서도 안되죠

숫자가 1보다 작은 경우는 2보다 작은 경우에 포함되니까요

물론 3보다 작은 경우에도 포함되죠

그러니 동전은 항상 빨간색으로 표시되겠죠

이 경우에는 else-if 를 쓰는게 편리하겠죠