DEVLOG

[Javascript] 삼항연산자 본문

frontend/javascript

[Javascript] 삼항연산자

meroriiDev 2021. 3. 29. 17:06
728x90
반응형

가끔 if문이 길어지면 보기가 불편할 때가 있다.

삼항연산자는 간단한 if문을 대체할 수 있는 연산자이다.

* 삼항연산자는 ES6문법이 아니다!

형식

조건문 ? 피연산자1 : 피연산자2

조건문 ? 조건이 참일때 : 조건이 거짓일때

 

삼항연산자의 형식은 위와 같으며,

좌항의 조건문에 결과에 따라 우항 두가지 중 한가지의 연산이 이루어진다.

따라서 좌항의 조건문은 true/false 형식인 boolean값을 가져야 한다.

 

같은 의미를 if문으로 나타내면 다음과 같다.

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

사용

삼항연산자는 조건에 따라 값을 할당할때 쓰일수도 있으며

조건에 따라 연산을 진행할 때 쓰일수도 있다.

 

1. 조건에 따라 값을 할당

var hello = 1; 
var text = (hello===1)?'1번입니다':'2번입니다'; 
console.log(text) //1번입니다

 

2. 조건에 따라 연산

var hello = 1; var text; 
(hello === 1) ? text='1번입니다' : text='2번입니다'; 
console.log(text) //1번입니다

여러줄의 피연산자

피연산자 부분에 두줄이상을 넣으려면 다음과 같이 작성해야한다.

var hello = 1; 
var text; 

(hello === 1) 
?( 
  text='1번입니다',
  text2='3번입니다' 
):( 
  text='2번입니다', 
  text2='4번입니다' 
);

 

* 피연산자부분이 여러줄일경우 ()로 묶어서 작성하기

* 한줄의 끝에 세미콜론(;)이 아니라 콤마(,)를 넣어 작성하기!

 

+ 삼항연산자 안의 삼항연산자처럼 중첩을 넣어 작성할 수 있지만

가독성이 떨어지고 오히려 더 복잡해보일 수 있기때문에 이럴때는 if문을 쓰는게 더 깔끔할 수도 있다!

const condition1 = false; 
const condition2 = false; 

const value = condition1 
? '와우!' 
: condition2 
  ? 'blabla' 
  : 'foo'; 

console.log(value);
728x90
반응형
Comments