자바스크립트에서 삼항연산자는 조건식을 줄여주는 역할을 한다. if 조건문 대신 물음표를 사용하여 조건식을 판단하고 참이라면 첫번째 값을 실행하고, 거짓이면 두번째 값을 실행한다. 참과 거짓은 콜론으로 구문한다는 점에서 조건문과 다르다. 하지만, 익숙해지면 짧지만 가짓수가 많은 조건식들을 줄여서 사용하고 가독성을 높일 수 있다.
자바스크립트 삼항연산자 사용
using javascript ternary operator
조건식이 많아지면 번거로운 것들이 많다.
가독성이 길어질 수도 있고, 조건이 맞는지 검증에 필요한 경우도 생긴다.
하지만, 이런 길어지는 조건식을 그나마 짧게 줄일 수 있는 것이 삼항연산자이다.
간단한 조건식들이 있다면 삼항연산자를 사용하여 코딩을 하는 라인 수를 줄이고 가독성을 높일 수 있다.
삼항연산자 문법
삼항연산자게 애매하거나 헷갈리는 경우들도 있지만 문제될 것은 없다.
조건문을 늘려도 크게 상관이 없다.
다만, 짧고 간결한 조건이 길어지면 가독성이 줄어든다.
짧은 비교문들은 상항연산자를 사용하여 코드 줄수를 줄이고 가독성을 높이는 것이 좋다.
삼항연산자에 대한 문법구조는 다음과 같다.
어떤 조건이 있을 때 ? 가 if 문을 대신하고 첫번째 값이 참일 때 변수에 저장된다.
만약 if 문의 조건식이 거짓이라면 두번째 값이 변수에 저장된다.
// 변수명 = ( 조건식 ) ? 참일 때 값 : 거짓을 때 값 ;
variablename = (condition) ? true_value : false_value ;
if ( condition ) {
variablename = true_value;
} else {
variablename = false_value;
}샘플코드
위의 구문을 이용하여 자바스크립트에서 삼항연산자를 사용해 본다.
이전에 만들었던 조건문을 그대로 활용하여 삼항연산자로 만들어 본 것이기에 어려운 것은 없다.
이전에 작성했던 삼항연산자에 대한 내용은 아래와 같다.
단순히 if 조건문을 삼항연자로 바꾼 것이다.
위의 구문에서 알 수 있듯이 if 조건문 대신에 ? 를 사용한다.
조건식이 참이라면 첫번째 값을 변수에 저장하고, 조건식이 거짓이라면 두번째 값을 변수에 저장한다.
<!DOCTYPE html>
<html>
<body>
<script>
console.log('----------');
let vA = 10;
let vB = 100;
let vText = "";
console.log("vA 가 %s 이고, vB 가 %s 일때 비교 ", vA, vB);
console.log('----------');
vText = (vA > 50 && 50 > vB) ? "참" : "거짓";
console.log("vA > 50 && 50 > vB : %s", vText);
vText = (vA > 50 || 50 > vB) ? "참" : "거짓";
console.log("vA > 50 || 50 > vB : %s", vText);
vText = (vA == vB) ? "참" : "거짓";
console.log("(vA == vB) : %s", vText);
vText = !(vA == vB) ? "참" : "거짓";
console.log("!(vA == vB) : %s", vText);
vText = (vA != vB) ? "참" : "거짓";
console.log("(vA != vB) : %s", vText);
vText = !(vA != vB) ? "참" : "거짓";
console.log("!(vA != vB) : %s", vText);
console.log('----------');
</script>
</body>
</html>코드길이가 길지만 삼항연산자 부분만 보도록 하자.
조건식은 ? 으로 판단하고 참이면 첫번째 값을 거짓이면 두번째 값을 변수에 저장하는 것을 상기하자.
결과 화면을 보자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 if else 조건 사용 방법 using javascript if else statement (0) | 2022.04.15 |
|---|---|
| 자바스크립트 if 조건문 사용 using javascript if condition Statement (0) | 2022.04.11 |
| 자바스크립트 논리연산자의 사용 using javascript logical operators (0) | 2022.04.06 |
| 자바스크립트 비교연산자 종류와 사용 javascript comparison operators (0) | 2022.04.04 |
| 자바스크립트의 불린 boolean 함수 사용 using javascript boolean function (0) | 2022.04.01 |
댓글