#13. If Statement 와 삼항 연산자
Condition ( 조건문 )
Condition ( 조건문 )에 대한 정의
Condition 은 발생할 수 있는 여러 경우의 수에 대한 결과값을 제시할 수 있도록 도와주는 문장입니다. 만약 Condition 을 사용할 수 없다면 제대로 된 프로그램을 구현하는데 애를 먹을 수 있습니다. 그만큼 중요한 개념이기 때문에 본 글 외에 다른 블로그에서 다루고 있는 다양한 실습 예제를 살펴보면서 Condition 에 대한 주요 개념에 대해 숙지해 주시기 바랍니다.
네이버 사전에서는 조건의 사전적 의미를 다음과 같이 정의하고 있습니다.
어떤 일을 이루게 하거나 이루지 못하게 하기 위하여 갖추어야 할 상태나 요소. - 출처 : 네이버 사전
간단하게 얘기한다면 "만약에 ~ 한다면 ~ 하고, 그렇지 않으면 ~ 해라" 와 같은 문장 형태를 취하고 있는 것이 Condition 의 기본구조입니다. Condition 은 개발에서 자주 사용되는 문장이며 잘만 사용하면 든든한 아군이 되지만 이를 남용할 경우에는 로직이 복잡해져 유지보수에 애를 먹을 수 있으니 주의해서 사용해야 합니다.
JavaScript 에는 If Statement, 삼항 연산자 그리고 Switch Statement 이 3가지 조건문이 존재하고 있습니다. 이번장에서는 If Statement, 삼항 연산자가 어떠한 특징을 갖고 있는지 살펴보겠습니다.
If Statement
먼저 If Statement 는 JavaScript 에서 자주 사용되는 Condition 으로 다음과 같은 문장 구조를 갖고 있습니다.
if ( 조건 ) { 위 조건을 만족했을 때 취하는 동작 }
즉, If Statement 는 () 안에 있는 조건을 만족할 경우 {} 안에 있는 구문을 실행하게 됩니다. 조건에는 비교 연산자, 논리 연산자 그리고 boolean 등을 사용할 수 있습니다. 그럼 실제 예제를 가지고 If Statement 가 어떻게 동작하는지 살펴보겠습니다.
var answer = prompt("그/그녀의 프로포즈를 받아 주시겠습니까? yes or no");
if(answer === "yes") {
console.log("그/그녀가 프로포즈를 받아들였습니다.");
}
위 문장을 살펴보면 "var answer 의 값이 yes 이면 축하합니다" 라는 console.log 값이 출력됩니다. 하지만 yes 외 다른 값을 입력했을 경우에는 값이 출력되지 않습니다. 즉, If Statement 를 단독으로 사용했을 경우에는 조건이 true 일 때에만 값이 출력됩니다.
이럴때는 else 문 또는 else if 문을 사용하여 새로운 조건을 추가할 수 있습니다.
var answer = prompt("그/그녀의 프로포즈를 받아 주시겠습니까? yes or no");
if(answer === "yes") {
console.log("그/그녀가 프로포즈를 받아들였습니다.");
} else {
console.log("그/그녀가 프로포즈를 거절했습니다.");
}
else 를 사용하여 새로운 문장을 추가하였습니다. 하지만 위 문장은 완벽한 Condition 이라고 보기 힘듭니다. 그 이유는 "no" 가 아닌 다른 값을 입력더라도 else 로 인식을 하기 때문에 문장을 다시 수정할 필요가 있습니다.
이렇게 구체적인 Condition 을 만들고자 할 때 사용하는 것이 else if 문입니다.
var answer = prompt("그/그녀의 프로포즈를 받아 주시겠습니까? yes or no");
if(answer === "yes") {
console.log("그/그녀가 프로포즈를 받아들였습니다.");
} else if (answer === "no") {
console.log("그/그녀가 프로포즈를 거절했습니다.");
} else {
console.log("그/그녀가 고민하고 있습니다.");
}
위 문장에서는 else if 를 사용해서 no 라는 새로운 Condition 을 추가하였습니다. 전체 문장을 해석하면 yes 일 때는 프로포즈를 받아들이고, no 일 때는 프로포즈를 거절, 마지막으로 그 외 텍스트를 입력할 경우에는 고민하고 있다는 If Statement 를 완성시켰습니다.
Condition 을 만들 때 주의해야 할 점은 == 대신 === 를 사용하는 것이 안정성을 높이는데 좋은 작성법이라고 할 수 있습니다. 그 이유는 === 은 데이터 타입까지 비교하기 때문에 정확한 비교가 가능하기 때문입니다. ( Number 편 참고 )
그리고 Condition 에서는 논리 연산자도 함께 적용할 수 있습니다. 그럼 논리 연산자( &&, || )를 사용하여 업그레이드된 Condition 을 살펴보겠습니다.
var brower1 = prompt("첫 번째로 자주 사용하는 브라우저를 입력해 주세요");
var brower2 = prompt("두 번째로 자주 사용하는 브라우저를 입력해 주세요");
if(brower1 === "크롬" && brower2 === "파이어폭스") {
console.log("당신은 훌륭한 인터넷 사용자입니다.");
}else if(brower1 === "익스플로러" || brower2 === "오페라") {
console.log("다른 브라우저를 사용하기를 권장합니다.");
}
위 문장을 해석하면 "크롬" && ( 그리고 ) "파이어폭스" 를 사용한다면 훌륭한 인터넷 사용자이고, "익스플로러" || ( 또는 ) "오페라" 를 사용하면 다른 브라우저를 사용하기를 권장하는 If Statement 를 완성시켰습니다. 논리 연산자에 대한 자세한 내용은 Number 편 을 참고해 주시면 됩니다.
( 사실 오페라도 익스플로러와 비교가 안될 정도로 훌륭한 브라우저입니다 ^^;;; )
If Statement 는 깔끔하게 다음과 같이 정리할 수 있습니다.
if(true) {
console.log("이것은 진실입니다."); // 출력 O
}
if(false) {
console.log("이것은 거짓입니다."); // 출력 X
}
if(false) {
console.log("이것은 거짓입니다.")
} else {
console.log("이것은 진실입니다.") // 출력 O
}
if(false) {
console.log("이것은 거짓입니다.");
} else if(true) {
console.log("이것은 진실입니다."); // 출력 O
}
if(true && true) {
console.log("둘 다 진실이기때문에 진실입니다.");
}
if(true && false) {
console.log("둘 중 하나라도 거짓이기 때문에 출력되지 않습니다.");
}
if(true || true) {
console.log("둘 중 하나라도 진실이기 때문에 진실입니다.");
}
if(true || false) {
console.log("둘 중 하나라도 진실이기 때문에 진실입니다.")
}
Conditional Ternary Operator ( 삼항 연산자 )
Number 편에서 소개했던 삼항 연산자도 Condition 에 포함되며, if ~ else 를 삼항 연산자로도 표시할 수 있습니다.
var answer = prompt("그/그녀의 프로포즈를 받아 주시겠습니까? yes or no");
if(answer === "yes") {
console.log("그/그녀가 프로포즈를 받아들였습니다.");
} else {
console.log("그/그녀가 프로포즈를 거절했습니다.");
}
위 문장을 삼항 연산자로 정리하면 다음과 같습니다.
(answer === "yes") ? console.log("그/그녀가 프로포즈를 받아들였습니다.") : console.log("그/그녀가 프로포즈를 거절했습니다.");
오랜만에 다시 bruch 로 복귀하였습니다. 강동에서 강서로 대륙을 횡단하는 이사를 한 후 방 정리, 오프라인 강의 준비 그리고 원고 작업 덕분에(?) 잠시 재충전의 시간을 갖고자 "한 달만 깔끔하게 쉬자"고 생각했는데 제가 에상한 것보다 푹 쉬게 되었네요 ^^;;;
이번 장에서는 Condition 에서 자주 사용되는 If Statement 와 이를 삼항 연산자로 어떻게 변화시킬 수 있는지 살펴보았습니다. 다음 장에서는 또 다른 Condition 중 하나인 Switch 에 대해서 살펴보겠습니다.
