[ JavaScript ] 조건문 if문

📌 제어문 ( control flow statements )

프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다.

이러한 제어문에는 조건문, 반복문 등이 포함된다.

 

📌 조건문 ( conditional statements )

조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다.

조건문 중에서 가장 기본이 되는 실행문은 if 문이다.

 

자바스크립트에서 사용할 수 있는 조건문

1.  if 문

2. if / else 문

3. if / else if / else 문

4. switch 문

---

🤍 if 문

if 문은 표현식의 결과가 참 ( true ) 이면 주어진 실행문을 실행하면, 거짓 ( false ) 이면 아무것도 실행하지 않는다.

 

if문을 순서대로 표현하면 다음 그림과 같이 표현할 수 있다.

http://www.tcpschool.com/javascript/js_control_condition

∎ if 문의 문법

if (표현식) {

    표현식의 결과가 참일 때 실행하고자 하는 실행문;

}

∎ 예제

var x = 10, y = 20;

if (x == y) {

    document.write("x와 y는 같습니다.");

}

if (x < y) {

    document.write("x가 y보다 작습니다.");

}

if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.

    document.write("x가 y보다 큽니다.");

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year == 2015) {
  alert( "정답입니다!" );
  alert( "아주 똑똑하시네요!" );
}

if 문을 쓸 때는 조건이 참일 경우 실행되는 구문이 단 한 줄이더라도 중괄호 { } 를 사용해 코드를 블록으로 감싸는 것을 추천한다.

이렇게 하면 코드 가독성이 증가한다.

---

🤍 else 문

if 문과 같이 사용할 수 있는 else 문은 if 문은 표현식 결과가 거짓 ( false ) 일 때 주어진 실행문을 실행한다.

 

if / else 문을 순서도로 표현하면 다음 그림과 같이 표현할 수 있다.

http://www.tcpschool.com/javascript/js_control_condition

∎ else 문의 문법

if (표현식) {

    표현식의 결과가 참일 때 실행하고자 하는 실행문;

} else {

    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;

}

∎ 예제

var x = 10, y = 20;

if (x == y) {

    document.write("x와 y는 같습니다.");

} else {

    if (x < y)

        document.write("x가 y보다 작습니다.");

    else // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.

        document.write("x가 y보다 큽니다.");

}

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year == 2015) {
  alert( '정답입니다!' );
} else {
  alert( '오답입니다!' ); // 2015 이외의 값을 입력한 경우
}

else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

---

🤍 else if 문

else if 문은 if 문처럼 표현식을 설정할 수 있으므로, 중첩된 if 문을 좀 더 간결하게 표현할 수 있다.

하나의 조건문 안에서 if 문과 else 문은 단 한번만 사용할 수 있다.

하지만 else if 문은 여러번 사용되어 다양한 조건을 설정할 수 있다.

 

if / else if / else 문을 순서도로 표현하면 다음 그림과 같이 표현할 수 있다.

http://www.tcpschool.com/javascript/js_control_condition

∎ else if 문의 문법

if (표현식1) {

    표현식1의 결과가 참일 때 실행하고자 하는 실행문;

} else if (표현식2) {

    표현식2의 결과가 참일 때 실행하고자 하는 실행문;

} else {

    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;

}

∎ 예제

var x = 10, y = 20;

if (x == y) {

    document.write("x와 y는 같습니다.");

} else if (x < y) {

    document.write("x가 y보다 작습니다.");

} else { // x > y인 경우

    document.write("x가 y보다 큽니다.");

}

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

위 예시에서, 자바스크립트는 조건 year < 2015 를 먼저 확인한다. 

이 조건이 거짓이라면 다음 조건 year > 2015 를 확인한다. 이 조건 또한 거짓이라면 else 절 내의 alert를 실행한다.

 

else if 블록을 더 많이 붙이는 것도 가능하다. 마지막에 붙는 else 는 필수가 아닌 선택 사항이다.

---

🤍 중첩 if 문

조건문 안에 조건문이 있으면 중첩 if문이라고 한다.

 

∎ else if 문의 문법

if ( 조건식1 ) {
	if ( 조건식 2 ) {
       //실행문
   }
}

if문 안에 또 다른 if문을 삽입할 때 사용한다.

 

∎ 예제

var a = 20;
var b = 40;

if ( a !== b ) {
	if ( a > b ) { console.log("a는 b보다 크다"): }
    else { console.log("a는 b보다 작다"); }
} else { console.log("a와 b는 같다"); }

 

 

 

---

01. 조건문 if 문 설명

http://www.tcpschool.com/javascript/js_control_condition

코딩교육 티씨피스쿨

https://ko.javascript.info/ifelse

if와 '?'를 사용한 조건 처리