TIL 007 | 조건문의 기초

1. 조건문이란

자바스크립트에서 조건문은 특정한 조건을 만족했을 때 코드를 실행시키는 기능을 가지고 있다. if 문은 지정한 조건(condition)이 참일 경우 명령문(statement)을 실행시킨다.

if (condition) {
  statement
}

if 뒤에 조건문 괄호( )가 오고, 이어서 실행할 코드를 중괄호{ } 안에 표현한다. 괄호 ( ) 안의 조건이 참이면 중괄호{ } 안에 있는 명령문을 실행하고, 거짓이면 실행하지 않는다. 명령문이 하나라면 중괄호{ }없이 바로 명령문만 쓰기도 한다.

else if를 사용하면 조건문 여러 개를 연결할 수도 있다.

if (condition1) {
  statement1
} else if (condition2) {
  statement2
} else {
  statement3
}

만약 조건1을 만족하면 명령문1이 실행되고, 조건2를 만족하면 명령문 2가 실행되고, 앞의 2가지 조건 모두 만족하지 못하면(따라서 마지막은 else만 쓰면 된다) 마지막 명령문3이 실행되는 구조이다.

2. 비교연산자(Comparison Operator)

(이미지출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators)

여기서 등호를 포함한 연산자 ===와 ==는 조금 다르다. 3개 짜리는 자료형까지 정확히 일치해야만 하고(엄격 비교), 2개짜리는 자료형이 다르더라도 그 값을 같은 값으로 볼 수 있으면 같다고 처리한다(추상비교). !== 와 != 도 같은 원리이다.

5 == 5      // true
5 == "5"    // true
5 === 5     // true
5 === "5"   // false

7 != 7      // false
7 != "7"    // false
7 !== 7     // false
7 !== "7"   // true

3. 논리연산자(Logical Operator)

(이미지출처:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators)

여기서 &&는 우리가 흔히 알고 있는 and의 개념이고 ||는 or의 개념이라고 생각하면 된다. 그리고 !는 not의 개념으로 true에 붙이면 false가 되고 false에 붙이면 true가 된다.

1 + 1 === 2 && 2 + 2 === 4       //true
1 + 1 === 2 && 2 + 2 === 5       //false
1 + 1 === 3 && 2 + 2 === 4       //false

1 + 1 === 2 || 2 + 2 === 4       //true
1 + 1 === 2 || 2 + 2 === 5       //true
1 + 1 === 3 || 2 + 2 === 4       //true
1 + 1 === 3 || 2 + 2 === 5       //false

!(1 + 1 ===2)   // false
!(1 + 1 ===3)   // true

4. Truthy와 Falsy

자바스크립트에서 truthy(참같은 값)는 boolean을 기대하는 문맥에서 true를 기대하는 값이다. 따로 falsy(거짓같은 값)으로 정의된 것이 아니라면 truthy라고 생각하면 된다.
falsy에 해당하는 것은 다음과 같다.

• 0
• '' 또는 ""(빈 문자열)
• null (값이 완전히 없음)
• undefined (값이 정의되지 않음)
• NaN (숫자가 아님)

let username = "김코딩";
if (username) {
  console.log("이름 O!!")
} else console.log("이름 X!!")    //  이름 O

여기서 username에는 "김코딩"이 할당되었고, 따라서 username은 truthy가 되므로 조건문이 참이 된다.

let username = "";
if (username) {
  console.log("이름 O!!")
} else console.log("이름 X!!")    //  이름 X

여기서는 username에 빈 문자열이 할당되었기 때문에 falsy가 되므로 조건문이 거짓이 된다.

let username;
if (username) {
  console.log("이름 O!!")
} else console.log("이름 X!!")    //  이름 X

username에 아무것도 할당하지 않는다면 undefined 이므로 마찬가지로 falsy가 되서 조건문이 거짓이 된다. 이렇게 변수에 값이 제대로 할당되어 있는지 확인하는 조건문은 여러모로 유용할 수 있다.

5. 조건부 삼항 연산자(Conditional Ternary Operator)

if 문의 단축형태로 삼항 연산자를 사용할 수 있다.

condition ? expressionIfTrue : expressionIfFalse

조건 ? true일 때 명령문 : false일 때 명령문 형태로 써주면 된다.

function findMax(num1, num2) {
  let max;
  num1 >= num2 ? max = num1 : max = num2;
  return max;
}

findMax (1, 3)    // 3
findMax (5, 2)    // 5

두 수 중 더 큰 값을 찾는 함수를 삼항 연산자를 사용해서 표현해봤다.

6. Switch문

조건문에서 조건의 개수가 많을 경우, if-else문을 계속 쓴다면 가독성이 떨어질 수 있는데, 이 때 switch문을 활용할 수 있다.

switch (expression) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
  case value3:
    statement3;
    break;
  default:
    statement4;
}

expression의 결과가 value1이면 statement1을, value2면 statement2를, value3면 statement3를, 그 어느 것도 아니라면 default가 적용되어 statement4을 실행한다.

조건이 맞아 break를 만나면 그 이후의 비교는 하지 않으며, switch문을 종료시킨다.

default문은 switch문의 가장 마지막에 위치하므로 default 문의 실행이 종료하면 switch 문을 빠져나간다. 따라서 break를 생략하는 것이 일반적이다.

다음은 if-else문을 switch문으로 바꾸는 예시이다.

let num = 11;

if (num % 2 === 0) {
  console.log("이 수는 짝수입니다!")
} else if (num % 2 === 1) {
  console.log("이 수는 홀수입니다!")
} else {
  console.log("양수를 입력해주세요!")
}                                       // "이 수는 홀수 입니다!"

숫자가 홀수인지 짝수인지 판별하는 코드이다. 똑같은 기능을 하는 switch문을 작성해보았다.

let num = 11;

switch (num % 2) {
  case 0 :
    console.log("이 수는 짝수입니다!!");
    break;
  case 1 :
    console.log("이 수는 홀수입니다!");
    break;
  default :
    console.log("양수를 입력해주세요!");
}                                        // "이 수는 홀수입니다!"

references

MDN Web Docs
http://hleecaster.com/javascript-conditionals/
https://dasima.xyz/javascript-switch/