반응형
삼항 연산자란?
삼항 연산자는 참과 거짓에 따른 2개 이상의 조건 선택이 있을 때 하나를 선택할 수 있도록 만들어졌습니다.
주로 if문이 필요하지 않은 간단한 조건문 계산에 사용합니다.
문법
(조건) ? a : b(조건) 이 참일 때 a를 실행, 거짓일 때 b를 반환(실행)합니다.
예시
let a = 20;
if(a < 15){
console.log("a가 15보다 작다!");
}else{
console.log("a가 15보다 크다!");
}
// a가 15보다 크다!
이런 간단한 if문은 간단하게 삼항 연산자로 표현이 가능합니다.
let a = 20;
console.log("a가 15보다" + (a < 15 ? "작다!" : "크다!"));
// a가 15보다 크다!
조금 더 긴 if문도 가능합니다.
let a = 15;
let b = 20;
let msg = "";
if(a > 10){
if(b < 30){
msg = "a는 10보다 크고 b는 30보다 작다!";
}
else{
msg = "a는 10보다 크고 b는 30보다 크다!";
}
}
else{
msg = "a는 10보다 작다!";
}
console.log(msg);
// a는 10보다 크고 b는 30보다 작다!
a > 10 ? b < 30 ? msg = "a는 10보다 크고 b는 30보다 작다!" : msg = "a는 10보다 크고 b는 30보다 크다!" : msg = "a는 10보다 작다!";
console.log(msg);
// a는 10보다 크고 b는 30보다 작다!
좀 더 명시적으로 보이기 위해 괄호를 추가해줄 수 있습니다.
a > 10 ? (b < 30 ? msg = "a는 10보다 크고 b는 30보다 작다!" : msg = "a는 10보다 크고 b는 30보다 크다!") : msg = "a는 10보다 작다!";
console.log(msg);
// a는 10보다 크고 b는 30보다 작다!활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="isNaN"></div> <!--this is not a number-->
<div id="Am"></div> <!--now time is am-->
<div id="isNull"></div> <!--this is null-->
<script>
let num = "this is number";
let time = new Date().getHours();
let obj = null;
let isNaNDiv = document.getElementById("isNaN");
let AmDiv = document.getElementById("Am");
let isNullDiv = document.getElementById("isNull");
isNaN(num) ? isNaNDiv.innerHTML = "this is not a number" : isNaNDiv.innerHTML = "this is a number";
time > 12 ? AmDiv.innerHTML = "now time is pm" : AmDiv.innerHTML = "now time is am";
obj === null ? isNullDiv.innerHTML = "this is null" : isNullDiv.innerHTML = "this is not null";
</script>
</body>
</html>
그럼 ㅅㄱ
반응형
'푸로그래밍 > JS' 카테고리의 다른 글
| [JS] HTML 요소 크기가져오기. (offsetWidth, clientWidth, scrollWidth, getBoundingClientRect (1) | 2019.11.21 |
|---|---|
| [JS] Array 관련 매소드 Array.prototype.forEach (0) | 2019.11.06 |
| [JS] 화살표 함수 Arrow Function (2) | 2019.10.29 |
| [JS] ES6 구조분해할당 (0) | 2019.10.25 |
