혼공학습단 11기(完)

[혼공스] 03 - 2 정리

jaeheon0520 2024. 1. 12. 03:44

 

오늘은 03 - 2장의 내용을 정리해 보자.

 

03 - 2장의 제목은 'switch 조건문과 짧은 조건문'으로, 조건문을 맛있게 사용하는 법에 관해서 설명하고있다.

 

외워야하는 것은 몇 가지 없지만 활용되는 영역이 고정적인 코드들이 등장하니까 해당 부분을 꼭 짚고 넘어가야 한다.

 

그럼 정리 시작!

 

Switch 조건문

switch (자료) {
 case 조건A:
 break
 case 조건B: // 조건A가 '거짓'이고 조건B가 '참'일때
 break
 default:  // 생략가능
 break
}

 

if 문을 switch 문으로 전환할 수 있는데, 범위를 조건으로 가지는 if 조건문을 switch 조건문으로 대체하기는 어렵다.

재미있는 예제가 있으니 참고하고 넘어가면 좋을 것 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const date = new Date()
        const hour = date.getHours()

        switch (true) {
            case hour < 11:
                alert('아침 먹을 시간입니다.')
                break
            case hour < 15:
                alert('점심 먹을 시간입니다.')
                break
            default:
                alert('저녁 먹을 시간입니다.')
                break
        }
    </script>
</head>
<body>
</body>
</html>

 

조건부 연산자

불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

 

자바스크립트에서는 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 한다.

 

짧은 조건문

1. 논리합 연산자를 활용한 짧은 조건문

 

자바스크립트는 참이 확실할 때 추가 연산을 진행하지 않는다. 즉, 논리합 연산자의 좌변이 참이면 우변을 실행하지 않는다.

불 표현식 || 불 표현식이 거짓을 때 실행할 문장

 

2. 논리곱 연산자를 활용한 짧은 조건문

 

논리곱 연산자는 좌변이 거짓이면 우변을 실행하지 않는다.

결과가 거짓인 불 표현식 && 불 표현식이 참일 때 실행할 문장

 

다음 코드를 통해 논리합 연산자를 복습하면 좋을 것 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const input = prompt('정수를 입력해주세요')
        const last = Number(input[input.length - 1])

        if (last === 0 || last === 2 || last === 4 || last === 6 || last === 8)
            alert(`${input}은 짝수입니다`)
        else
            alert(`${input}은 홀수입니다`)
    </script>
</head>
<body>
</body>
</html>

 

위 코드를 작성할 때 살짝 헷갈린 부분이 있는데 문자열의 길이를 구할 때는 문자열.length() 가 아니라 문자열.length 즉 메소드가 아니라 속성을 사용한다.

 

누적예제

사용자에게 태어난 연도를 입력받아 띠를 출력하는 프로그램을 작성해봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const input = Number(prompt('태어난 해를 입력해주세요'))
        const e = input % 12

        let result = ''

        if (e === 0)
            result = '원숭이'
        else if (e === 1)
            result = '닭'
        else if (e === 2)
            result = '개'
        else if (e === 3)
            result = '돼지'
        else if (e === 4)
            result = '쥐'
        else if (e === 5)
            result = '소'
        else if (e === 6)
            result = '호랑이'
        else if (e === 7)
            result = '토끼'
        else if (e === 8)
            result = '용'
        else if (e === 9)
            result = '뱀'
        else if (e === 10)
            result = '말'
        else
            result = '양'

        alert(`${input}년에 태어났다면 ${result}띠 입니다`)
    </script>
</head>
<body>
</body>
</html>

 

잘 작동하긴 하지만 굉장히 지저분한 코드이다. 좀 더 최적화 해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const input = Number(prompt('태어난 해를 입력해주세요'))
        const tti = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',')

        alert(`${input}년에 태어나셨다면 ${tti[input % 12]}띠입니다`)
    </script>
</head>
<body>
</body>
</html>

 

split() 메소드를 활용하였다. '문자열A'.split('문자열B') 메소드는 문자열A를 문자열B로 잘라서 배열을 만들어내는 메소드이다. 이때 콤마를 기준으로 자름으로 콤마 뒤에 띄어쓰기를 하지 않도록 주의하자. split 메소드는 중요하니까 잘 기억해두자.

 

확인문제 1.

다음 코드가 어떤 형태로 실행될 지 예측해보세요.

<script>
 const result = (100 > 200)
 ? prompt('값을 입력해주세요')
 : confirm('버튼을 클릭해주세요')
 
 alert(result)
</script>

 

풀이: 조건부 연산자에서 불 표현식이 false이므로 confirm('버튼을 클릭해주세요') 코드가 실행된다. 이 코드가 실행되면 [확인]과 [취소] 버튼을 클릭할 수 있는 창이 나타난다. 이 창에서 [확인] 버튼을 클릭하면 true, [취소] 버튼을 클릭하면 false 가 적혀있는 창이 한 번 더 나타난다. confirm() 함수를 제대로 확인하지 않고 넘어갔었는데 이번 기회에 짚고 넘어갈 수 있었다.

 

확인문제 2.

[누적 예제: 태어난 연도를 입력받아 띠 출력하기] 예제에서 if 조건문을 switch 조건문으로 변경해서 구현해보세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const input = Number(prompt('태어난 해를 입력해주세요'))
       
        let result = ''

        switch (input % 12) {
        case (0):
            result = '원숭이'; break;
        case (1):
            result = '닭'; break;
        case (2):
            result = '개'; break;
        case (3):
            result = '돼지'; break;
        case (4):
            result = '쥐'; break;
        case (5):
            result = '소'; break;
        case (6):
            result = '호랑이'; break;
        case (7):
            result = '토끼'; break;
        case (8):
            result = '용'; break;
        case (9):
            result = '뱀'; break;
        case (10):
            result = '말'; break;
        case (11):
            result = '양'; break;
        }

        alert(`${input}년에 태어났다면 ${result}띠입니다`)
    </script>
</head>
<body>
</body>
</html>

 

switch 문에는 반드시 break 가 있어야 한다! (없으면 마지막 케이스까지 흐름)

 

확인문제 3.

'태어난 연도를 입력받아 띠 출력하기' 예제에서 동물 이름을 쥐부터 '자, 축, 인, 묘, 진, 사, 오, 미, 신, 유, 술, 해'로 변경하고, 입력한 연도의 '갑, 을, 병, 정, 무, 기, 경, 신, 임, 계'를 계산합니다. 이 둘을 합쳐 출력하는 프로그램을 만들어보세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        const input = Number(prompt('태어난 해를 입력해주세요.'))
        const tti = '신,유,술,해,자,축,인,묘,진,사,오,미'.split(',')
        const gan = '경,신,임,계,갑,을,병,정,무,기'.split(',')

        alert(`${input}년은 ${gan[input % 10]}${tti[input % 12]}년입니다.`)
    </script>
</head>
<body>
</body>
</html>

 

split() 메소드를 이용하여 문자열을 잘라서 배열을 만들었다.

 

03 - 2장의 내용은 여기서 마무리된다.

 

Switch 조건문을 복습하였고, 조건부 연산자, 짧은 조건문에 대해 학습했다. switch 조건문에서는 break를 꼭 사용하도록 하자. 문자열에서 split() 메소드를 사용하는 방법도 익혀보았는데 중요한 부분이니 잘 기억하도록 하자.

 

오늘 하루도 쌓였다.

저작자표시 비영리 변경금지 (새창열림)