Leeyanggoo
[JS] 자바스크립트 조건문 if문을 알아보자!! 본문
자바스크립트의 조건문은 프로그램 실행의 흐름을 제어하고 조절하는 데 사용됩니다.
주로 if, else, switch의 세 가지 조건문을 사용합니다.
알아볼까요!
if문과 else문
See the Pen javascript_if_1 by leeyanggoo (@leeyanggoo) on CodePen.
if 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나로, 주어진 조건식이 true일 경우에만 코드 블록을 실행합니다.
if 뒤의 괄호()에는 조건문이 들어갑니다.
위의 예제는 10보다 1이 더 크기 때문에 조건을 만족한 true이며 이에 따라 "실행되었습니다.(true)"라는 문구가 출력됩니다.
else문은 if 문과 함께 사용되며, if 문의 조건식이 false일 때 실행됩니다.
두 번째 if문은 괄호 속의 조건이 충족하지 않으므로 조건문의 결과는 false가 뜨게 됩니다.
따라서 출력되는 건 else문의 "실행되었습니다.(false)"가 출력됩니다.
else if문(다중 if문)
if 문과 else 문 사이에 추가되며, 이전 조건문의 조건식이 false일 경우 다음 조건식을 검사하는 조건문입니다.
See the Pen Javascript_if_2 by leeyanggoo (@leeyanggoo) on CodePen.
else if문은 변수에 따라 변하는 다양한 조건이 있을 때 사용합니다.
따라서 변수에 따라 true가 나오지 않고 false가 나온다면 다음의 조건식을 실행하고, 마지막까지 모든 조건이 false라면 마지막 else 블록을 실행합니다.
다중 if문은 점수에 따른 등급 평가 같은 곳에 사용됩니다.
위의 예제의 상수 num의 값이 100이므로 처음 조건인 'num == 90'과 맞지 않아 false이며, 다음 조건인 'num == 100'과 일치하므로 true입니다.
따라서 출력되는 건 "실행되었습니다.(num == 100)"입니다.
중첩 if문
중첩 if문을 사용하면 여러 개의 조건을 조합하여 더 복잡한 로직을 구현할 수 있습니다.
See the Pen Javascript_if_3 by leeyanggoo (@leeyanggoo) on CodePen.
중첩 if문 여러 조건을 만족하는 값을 찾을 때 유용합니다.
예를 들어 변수로 점수와 출석률 2가지가 있다고 가정할 때, if문으로 점수는 합격(true)지만 출석률이 좋지 않아 불합격(false)인 학생을 선별할 수 있습니다.
위의 예제는 변수 num의 값이 100이고 3개의 조건식의 조건이 'num == 100'이므로 else문을 제외한 if문의 "실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)"가 출력됩니다.
switch문
switch문은 여러 개의 조건식을 한번에 검사할 때 사용됩니다.
switch 문은 주어진 값과 case문의 값들을 비교하여 일치하는 경우 해당 코드 블록을 실행합니다.
switch(조건){
case 값 : 문장;
breack;
case 값 : 문장;
break;
.
.
.
default : 문장
See the Pen Javascript_switch by leeyanggoo (@leeyanggoo) on CodePen.
위는 switch문을 사용하여 변수 'fruit'의 값에 따라 다른 메세지를 출력하는 예제입니다.
위 코드에서 switch문은 fruit 변수의 값이 case문에 해당하는 값과 일치하는지 확인하며, 해당하는 case문의 코드 블록을 실행합니다. 만약 case문 중 일치하는 값이 없는 경우 default문의 코드 블록을 실행합니다.
위 코드에서 fruit 변수의 값이 "apple"이기 때문에 case "apple":의 코드 블록이 실행되며, "사과입니다."가 출력됩니다.
2개 이상의 조건 체크하기 (논리 연산자)
2개 이상의 조건을 체크해야 하는 경우에는 앞에서 살펴봤던 '논리 연산자'를 사용해 조건식을 만들어야 합니다.
| 논리 연산자 종류 | 속성 설명 |
| && (AND 연산자) | a && b, a와 b 모두 true일 때 true가 됩니다. // true && true = true // true && false = false // false && true = false // false && false = false |
| || (OR 연산자) | a || b, a와 b 중 하나만 true면 true가 됩니다. // true || true = true // true || false = true // false || true = true // false || false = false |
| ! (NOT 연산자) | !a, a가 true면 false, false면 true로 반환합니다. |
See the Pen Javascript_if_4 by leeyanggoo (@leeyanggoo) on CodePen.
위 코드에서 && 연산자는 두 개의 조건이 모두 참(true)인 경우에만 전체 조건이 참이 되므로, document.write 문이 실행됩니다.
See the Pen Javascript_if_5 by leeyanggoo (@leeyanggoo) on CodePen.
반면, || 연산자를 사용하면 두 개의 조건 중 하나 이상이 참인 경우에 전체 조건이 참이 됩니다.
위의 코드는 || 연산자를 사용하여 age와 weight 변수의 값 중 하나라도 조건에 해당하는 경우 document.write 문을 실행하는 예시입니다.
