[혼공스] 03 - 2 정리

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

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

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

그럼 정리 시작!

Switch 조건문

switch (자료) {

case 조건A:

break

case 조건B: // 조건A가 '거짓'이고 조건B가 '참'일때

break

default: // 생략가능

break

}

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

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

<!DOCTYPE html>

<head>

<title>Document</title>

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>

<head>

<title>Document</title>

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>

<head>

<title>Document</title>

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>

<head>

<title>Document</title>

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>

<head>

<title>Document</title>

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>

<head>

<title>Document</title>

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() 메소드를 사용하는 방법도 익혀보았는데 중요한 부분이니 잘 기억하도록 하자.

오늘 하루도 쌓였다.

저작자표시 비영리 변경금지

'혼공학습단 11기(完)' 카테고리의 다른 글

[혼공스] 04 - 1 '배열' 정리 (0)	2024.01.13
[혼공스] 2주차 미션 (0)	2024.01.12
[혼공스] 03 - 1 정리 (1)	2024.01.11
[혼공스] 02 - 3장 연습문제 풀이 (1)	2024.01.10
[혼공스] 02 - 3 정리 (1)	2024.01.09

하루를 쌓는 블로그

[혼공스] 03 - 2 정리

Switch 조건문

조건부 연산자

짧은 조건문

누적예제

확인문제 1.

확인문제 2.

확인문제 3.

'혼공학습단 11기(完)' 카테고리의 다른 글

티스토리툴바

[혼공스] 03 - 2 정리

Switch 조건문

조건부 연산자

짧은 조건문

누적예제

확인문제 1.

확인문제 2.

확인문제 3.

'혼공학습단 11기(完)' 카테고리의 다른 글

관련글

티스토리툴바