목차
<WIL : What I Learned>
- 성능 향상을 위해 if 대신 else를 쓴다
- if (1 <= a && a <= 10)를 if (1 <= a <= 10)로 쓰면 오류가 난다
- 컴파일러 성능의 향상으로 switch와 if else의 차이는 가독성/의미 외에는 중요하지 않다
03-1 if / if else / 중첩 / if else if 조건문
1. if 조건문
2. if else 조건문
3. 중첩 조건문
4. if else if 조건문
@ 예제 문제
1) 숫자 비교
2) 양수, 0, 음수 구분
3) 홀수, 짝수 구분
4) 월, 계절 구분
5) 학점을 등급으로 변환
03-2 switch 조건문, 조건부 연산자, 짧은 조건문
1. switch 조건문
2. switch 조건문을 if 조건문으로 변환
3. 조건부 연산자
4. 짧은 조건문 : 논리합/논리곱 연산자 사용
@ 예제 문제
1) 태어난 해를 띠로 변환
2) 조건부 연산자 실행결과
WIL : What I Learned
- 성능 향상을 위해 if 대신 else를 쓴다
- [궁금해] (if 조건문) if와 else의 성능 차이? else 통한 조건처리 횟수감소로 성능향상
if 조건문 대신 else if를 쓰는 이유는 조건 하나를 처리하는 횟수가 줄여 작게나마 성능 향상을 하기 위함
- if (1 <= a && a <= 10)를 if (1 <= a <= 10)로 쓰면 오류가 난다
1. if (1 <= a < 10)와 if (1 <= a && a < 10)은 다르다.
이유는 if (1 <= a < 10)의 경우 1 <= a가 한덩어리이고, (1 <= a) < 10이 한 덩어리이기 때문이다. 다시 말해, 10은 a가 아니라 (1 <=a)와 비교해야 한다.
2. if (1 <= a < 10)의 형태는 허용되지/적지않는 것이 좋다.
1 <= a < 10 < b < ...와 같이 끊임없이 만들 수 있기 때문
- 컴파일러 성능의 향상으로 switch와 if else의 차이는 가독성/의미 외에는 중요하지 않다
1. 결론
컴파일러 성능이 좋아졌기 때문에 성능에 상관없이 가독성, 의미를 중심으로 선택하면 됨
2. 그래도 어떤 걸 사용하는 것이 유리한지 굳이 따져본다면?
1) if else 사용하는 것이 유리한 상황
- 조건의 수가 적을 때
- 조건 결과가 불린일 때
- 조건이 복잡할 때
* 예를 들면, 다수의 논리 연산자를 포함하는 조건일 때
2) switch 사용권장 상황
- 조건의 수가 많을 때
- 사용자가 여러 기능을 유사한 빈도로 사용할 때
- 조건이 열거형, 상수, 알려진 유형과 같이 미리 정의된 값의 집합을 기반으로 할 때
* 예를 들면, 오류 코드, statuses, states, 객체 상태 등
if else
- strict condition check
- 장점 : 점프 테이블을 만드는 오버헤드가 없음
- 단점 : if, else if가 있을 때마다 조건 만족 여부를 확인하기 위한 인스트럭션이 계속해서 필요함
switch
- jump value catching
- 장점 : 시작할 때 입력받은 값을 확인하는 인스트럭션만 필요 (조건을 확인하는 인스트럭션은 필요하지 않음)
- 단점 : jump table 생성에 오버헤드 발생 가능성이 있음
*case가 4개 이상일 때 jump table을 생성
JS는 조건에 따라 어떤 문장을 실행하기 위해 크게 4가지 방법을 사용
1. if 조건문
2. switch 조건문
3. 조건부 연산자를 활용한 조건 분기
4. 논리 연산자를 활용한 조건 분기
03-1 if / if else / 중첩 / if else if 조건문
"비교 연산자, 논리 연산자를 활용해 조건을 만들고, 이 조건을 사용해 조건 분기를 함"
조건문? 프로그램의 흐름을 변경할 때 사용
조건 분기? 코드가 실행되는 흐름을 변경하는 것
if 조건문?
- 조건(불 자료형)에 따라서 코드를 실행하거나 실행하지 않을 때 사용하는 구문
- 조건이 한 문장이면 중괄호 생략 가능
else 구문? if 조건문 뒤에 사용하며, if 조건문이 거짓일 때 사용
중첩 조건문? 조건문을 중첩해 사용하는 경우
if else if 조건문? 중첩 조건문에서 중괄호를 생략한 형태로, 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용
1. if 조건문
- 불 표현식의 값이 true면 중괄호 안의 문장을 실행하고, false면 문장을 무시
if(불 값이 나오는 표현식) {
불 값이 참일 때 실행할 문장
}
2. if else 조건문
- 서로 반대되는 상황을 표현하는 구문으로 if 조건문 바로 뒤에 붙여서 사용
- 정반대되는 조건을 검사할 때 if else 조건문을 사용하면 if 조건문을 2번 사용하지 않아도 됨 (if 조건문의 조건 하나를 처리하는 횟수가 줄어 실제 성능 향상에 조금이나마 도움)
if(불 값이 나오는 표현식) {
불 값이 참일 때 실행할 문장
} else {
불 값이 거짓일 때 실행할 문장
}
3. 중첩 조건문
- 조건문 안에 조건문을 중첩해 사용
if(불 값이 나오는 표현식 1) {
if(불 값이 나오는 표현식 2) {
표현식 2가 참일 때 실행할 문장
} else {
표현식 2가 거짓일 때 실행할 문장
} // 표현식 1이 참이면 실행
} else {
if (불 값이 나오는 표현식 3) {
표현식 3이 참일 때 실행할 문장
} else {
표현식 3이 거짓일 때 실행할 문장
}
} // 표현식 1이 거짓이면 실행
4. if else if 조건문
- 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용
if (불 표현식) {
문장
} else if (불 표현식) {
문장
} else if (불 표현식) {
문장
} else if {
문장
}
@ 예제 문제
1) 숫자 비교
- [문제] 사용자로부터 숫자 2개를 입력받아 첫 번째 입력받은 숫자가 큰지, 두 번째 입력받은 숫자가 큰지를 구하는 프로그램을 만들어라
- 입력 코드
<script>
const n1 = Number(prompt('첫 번째 숫자를 입력하세요.'),'')
const n2 = Number(prompt('두 번째 숫자를 입력하세요.'),'')
if(n1 > n2) {
alert('첫 번째 숫자가 두 번째 숫자보다 큽니다.')
} else if(n1 < n2){
alert('두 번째 숫자가 첫 번째 숫자보다 큽니다.')
} else {
alert('두 숫자는 같습니다.')
}
</script>- 출력 결과
2) 양수, 0, 음수 구분
- [문제] 사용자에게 숫자를 입력받아 양수, 0, 음수를 구분하는 프로그램을 만들어라
- 입력 코드
<script>
const n = Number(prompt('숫자를 입력하세요.', ''))
if (n > 0) {
alert('양수입니다.')
} else if (n < 0) {
alert('음수입니다.')
} else {
alert('0입니다.')
}
</script>- 출력 결과
3) 홀수, 짝수 구분
- [문제] 사용자에게 숫자를 입력받아 홀수와 짝수를 구분하는 프로그램을 만들어라
- 입력 코드
<script>
const n = Number(prompt('숫자를 입력하세요.','')
if (n % 2 === 0) {
alert('짝수입니다.')
} else {
alert(('홀수입니다.'))
}
</script>- 출력 결과
4) 월, 계절 구분
- [문제] 사용자에게 월을 입력받아 계절을 구분하는 프로그램을 만들어라
- 입력 코드
<script>
const month = Number(prompt('월을 입력하세요.'))
if (3 <= month && month <= 5) {
alert(`${month}월은 봄입니다.`)
} else if (6 <= month && month <= 8) {
alert(`${month}월은 여름입니다.`)
} else if (9 <= month && month <= 11) {
alert(`${month}월은 가을입니다.`)
} else {
alert(`${month}월은 겨울입니다.`)
}
</script>- 출력 결과
5) 학점을 등급으로 변환
- [문제] 사용자로부터 학점을 입력받아 등급으로 변환하는 프로그램을 만들어라
- 입력 코드 (일부 코드 생략)
A학점(4.0 이상 4.5 미만)의 효율적인 표현 방법
첫 번째 방법 : 4.0 <= score
두 번째 방법 : 4.2 <= score && score <4.5
- 첫 번째 방법이 더욱 효율적임
- if 조건문은 위에서 아래로 else 구문은 이전의 조건이 맞지 않을 때 넘어오는 부분임
- 따라서 앞에서 이미 제외된 조건을 한 번 더 검사할 필요는 없음
<script>
const score = Number(prompt('학점을 입력하세요.',''))
if (score === 4.5){
alert(`${score}점은 A+입니다.`)
}
else if (4.0 <= score) {
alert(`${score}점은 A입니다.`)
}
// 하단 코드 생략
</script>
03-2 switch 조건문, 조건부 연산자, 짧은 조건문
1. switch 조건문
switch 조건문?
- 특정 값의 조건을 비교할 때 사용
- 기준이 되는 비교할 값과 switch 조건문 내에서 일치하는 case를 찾게되면 해당 case와 break 사이에 있는 코드를 실행함
- 기본 형태
switch (비교할 값) { // switch 조건문 내부에서 기준이 되는 비교할 값을 입력
case 조건A: // 입력한 표현식과 조건A가 같다면 case 키워드 다음에 오는 문장을 실행
break
case 조건B:
break
default: // 위의 모든 case가 거짓일 때 실행. default 키워드는 생략 가능
break
}
* break 키워드? switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드
- switch 조건문으로 홀수, 짝수를 구분하는 프로그램을 만들어라
<script>
const n = Number(prompt('숫자를 입력하세요.',''))
switch (n % 2) {
case 0:
alert('짝수입니다.')
break
case 1:
alert('홀수입니다.')
break
default:
alert('숫자가 아닙니다.')
break // 생략 가능(마지막이라 더이상 읽을 게 없다 보니 쓰지 않는 것이 일반적임)
}
</script>
2. switch 조건문을 if 조건문으로 변환
- 모든 switch 조건문은 if 조건문으로 바꿀 수 있음
- 하지만 범위를 조건으로 가지는 if 조건문은 switch 조건문으로 대체하기는 어려움 (불가능한 것은 아님)
[참고] Date getHours()
- 설명 : 0~23시의 로컬시간을 (자동으로 불러와) 출력함
- 코드
const d = new Date();
let hour = d.getHours();
*출처 : W3Schools Date getHours() 설명 게시글
- 예제 (잘 사용하지는 않지만 분석하기 좋은 코드임)
<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>
3. 조건부 연산자
조건부 연산자 (=삼항 연산자)?
- 조건문과 비슷한 역할을 하는 연산자
- 항을 3개 갖는 연산자는 조건부 연산자가 유일해 '삼항 연산자'라고 부르기도 함
- 기본 형태
불 표현식 ? 참일 떄의 결과 : 거짓일 떄의 결과
- 예제
<script>
const input = prompt('숫자를 입력하세요.','')
const number = Number(input)
const result = (number >= 0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.'
alert(result)
</script>
4. 짧은 조건문 : 논리합/논리곱 연산자 사용
짧은 조건문?
- 논리 연산자의 특성을 조건문으로 사용
- 과거에는 짧은 조건문을 이용한 할당을 많이 사용했으나, 다른 조건문 코드와 비교했을 때 이해하기 어려우므로 짧은 조건문을 사용하지 말자는 개발자도 많음
1) 논리합 연산자 사용한 짧은 조건문
- 불 표현식 || 불 표현식이 거짓일 때 실행할 문장
- 좌변이 참이므로 우변을 무시하는 경우
> true || console.log('불 표현식이 거짓일 때 실행할 문장')
true
- 좌변은 거짓이므로 우변이 참인지 거짓인지 검사하는 경우
> false || console.log('불 표현식이 거짓일 때 실행할 문장')
불 표현식이 거짓일 때 실행할 문장
undefined
2) 논리곱 연산자 사용한 짧은 조건문
- 결과가 거짓인 불 표현식 && 불 표현식이 참일 때 실행할 문장
@ 예제 문제
1) 태어난 해를 띠로 변환
- [문제] 사용자로부터 태어난 해를 입력받아 띠로 변환하는 프로그램을 만들어라
- 출력 결과
1번. if else if 조건문
<script>
const rawInput = prompt('태어난 해를 입력하세요.','')
const year = Number(rawInput)
const e = year % 12
let result
if (e === 0) { result = '원숭이'}
else if (e === 1) { result = '닭'}
// 중간 코드 생략. e === 2~11의 result = 개, 돼지, 쥐, 소, 호랑이, 토끼, 용, 뱀, 말, 양 순서임
alert(`${year}년생은 ${result} 띠입니다.`)
</script>
2번. switch 조건문
> 더보기 : [JavaScript] 세미콜론(;)은 꼭 써야 하는 걸까? 선택사항!
<script>
const rawInput = prompt('태어난 해를 입력하세요.','')
const year = Number(rawInput)
const e = year % 12
let result
switch (e) {
case 0:
result = '원숭이'
break
case 1: result = '닭'; break;
// 중간 코드 생략. e === 2~11의 result = 개, 돼지, 쥐, 소, 호랑이, 토끼, 용, 뱀, 말, 양 순서임
case 11: result = '양'; break;
}
alert(`${year}년생은 ${result} 띠입니다.`)
</script>
3번. split 메소드 사용
'문자열A'.split('문자열B') 메소드?
문자열A를 문자열B로 잘라서 배열을 만들어내는 메소드
<script>
const rawInput = prompt('태어난 해를 입력하세요.','')
const year = Number(rawInput)
const animal = '원숭이, 닭, 개, 돼지, 쥐, 소, 호랑이, 토끼, 용, 뱀, 말, 양'.split(',')
alert(`${year}년생은 ${animal[year % 12]} 띠입니다.`)
</script>
2) 조건부 연산자 실행결과
- [문제] 다른 실행 결과를 내는 코드는?
- true ? alert('출력A') : alert('출력B')
- false ? alert('출력B') : alert('출력A')
- true || alert('출력A')
- true && alert('출력A')
- [답안] 3번 (1, 2, 4번의 출력 결과는 '출력A', 3번은 true)
<script>
let a = true || alert('출력A')
console.log(a)
</script>
※ [출처] 이 게시글은 복습의 목적으로 작성하였습니다. <혼자서 공부하는 자바스크립트(한빛미디어)>에서 발췌한 내용이 포함되어 있으니 자세한 내용은 꼭 해당 서적을 참고하셔서 학습 이해에 도움 받으시길 바라겠습니다.
'언어 > JavaScript' 카테고리의 다른 글
| [혼공스] (자바스크립트) 챕터4. 배열(push, splice, indexOf), 반복문(for, while) (0) | 2022.11.02 |
|---|---|
| [혼공스] (JavaScript) 챕터2. 자료형, 상수, 변수, 자료형 변환 (0) | 2022.10.31 |
| [혼공스] (JavaScript) 챕터1. JS 개요, 개발환경 설정, 기본용어 (0) | 2022.10.31 |