[JS] 삼항연산자

조건(삼항)연산자, [ javascript ] 삼항연산자
사이트를 참고하여 작성하였습니다.

if문을 아래와 같은 형식으로 사용해왔다.

if(조건){ 
	//조건이 참일때 
}else{ 
	//조건이 거짓일때 
}

삼항연산자는 if 조건문의 대체제로 간결하게 비교구문을 작성할 수 있다.

삼항연산자는 조건에 따라 값을 할당 하거나, 조건에 따라 연산을 진행 할 때 사용한다.

삼항연산자 구문

mdn 사이트에서 나와 있는 설명을 가져와봤다.

condition ? exprIfTrue : exprIfFalse

condition
조건문으로 사용되는 표현식

exprIfTrue
condition이 truthy한 값으로 평가될 경우 실행되는 표현식
(true와 같거나, true로 치환될 수 있는 값)

exprIfFalse
condition이 falsy한 값으로 평가될 경우 실행되는 표현식
(false와 같거나, false로 치환될 수 있는 값)

설명
false 이외의 falsy한 표현식에는 null, NaN, 0, 비어있는 문자열 (""), 그리고 undefined가 있습니다. condition이 이 중 하나일 경우 조건 연산자의 결괏값은 exprIfFalse 표현식을 실행한 결괏값입니다.

예제

1. 조건에 따라 값을 할당한다.

<script>

  const a = 1; 
  const b = (a===1)?'a입니다':'b입니다'; 
  console.log(b) //a입니다
  
</script>

2. 조건에 따라 연산한다.

<script>

  const a = 1; 
  const text; 
  (a === 1) ? text='a입니다' : text='b입니다'; 
  console.log(text) //a입니다
  
</script>

ES6에서의 삼항연산자 사용

1. 삼항연산자 (조건) ? 참:거짓

<script>

	let a = true;

    let ex1 = a === true ? "참" : "거짓";
    
    console.log(`결과: ${ex1}`);
    
</script>

위 예제에서 a의 값이 true 인가? 맞으면 "참", 틀리면 "거짓"을 비교하는 구문이다.
결과값은 결과: 참 으로 콘솔창에 출력된다.

2. === 같다, 조건 && 참결과

<script>

	let b = false;

    let ex2 = b === false && "거짓";
    
    console.log(`결과: ${ex2}`);
    
</script>

b는 false 로 선언된 변수이다. b라는 변수가 false인것이 참일 경우 결과 값에 "결과"라는 값을 출력하라는 조건문이다.
&& 연산자는 참의 결과를 나타내기때문에, 콘솔창에는 "결과: 거짓" 라는 값이 출력된다.

3. === 조건 || 거짓(undefined)

<script>

	let c = false;
	//변수 c 는 false이다.
    
    let ex3 = c === true || "거짓의결과";
    //변수 c 는 === 같냐, 트루 또는 거짓의 결과
    //-> 변수 C가 true가 아니고 false이기 때문에, 뒤에 있는 "거짓의 결과" 값을 반환한다.
    console.log(`결과: ${ex3}`);
    
</script>

2번과 동일한 유형으로, &&이 아닌 ||를 사용한 예제이다.
|| 연산자를 써서 비교할 경우 거짓의 결과가 반환된다.콘솔창에는 변수 c가 false이기때문에,
"결과: 거짓의 결과"가 출력된다. 변수 c에 undefined값을 넣어도 true가 아니기때문에,
|| 뒤에 있는 "거짓의 결과"가 출력될 것이다.