조건문(Conditional statement)이란?
제시하는 조건에 따라 원하는 기능을 실행시키는 문文statement(위키백과: 명령형 프로그래밍 언어의 가장 작은 독립 요소)의 일종이다. 직접 만들어서 원하는 값을 리턴 받는 (또는 JS의 경우 특정 코드를 실행시키는) 함수와는 다른 개념으로 특정 조건을 만족해야 하는 특수성을 띄고 있어 상황에 맞게 유동적으로 사용할 수 있는 장점이 있다. 단, 조건문에는 반드시 조건식을 제시해야되기 때문에 이에 따라 비교연산자comparison operator를 필요로 한다.
왜 쓰는걸까?
일상 생활을 예로 들어보자.
친구와 약속을 나갔는데 배가 고파서 친구에게 밥을 먹으러 가자고 했다.
사고의 과정을 돌이켜 보자. 먼저 '배가 고프면'이라는 조건이 달성되었다. 이에 따라 우리는 배고픔을 느끼고, 같이 있는 친구에게 밥을 먹으러 가자고 '말했다'. 이를 컴퓨터 코드로 구현해보면 다음과 같다.
마치 인간이 상황에 따라 판단하고 행동하듯, 컴퓨터에게 원하는 상황에 특정 행동을 시키기 위해 우리는 조건식을 사용한다.
조건식과 비교연산자
앞서 사용했던 코드를 조금 더 일반화 시켜보자.
이처럼 if문은 조건식을 통해 해당 조건이 '참'이면 행동을 실행, '거짓'이면 아무것도 실행되지 않게 '제어'한다.
상당히 직관적이다. 배가 고프면 밥을 먹고, 배가 안 고프면 밥을 안 먹으면 된다. 안 그러면 살 찐다.
하지만 컴퓨터는 해당 조건이 참인지 거짓인지, 즉 배가 고픈지 안 고픈지 자가적으로 판단할 수 없기 때문에 기준이 필요하다. 이를 위해 우리는 비교연산자를 사용해 주어진 조건이 참인지 거짓인지 컴퓨터가 판단할 수 있게 해준다.
비교연산자comparison operator는 두 개의 피연산자를 비교해 그 결과를 boolean값(참 또는 거짓)으로 반환하는 연산자로 종류는 다음과 같다. (참고: MDN 표현식과 연산자)
| 연산자 | 설명 (왼쪽 피연산자 A / 오른쪽 피연산자 B) |
| 일치 (A === B) | 두 피연산자의 값과 타입이 같은 경우 (AND) true를 반환 |
| 불일치 (A !== B) | 두 피연산자의 값 또는 타입이 서로 다를 경우 (OR) true를 반환 |
| 큼 (A > B) | A가 B보다 크면 true를 반환 |
| 크거나 같음 (A >= B) | A가 B와 같거나 크면 true를 반환 |
| 작음 (A < B) | A가 B보다 작으면 true를 반환 |
| 작거나 같음 (A <= B) | A가 B와 같거나 작으면 true를 반환 |
if문 사용과 논리연산자
앞서 만들었던 논리에 살을 더해보자.
예를 들어 배고픔을 1~10 사이의 숫자로 표현하고, 배고픔이 5 이상일 때 console.log를 통해 배고픔을 호소해보자.
이전에 배웠던 함수를 활용해서 콘솔 창에 배고프니()라는 함수를 선언해보았다. 해당 함수 안에는 오늘 배운 if문을 사용해 hunger라는 변수가 5 이상일 경우 콘솔 창을 통해 '배고파요!!'라고 출력을 하기 위한 조건을 제시했다. 처음에는 hunger 변수에 0의 값이 할당되어 있었기 때문에 배고프니()라는 함수를 호출했을 때 undefined값만 리턴했지만, 이후 hunger를 5로 재할당하면서 함수 안의 조건에 만족했기 때문에 다음 호출에는 콘솔 창에 배고파요!!라고 출력이 된다.
if문을 응용해보자.
만약 배가 고프지 않은데, 목이 마른 경우에는 어떻게 하면 될까?
if문에는 else if 또는 else 기능을 통해 여러가지의 조건을 순차적으로 검사할 수 있다. 만약 hunger가 5 이하가 아닐 때, '목마름'이라는 다른 변수를 검사하고 싶다면 else if 기능을 활용하면 된다.
이처럼 첫번째 조건식의 결과가 거짓일 때 다른 조건을 확인할 수 있다. (같은 변수에 다른 조건을 적용해 확인할 수도 있다.)
논리연산자logical operator를 활용해 두 가지 변수의 값을 동시에 확인할 수도 있다.
논리연산자는 비교연산자처럼 종류에 따라 활용법이 다른데, 주로 두가지 조건을 한번에 적용하기 위해서 사용한다. 종류는 다음과 같다. (참고: MDN 표현식과 연산자)
| 연산자 | 설명 (A 조건 / B 조건) |
| 논리 AND (A && B) | A 조건과 B조건 값이 모두 '참'일 때 true를 반환 (둘 중 하나라도 거짓이면 false를 반환) |
| 논리 OR (A || B) | A 조건 또는 B조건 값 둘 중 하나가 '참'일 때 true를 반환 (둘 모두 거짓이면 false를 반환) |
| 논리 NOT (!) | 단일 피연산자의 boolean 값을 반대로 치환한다. (true를 false로 / false를 true로) |
이를 응용해 다음의 코드를 만들어보았다.
만약 hunger가 0이 아니고 5 미만일 경우에는 '배고파요!!'를 출력, 이 외의 경우에서 만약 hunger가 8 이상이고 thirst가 7 이상일 때 '살려주세요!!'를 출력하게 조건을 두었다.
그렇다면 만약 hunger가 6이었다면 어떻게 될까?
배고프니() 함수 안에 두 조건에 만족하는 것이 없기 때문에 아무것도 출력되지 않고 undefined값만 출력되었다.
다양한 활용법
이 외에도 다양한 활용법이 있다. else if문을 반복적으로 사용해 2개 이상의 조건식을 계속해서 점검하는 방법, if문 안에 if문을 포함해 이중으로 조건을 확인하는 방법 (논리 연산자처럼) 등 그 사용법이 무궁무진하다. 단, 여러개의 if문을 활용하면 그만큼 코드가 길어지고 가독성이 떨어지니 항상 읽기 쉬운 코드가 되기 위해 적절히 사용하자
'Front-End > 자바스크립트 (JavaScript)' 카테고리의 다른 글
| [자바스크립트] 배열(Array)과 객체(Object) (2) | 2022.09.13 |
|---|---|
| [JavaScript] 반복문 (for/while문) (0) | 2022.09.05 |
| [JavaScript] 문자열 (String) (0) | 2022.08.30 |
| [JavaScript] 함수(Function) (0) | 2022.08.29 |
| [JavaScript] 변수와 타입(Type) (0) | 2022.08.22 |
댓글