[javaScript]삼항연산자로 간단하게 코딩하기

 

---

 

💡

오늘은 간단하고 간편하게 코딩할 수 있는 삼항연산자에 대해 알아보겠습니다.

 

👀관련 포스팅

https://yeonzzy.tistory.com/22

[jQuery]prop("checked") 와 is(":checked")의 차이는 무엇일까?

 

---

 

삼항연산자란 ?

 삼항연산자 는  참(true)   /  거짓(false) 에 따라 선택적으로 실행되는 조건문으로 주로 if문을 줄여 간단하게 만들고 싶을 때 사용한다.

[삼항연산자]

조건문 ? 선택문1 : 선택문2

- 조건문이  참(true) 면 선택문1을 실행 /  거짓(false) 이면 선택문2를 실행

 

아래와 같이 if문을 사용한 예제가 있을 때  삼항연산자 를 사용하면 간단하게 표현 될 수 있다.

// if문 예제
if(a > b) {
	c = 10;
}else{
	c = 20;
}

// 삼항연산자 사용
(a > b) ? c = 10 : c = 20

 

 삼항연산자 는 자바스크립트 뿐만 아니라 jQuery 나 C++, java 등 여러 곳에서 사용가능 하다.

자바스크립트를 이용한  삼항연산자 로 현재 시간이 오후인지 오전인지 판별하는 간단하게 표현 할 수 있다.

// 삼항연산자 .js
var date = new Date();
var hour = date.getHours();
var now = "현재시간은 " + hour + "시이므로 " + ((hour > 12) ? "오후" : "오전") + "입니다";
document.write(now);

 

전체 체크박스 삼항연산자로 구현하기

저번 포스팅에서 제이쿼리를 활용한 전체 체크박스를 처리하는 예제를 살펴 보았다.

if문으로 사용했던 예제를  삼항연산자 로 사용하면 이렇게 한 줄로 간단하게 구현할 수 있다.

// 전체 체크박스 삼항연산자 .js
var chkList = $("input[name=chk]");

$("#chkCtrl").click(function () {
	$(this).is(":checked") == true ? chkList.prop("checked", true) : chkList.prop("checked", false);
});

 

 

삼항연산자로 css 변경하기

 참(true)  /  거짓(false) 에 따라 자유롭게 선택문을 줄 수 있으므로 스타일부분도 변경이 가능하다.

아래와 같은 html을 작성한뒤

<!-- .html -->
<h1 class="hello">안녕하세요</h1>
<h1 class="name">김곤지입니다.</h1>

 

class="hello" 일 때 빨강색으로 바뀌는  삼항연산자 를 구현할 수 있다.

// .js
$("h1").attr("class") == "hello" ? $(".hello").css({"color":"red"}) : $(".hello").css({"color":"blue"});