조건문🐷
프로그래밍에서 가장 중요한 도구중 하나입니다.
Boolean 의 값인 true 또는 false 값 둘 중 하나를 이용해서 어떠한 조건에 따라서 실행결과를 나눠줍니다.
if(true 또는 false){
}괄호안에 들어가는 조건을 평가하여 그 결과가 true이면 코드 블록이 실행되고 false라면 실행 되지 않습니다.
// 변수 선언
const a = 10;
const b = 20;
// 조건문
if (a > b) {
// 조건이 참일 때 실행할 문장
console.log("a가 b보다 큽니다.");
} else {
// 조건이 거짓일 때 실행할 문장
console.log("a가 b보다 작거나 같습니다.");
}어떤 결과가 나올까요?
과연 정답은?"a가 b보다 작거나 같습니다"
조건문은 간단하면서도 복잡해 보일 수 있습니다.
가독성을 위해선 조건이 true일 경우 실행되는 구문이 단 한줄이더라도 중괄호{}을 사용해 코드블록을 감싸는 것을 강력 추천해드립니다.
감싸지 않은 예시
let year = 2015;
if (year == 2015) alert( '정답입니다!' );조건이 true 일때 복수의 문을 실행한 예시
let year = 2015;
if (year == 2015) {alert( "정답입니다!" ); alert( "아주 똑똑하시네요!" ); alert( "개짱이네!" ); alert( "소름돋아!" );}감싼 예시
let year = 2015;
if (year == 2015) {
alert( "정답입니다!" );
alert( "아주 똑똑하시네요!" );
alert( "개짱이네!" );
alert( "소름돋아!" );
}우리들의 시야는 코드를 읽을 때 수평보단 수직으로 이동한다고 하니 옆으로 나열 하는것보단 아래로 내려서 정리해주는게 편-안 하다고 합니다.
불린형으로의 변환
if문은 괄호 안에 들어가는 표현식을 평가하고 그 결과를 Boolean 값으로 변환합니다.
JavaScript에서 Boolean 값으로 변환되는 값은 다음과 같습니다.
- 숫자 0, 빈 문자열 " ", null, undefined, NaN 의 값들은 모두 거짓(false)으로 변환되고
이 외의 값은 모두 참true으로 변환됩니다.
true을 출력하는 예시
const a = 1;
if (a) {
console.log("참");
} else {
console.log("거짓");
}false을 출력하는 예시
const a = null;
if (a) {
console.log("참");
} else {
console.log("거짓");
}'else절'
if 문엔 else 절을 붙일 수 있습니다. 위에선 true 와 false 값만 나타냈다면
else 를 이용해서 조건이 거짓일때 실행되는 코드블록을 만들 수 있습니다.
// 사용자로부터 나이를 입력받습니다.
const age = prompt("나이를 입력하세요.");
// 나이를 정수로 변환합니다.
const age = Number(age);
// 조건문
if (age >= 19) {
// 조건이 참일 때 실행할 문장
console.log("성인입니다.");
} else {
// 조건이 거짓일 때 실행할 문장
console.log("미성년자입니다.");
}- else 는 하나의 if 문에서 한번만 사용 할 수 있기 때문에 추가적으로 else if 문을 사용해서
여러번 사용할 수 있습니다. 그 방법을 알아보도록 하겠습니다.
'else if’로 복수 조건 처리하기
if 문에 else 문을 붙이는 방법은 if 문의 조건이 거짓일 때 실행할 문장 뒤에
else if 키워드를 입력하고 다음 조건을 입력합니다.
else if 문은 이러한 경우에 유용하게 쓰입니다.
- 하나의 조건으로 모든 경우를 처리할 수 없는경우
- 여러가지 조건에 따라 다른 결과를 출력해야 하는 경우
예시
let age = Number(prompt('제 나이를 맞춰보세요', '숫자를 입력하세요'));
if (age < 35) {
alert( '숫자를 좀 더 올려보세요.' );
} else if (age > 35) {
alert( '숫자를 좀 더 내려보세요.' );
} else if (age == 35) {
alert( '딩동댕!' );
} else {
alert( '숫자를 입력하세요. ');
}else if 블록을 더 많이 붙이는 것도 가능합니다. 마지막에 붙는 else는 필수가 아닌 선택 사항입니다.
- 작은 Tip
let age = Number(prompt('제 나이를 맞춰보세요', '숫자를 입력하세요'));
에서 prompt() 함수의 두번째 인수인 ' 숫자를 입력하세요 ' 는
사용자에게 표시할 메세지로 사용자에게 숫자 형식을 입력할 가능성을 높여주는 역할을 하고 있습니다.
조건부 연산자 ' ? '
'물음표(question mark)연산자' 라고도 불리며 '삼항(ternary)연산자' 라고 부르기도 합니다.
JavaScript에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일합니다.
let number = 10;
if (number % 2 === 0) {
console.log("짝수입니다.");
} else {
console.log("홀수입니다.");
}이런 if 문을 삼학식으로 바꾸면 다음과 같습니다
* 조건 ? 참일 때 실행할 표현식 : 거짓일 때 실행할 표현식 *
let message = (number % 2 === 0) ? "짝수입니다." : "홀수입니다.";
console.log(message);
물음표 연산자(삼항 연산자)는 우선순위가 낮으므로 비교연산자가 먼저 실행되고 난 뒤에 실행됩니다.
조건부 연산자는 이런 if 문보다 간결하게 조건을 처리할 수 있습니다.
그렇지만 일반적으로 삼항 연산자가 if 문 연산자보다 가독성이 떨어진다고 말하기도 합니다
- 중첩하여 사용 할 수 있으므로, 코드가 복잘해질 수 있고 길어질 수 있습니다.
- 조건과 참일 때 실행할 표현식, 거짓일때 실행할 표현식을 한번에 파악하기가 어려울 수 있습니다.
다중 ' ? '
물음표 연산자?를 여러개 연결하면 복수의 조건을 처리할 수 있습니다.
let age = prompt('나이를 입력해주세요.', 18);
let message = (age < 3) ? '아기야 안녕?' :
(age < 18) ? '안녕!' :
(age < 100) ? '환영합니다!' :
'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
alert( message );물론 if..else를 사용하여 아래와 같이 변형할 수 있습니다.
if (age < 3) {
message = '아기야 안녕?';
} else if (age < 18) {
message = '안녕!';
} else if (age < 100) {
message = '환영합니다!';
} else {
message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}부적절한 ' ? '
물음표?를 if대용으로 쓰는 경우가 종종 있습니다.
let age = 20;
let gender = 'male';
let status = (age >= 18 && gender === 'male') ? '성인 남성' : '미성년자 또는 여성';
console.log(status);위의 코드에서는 나이와 성별을 모두 고려한 다수의 조건을 표현하고 있습니다.
코드가 복잡해지면 가독성이 떨어질 수 있고, 디버깅이 어려워집니다.
여러조건을 동시에 검사할 때에는 if 문이 더 적절한 선택일 수 있습니다.
이러한 문제점을 피하기 위해 if문을 사용하여 보다 명시적인 블록을
작성하는 것이 좋습니다.
가독성이 좋아지고, 복잡한 조건을 다루기에 적합합니다.
let age = 20;
let gender = 'male';
let status;
if (age >= 18 && gender === 'male') {
status = '성인 남성';
} else {
status = '미성년자 또는 여성';
}
console.log(status);- 물음표 연산자는 간단한 조건을 다룰 때 유용하지만, 코드의 가독성과 유지보수성을 고려하여
적절하게 if 문을 사용하는 것이 좋습니다.
심심풀이 예제
*
3월, 4월, 5월: '봄'
6월, 7월, 8월: '여름'
9월, 10월, 11월: '가을'
12월, 1월, 2월: '겨울'
*
let month = Number(prompt('월을 입력하세요'));
let season;
if (month >= 3 && month <= 5) {
season = '봄';
} else if (month // 6 && month // 8) {
season = '여름';
} else if (month >= 9 && month <= 11) {
season = '가을';
} else if (month /// 12 || month /// 1 || month /// 2) {
season = '겨울';
} else {
season = '유효하지 않은 월입니다.';
}
console.log(`현재는 ${season} 입니다.`);- '///'안에 적절한 비교연산자를 넣어 코드를 완성하세요.
- console.log 안에 있는 ${ } 는 무엇이고 어떤때에 사용하는지 말해주세요.
