자바스크립트 책갈피 - 조건문

조건문

조건문이란 주어지는 조건이 참인지 거짓인지에 따라 다른 명령을 실행하도록 하는 명령문으로 if, else, else if, switch, 조건부 연산자 등 여러 방법으로 만들어질 수 있다.

if

if 조건문은 조건문을 공부하면 가장 먼저 배우게 되는 조건문으로

if(조건) {
  실행
}

과 같은 형식으로 사용되며 '조건'이 참이면 '실행' 부분을 실행한다는 의미이다. 간단한 예시를 들어보면

let testScore = 90;
if(testScore >= 90) {
  console.log('You got A grade!');
}
//실행 결과 == You got A grade!

위의 조건문을 살펴보면 testScore >= 90이 조건부이고, console.log('You got A grade!'); 부분이 실행문이다. 조건부가 참일 경우 실행문을 실행하는 것이 조건문이기에 testNum의 값은 90으로 90이상에 해당하므로 조건부는 참, 즉 실행문을 실행해 실행 결과가 주석에 쓰인 것과 같게 되는 것이다.

else / else if

else와 else if는 if조건문을 보충해주는 역할을 해주는 조건문으로

if(조건부) {
  실행문
}
else if(조건부) {
  실행문
}
else {
  실행문
}

와 같이 사용 가능하다.
위의 예제에서는 맨 처음 if의 조건부가 참이면 if의 실행문을 실행하고 else if와 else는 조건부의 참/거짓에 상관없이 건너뛴다. if의 조건부가 거짓이면 else if의 조건부를 확인하고 참일 경우 else if의 실행문을 실행하고 else 부분은 건너뛴다. if, else if의 조건부가 모두 거짓이면 else의 실행문을 실행한다.
if, else if, else는 한 묶음으로 if~else if~else 순서로 사용되며 if없이 나머지 두 조건문을 사용할 수 없고, else if나 else는 사용하지 않을 수 있다. else if는 또한 여러번 사용할 수 있으며 else는 한번만 사용할 수 있다. 즉, if~else if~else if~else와 같은 형태로도 사용할 수 있다. 이렇게 사용될 경우 if조건문에서부터 출발해서 위에서 아래로 읽어내려가게 된다(if조건부가 거짓이면 첫번째 else if확인, 첫번째 else if의 조건부가 거짓이면 두번째 else if 확인•••)
간단한 예시를 들어보면

let testScore = 80;
if(testScore >= 90) {
  console.log('You got A grade!');
}
else if(testScore >= 80) {
  console.log('You got B grade!');
}
.
.
.
else {
  console.log('You have to study hard...');
}

다음과 같다. 첫번째에서 90점 이상인지를 확인하고 90점 이상이 아닐 경우 80점 이상인지를 확인하는 방식으로 진행되며 모든 조건문의 조건부가 거짓이라 실행문이 실행되지 않으면 마지막의 else문이 실행되는 형태이다.

switch

switch문은 if~else if~else 와 유사하다고 볼 수 있는데

switch(인자) {
  case 특정 값:
    실행문
  case 특정 값:
    실행문
  case 특정 값:
    실행문
  default:
    실행문
}

과 같은 형태로 쓰인다. 즉 '인자'가 어떤 값이냐에 따라 실행되는 실행문을 다르게 하는 것으로 간단한 예시를 들어보자면 아래와 같다.

let grade = 'A';
switch(grade) {
  case 'A':
    console.log('You got A!! Great!');
    break;
    
  case 'B':
    console.log('You got B!! Great!');
    break;
  
  default:
    console.log('You have to study hard');
}

이 예시에서 'grade'를 확인할 값으로 넣어주면 'A'인지 'B'인지를 확인해 각각 값에 맞는 실행문을 실행시키는 것이고, switch로 넘겨준 인자에 해당하는 값이 없을 경우 default:에 들어있는 실행문이 실행된다.
if에서의 else처럼 default 부분은 생략 가능하다. 또한 break;를 사용하지 않아도 한 조건문이 실행되면 나머지는 무시되던 if문과는 다르게 switch에서 break;를 사용하지 않으면 인자에 해당하는 case부분이 실행되고, 그 아래에 있는 모든 case및 default부분이 실행된다. 이러한 특성을 이용해 한번에 여러 실행문을 실행시키는 방법도 있지만, if문과 동일한 효과를 내기 위해서는 break를 사용해야 한다.

조건부 연산자

간단한 조건문을 작성할때 실행해야하는 로직에 비해 코드가 길때가 있다.

let isLoading = true;
if(isLoading) {
  let text = 'Now Loading...';
}
else {
  let text = 'Loading Complete!';
}

이런 상황에서 조건부 연산자를 사용하면 한줄로 간편하게 코드를 작성할 수 있는데 조건부 연산자의 형태는 다음과 같다.

조건 ? 참일시 : 거짓일시;

? 왼쪽에 쓰인 조건부가 참일 경우 :의 왼쪽에 있는 실행문이 실행되고, 조건부가 거짓일 경우 : 오른쪽의 실행문이 실행되는 형태로 위에서 if로 작성한 코드를 조건부 연산자로 표현하면

let isLoading = true;
let text = isLoading ? 'Now Loading...' : 'Loding Complete!';

다음과 같다.
isLoading이 참일 경우 text에 'Now Loading...'이, 거짓일 경우 'Loading Complete!'가 초기화되는 조건문이다.

조건부 연산자는 중첩되게 사용할 수 있는데

조건1 ? (조건2 ? 실행문2-1 : 실행문2-2) : 실행문1

과 같은 형태이다. 이 식은 조건1이 참일 경우 조건2를 검증하고, 조건2도 참이면 실행문2-1을, 조건2가 거짓이면 2-2를 실행한다. 조건1이 거짓일 경우 조건2를 포함하는 조건부 연산자에 접근하지 않고 실행문 1을 실행한다. 위의 성적 조건문으로 예시를 들어보면

let testScore = 80;
let text = testScore>=90 ? 'You got A grade!' : (testScore>=80 ? 'You got B grade!' : 'You have to study hard');
console.log(text);

와 같이 표현할 수 있다. testScore가 90 이상이면 text에 'You got A grade!'를, 90 이상이 아니면 80 이상인지 확인하고 80 이상이면 text에 'You got B grade!'를, 80 이상도 아니라면 'You have to study hard'를 넣어주는 형태이다.
이런식으로 조건부 연산자를 사용해 복잡한 로직도 구현할 수 있다. 그러나 여러 조건부 연산자를 중첩해서 사용하게 되면 한 줄에 너무 길게 조건부, 실행문들이 들어가며 가독성이 떨어져 추천하지는 않는 방법이다.