DEVLOG
[Javascript] 삼항연산자 본문
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
반응형
'frontend > javascript' 카테고리의 다른 글
[Javascript] var, let, const 의 차이점 (0) | 2021.05.03 |
---|---|
동기방식 vs 비동기방식, 콜백함수와 Promise 까지 한번에 훑어보기! (0) | 2021.04.18 |
[Javascript] 남은시간 카운트다운 만들기 (0) | 2021.03.09 |
[Javascript/jQuery] 숫자가 0부터 증가하는 애니메이션 넣기 (0) | 2021.03.09 |
[Javascript] document.referrer :: 링크 이동 전 페이지URL 알아내기 (0) | 2021.02.24 |
Comments