[JavaScript] 자바스크립트 if문, else-if문 사용법 & 예제 정리

조건문이란?

조건문은 조건식의 값이 참(true)인지, 거짓(false)에 따라 자바스크립트 코드를 제어하는 문법으로 조건문 if문의 경우에는 if문, else if문, else문 3가지 키워드를 사용하여 조건문은 특정 조건이 참이면 특정 코드 블록을 실행하고, 거짓이면 다른 코드 블록을 실행합니다. 특정 조건이 충족되었을 때만 특정 코드 블록을 실행하기 때문에 프로그램의 흐름을 효과적으로 제어할 수 있고, 프로그래밍적 유연성이 향상시킬 수 있습니다.

 

---

 

 if문 사용법 

if (조건) {
  // 조건이 참일 경우 실행되는 코드 블록
} else {
  // 조건이 거짓일 경우 실행되는 코드 블록
}

if문은 조건식을 만족(true)일때만 코드를 실행하고 조건을 만족하지 않다면 else문이 실행됩니다. 여기서 else는 선택사항으로 기술하지 않으면 if문만 체크하고 다음 코드로 넘어갑니다.

 

if문 사용 예제

See the Pen if문1 by wjdxo513 (@wjdxo513) on CodePen.

 

 

x의 값은 10이고 양수이기 때문에 if문의 조건을 만족(true)하여 div태그에 'x는 양수입니다.' 텍스트를 추가하는 코드가 실행된 것을 보실 수 있습니다.

 

---

 else if 문 

if (조건1) {
  // 조건1이 참일 경우 실행되는 코드 블록
} else if (조건2) {
  // 조건2이 참일 경우 실행되는 코드 블록
} else if (조건3) {
  // 조건3이 참일 경우 실행되는 코드 블록
} else {
  // 모든 조건이 거짓일 경우 실행되는 코드 블록
}

여러 개의 조건을 검사하려면 else if를 사용할 수 있습니다. else if의 횟수는 무한정 늘릴 수 있으며 하나의 조건을 만족(true)가 되면 코드를 실행하고 나머지 else if, else 조건문은 무시됩니다. 마찬가지로 else는 선택사항으로 명하지 않으셔도 됩니다.

 

 

else if문 사용 예제

See the Pen if문2 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제에서 x의 값은 30이기 때문에 3번째 else if 문의 조건을 만족(true)하고, 해당 조건문의 코드를 실행하여 div태그에 'x는 30입니다.' 텍스트를 추가하는 코드가 실행된 것을 보실 수 있습니다.

 

---

 삼항연산자 

조건 ? 값1 : 값2;

만약 참/거짓 하나의 조건문만 사용한다면 삼항연산자를 사용하면 한 줄로 표현할 수도 있습니다. 삼항 연산자는 조건에 따라 두 가지 값 중 하나를 반환하는 간단한 표현식입니다.

• 조건: 평가되는 조건입니다. 이 조건이 참(true)이면 값1이 반환되고, 거짓(false)이면 값2가 반환됩니다.
• 값1: 조건이 참일 경우 반환되는 값입니다.
• 값2: 조건이 거짓일 경우 반환되는 값입니다.

 

삼항연산자 사용예제

See the Pen if문3 by wjdxo513 (@wjdxo513) on CodePen.

 

예를 들어 변수 age가 20 이상이면 "성인"을, 그렇지 않으면 "미성년자"를 출력하게끔 텍스트를 추가한다면 위와 같이 작성할 수 있겠습니다.