[Javascript] 최대한 짧게 써보는 조건문...?

안녕하세요 워누입니다😀

오늘은 자바스크립트의 조건문 중에서 짧은 조건문에 대해 포스팅을 작성해보고자 합니다! 

 

흔히 조건문이라 하면 잘 아는 if 조건문, switch 조건문 그리고 삼항 연산자를 이용한 조건문이 있는데요,

자바스크립트에서는 논리합(||), 논리곱(&&) 연산자를 사용하여 '짧은 조건문'이라는 것이 있다고 합니다! 

 

본래 논리합(||), 논리곱(&&) 연산자는 양 변의 표현식 혹은 불(boolean) 데이터를 이용해

참(true)/거짓(false)을 도출하는 연산자인것은 대부분 다 아시는 사실인데

이를 어떻게 조건문으로 사용하는지는 생소한 분들이 꽤 있을 것이라 생각하고 한번 알아보도록 하겠습니다...!

 

1. 논리합(||)

 

연산자를 기준으로 양 변중 하나라도 참이면 true 값을 반환하는 연산자입니다. 

우선 아래 표현식을 한번 함께 보실까요?

---

true || (임의의 표현식 또는 값)

---

위 식에서는 좌변이 참이라서 우변에 어떠한 표현식이나 값이 오든 항상 true 값을 반환합니다!

자바스크립트는 이렇게 참이나 거짓이 확실한 경우 추가 연산을 진행하지 않는데,

위와 같은 식에서는 좌변이 항상 참이므로 우변의 식을 실행하지 않습니다. 

.

이를 거꾸로 생각하면, 아래와 같이 좌변을 false 바꾸면

자바스크립트는 우변의 식을 실행하거나 값을 가져오게 되겠죠?

---

false || (임의의 표현식 또는 값)

---

위 표현식의 원리를 이용하여 아래와 같은 형태로 조건문을 사용한다는 개념입니다. 

---

(임의의 표현식(조건)) || (좌변의 표현식의 거짓인 경우 실행할 내용)

---

이렇게 되면 좌변의 표현식이 거짓이라면 우변이 실행될 것입니다!

 

...

 

2. 논리곱(&&)

 

연산자를 기준으로 두 변 모두 참이면 true 값을 반환하는 연산자입니다. 

반대로 말하면 양 변중 하나라도 거짓이면 무조건 false 값을 반환한다는 이야기가 됩니다!

 

위 논리합을 이용한 조건문에서 설명한 개념을 대입해서 아래 2개의 표현식을 함께 보시기 바랍니다. 

---

false && (임의의 표현식 또는 값)

true && (임의의 표현식 또는 값)

---

좌변이 false인 경우라면, 무조건 거짓이기 때문에 자바스크립트는 우변을 실행하지 않을 것입니다. 

다만, 좌변이 true인 경우라면 우변을 실행한다는 이야기가 됩니다. 

 

즉, 아래 형식처럼 사용할 수 있다는 이야기가 되겠죠?

---

(임의의 표현식(조건)) && (좌변의 표현식의 참인 경우 실행할 내용)

---

...

 

자, 이제 실제 예시를 살펴보도록 하겠습니다. 

숫자를 입력받아서 홀수인지 짝수인지를 구분하는 프로그램을 만든다는 가정하에

맨 처음에 언급했던 if, switch, 삼항 연산자과 더불어 오늘 포스팅한 '짧은 조건문'을 각각 사용한 후

짧은 조건문이 정말 짧은지 비교해보도록 하겠습니다. 

(html의 <script> 부분만 작성했습니다.)

 

1. if 조건문

<script>
var input = Number(prompt('숫자를 입력하세요.'));
	
if(input % 2 == 0){
	alert('짝수입니다.');
} 
if(input % 2 == 1){
	alert('홀수입니다');
} 
</script>

 

2. switch 조건문

<script>
var input = Number(prompt('숫자를 입력하세요'));
	
switch(input%2) {
    case 0:
        alert('짝수입니다.');
        break;
    case 1:
    	alert('홀수입니다.');
        break;
    default:
    	alert('숫자가 아닌것 같네요.');
        break;
}
</script>

 

3. 삼항연산자 조건문

<script>
var input = Number(prompt('숫자를 입력하세요'));
	
(input % 2 == 0) ? alert('짝수입니다.') : alert('홀수입니다.');
</script>

 

4. 짧은 조건문 

<script>
var input = Number(prompt('숫자를 입력하세요'));

input % 2 == 0 && alert('짝수입니다.');
input % 2 == 0 || alert('홀수입니다.');
</script>

 

위 4가지를 이렇게 단순 비교해보았더니 삼항연산자 조건문이 더 짧게 작성된 것 같네요🤣🤣🤣

 

사실 제가 회사에서 업무를 진행할 때도 짧은 조건문 형태로 쓰여진 코딩 스타일은 접하지 못했었는데요, 

나름의 이유가 있었네요 ㅎㅎ (삼항연산자 조건문을 애용하는 분들은 정말 잘 쓰시더라구요..ㄷㄷ)

 

그래도 최근에 javascript를 공부하기 시작하면서 알게된 신기한 조건문이라 정리해보았습니다!

그럼 이만!!