[Let's Get IT 자바스크립트 프로그래밍] 2장 기본 문법 배우기 - 조건문

조건문

조건문

조건문은 주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문입니다.
if 뒤에 나오는 소괄호 안에 조건(식)을 넣고, 다음 줄에 실행문을 넣으면 됩니다.

들여쓰기는 중요하지 않지만 보기 좋게 두 칸을 띄어 씁니다. 

if (조건식)
  실행문;

조건문은 조건식과 실행문으로 구분됩니다.

조건식이 참인 값이면 내부의 실행문이 실행되고, 거짓인 값이면 실행문이 실행되지 않습니다.

만약 실행문이 둘 이상이면 실행문들을 중괄호로 감쌉니다.

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

if(true) {
  console.log('Hello, if!');
}

// Hello, if!

if(false) {
  console.log('Hello, if!');
}
// 출력결과 없음

조건식이 true는 참인 값이므로 실행문이 실행되고, 조건식이 false면 거짓인 값으로 콘솔에 실행결과가 표시되지 않습니다.

let condition = true;
if(condition) {
  console.log('Hello, if!);
}

// Hello, if!

조건식에 변수를 넣어도 변수의 값이 true라는 값을 가지기 때문에 실행문이 실행됩니다.

if(0) {
  console.log('Hello, if!');
}

0은 불 값으로 형 변환되면 false가 되므로 실행문이 실행되지 않습니다.

중괄호 안에서 여러 개의 실행문을 실행할 수도 있습니다. 조건식이 참인 값이라면 실행문은 위에서 아래로 차례대로 실행됩니다.

if(true) {
  console.log('Hello, if!');
  console.log('Hello, again!');
}

Hello, if!
Hello, again!

조건문으로 변수의 값을 바꿀 수도 있습니다.

let value = '사과';
let condition = true;
if(condition) {
  value = '바나나';
}
console.log(value);
// 바나나

else를 사용해 두 방향으로 분기하기

if (조건식) { // 조건식이 참인 값일 때 실행
  실행문;
} else { // 조건식이 거짓인 값일 때 실행
  실행문;
}

조건식이 참일 때와 거짓일 때 모두 실행될 수 있도록 else를 사용

if(false) {
  console.log('Hello, if!');
} else {
  console.log('Hello, else!');
}

// Hello, else!

else if를 사용해 여러 방향으로 분기하기

두 개 이상의 경우의 수를 표현하는 조건문

if (조건식) {
  실행문;
} else if (조건식) {
  실행문;
} else {
  실행문;
}

else if 문은 if 문과 else 문(생략 가능) 사이에 원하는 만큼 넣을 수 있습니다.

// 점수에 따른 학점 예시

const score = 90;
if(score >= 90) { // 90점 이상
  console.log('A+');
} else if(score >= 80) { // 80점 이상
  console.log('A');
} else if(score >= 70) { // 70점 이상
  console.log('B+');
} else if(score >= 60) { // 60점 이상
  console.log('B');
} else { // 60점 미만
  console.log('F');
}

중첩 if 문 사용하기

if나 else, else if 문의 중괄호 안에 실행문을 넣을 수 있다는 사실을 활용할 수 있습니다.

조건문도 문이므로 중괄호 안에 다시 넣을 수 있습니다.

let first = true;
let second = false;
if(first) {
  console.log('첫 번째 조건 충족!');
  if(second) {
    console.log('두 번째 조건도 충족!');
  } else {
    console.log('두 번째 조건은 불충족!');
  }
} else {
  console.log('첫 번째 조건 불충족!');
}

/* 첫 번째 조건 충족!
두 번째 조건은 불충족! */

하지만 코드의 가독성이 떨어지므로 중첩 if문은 가급적 피하는 것이 좋습니다.

대신 논리 연산자를 사용해 중첩 if문을 재구성할 수 있습니다.

let first = true;
let second = false;
if( first && second) { // first와 second 모두 true
  console.log('첫 번째 조건 충족!');
  console.log('두 번째 조건도 충족!');
} else if(first) { // first만 true
  console.log('첫 번째 조건 충족!');
  console.log('두 번째 조건은 불충족!');
} else { // 둘 다 flase
  console.log('첫 번째 조건 불충족!');
}

switch 문으로 분기하기

조건문에는 if 문 외에도 switch 문이 있습니다. if 문과 switch 문은 조건이 충족되면 실행된다는 공통점도 있지만 차이점도 있습니다.

switch (조건식) {
  case 비교 조건식:
    실행문;
}

switch 문에는 조건식 두 개가 사용됩니다. switch 옆 소괄호 조건식의 값이 case의 비교 조건식 값과 일치(===)하면 해당 실행문이 실행됩니다. 보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣습니다.

 

let value = 'A';
switch(value) {
  case 'A':
    console.log('A');
}

// A

실행문을 여러 개 둘 수도 있습니다. 이때는 if 문과는 다르게 중괄호가 없어도 됩니다. 

if 문의 else if처럼 여러 방향으로 분기할 수도 있습니다.

let value = 'B';
switch (value) {
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');
    break;
  case 'C':
    console.log('C');
    break;
  default:
    console.log('아무것도 일치하지 않음');
    break;
}

// B

switch 문은 일치하는 case를 발견하면 일치 여부와 상관없이 그 아래 case들의 실행문을 모두 실행합니다.

따라서 원하는 결과만 얻기 위해 반드시 break 문을 사용해야 합니다.

어떠한 case도 일치하지 않을 때 실행하는 case도 default라는 특수한 예약어를 사용해서 만들 수 있습니다.

 

조건부 연산자 사용하기

if 문과 switch 문 외에도 분기 처리에 사용하는 식이 있습니다. 이는 조건부 연산자 또는 삼항 연산자라고 합니다.

// 형식
조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

조건부 연산자는 문이 아니라 식이므로 결괏값이 나옵니다.

5 > 0 ? '참입니다' : '거짓입니다';
// 참입니다

조건식의 결과가 참이므로 '참입니다'가 결괏값으로 출력됩니다.

let value = 5 < 0 ? '참입니다' : '거짓입니다';

value;
// "거짓입니다"

대입 연산자의 우선순위가 가장 낮기 때문에 조건부 연산의 결괏값인 "거짓입니다"가 value 변수에 대입됩니다.

switch 문을 if 문으로 바꿀 수 있는 것처럼 조건부 연산도 if 문으로 변경할 수 있습니다.

let condition = true;
let value = condition ? '참' : '거짓';
console.log(value);

if (condition) {
  value = '참';
} else {
  value = '거짓';
}
console.log(value);
// 참
// 참

if 문보다 조건부 연산이 훨씬 짧습니다. 이렇듯 조건부 연산은 조건문에서 대입하는 부분을 짧게 줄이기 위해 사용합니다.

조건부 연산도 중첩해서 사용할 수 있습니다.

let condition1 = true;
let condition2 = false;
let value = condition1 ? condition2 ? '둘 다 참' : 'condition1만 참' : 'condition1이 거짓';
console.log(value);
// condition1만 참

1분 퀴즈
다음 if 문을 switch 문과 조건부 연산자로 바꿔 보세요.
let cond = true;
let value = '';
if(cond) {
  value = '참';
}  else {
  value = '거짓';
}

정답 및 해설

// switch 문
let cond = true;
let value = '';
switch(cond) {
  case true:
    value = '참';
    break;
  default:
    value = '거짓';
}
console.log(value);

// 조건부 연산자
let cond = true;
let value = cond ? '참' : '거짓';
console.log(value);

// 참
// 참