삼항 연사자

삼항 연산자는 '?'와 ':'을 이용하여, if문의 단축 형태로 사용됩니다.

 

사용 형태는 아래와 같습니다.

확인하려는 조건 ? 조건이 true일 때 사용될 값 : 조건이 false일 때 사용될 값

주의하셔야 될 것은 사용될 값은 저장이 가능한 값이어야 하며, 값은 생략이 불가능합니다.

 

 

 

 

삼항 조건 연산자 - JavaScript | MDN

 

 

 

 

---

 

아래 코드에 적용한 것을 함께 확인하면 사용방법을 보다 쉽게 이해하실 수 있으실 것입니다.

 

아래 코드는 플레이어와 몬스터의 대결을 컨셉으로 한 코드입니다.

const ATTACK_VALUE = 10; //플레이어의 일반 공격 최대 공격력
const STRONG_ATTACK_VALUE = 20; //플레이어의 강한 공격 최대 공격력

const MODE_ATTACK = "ATTACK";
const MODE_STRONG_ATTACK = "STRONG_ATTACK";

let currentMonsterHealth = 100; //몬스터의 현재 체력 

//플레이어가 몬스터를 공격할 경우 랜덤한 공격력의 공격을 함
function dealMonsterDamage(damage) {		
  const dealtDamage = Math.random() * damage;
  monsterHealthBar.value = +monsterHealthBar.value - dealtDamage;
  return dealtDamage;
}

function attackMonster(mode){
	let maxDamage;
	if (mode === MODE_ATTACK) {
    	maxDamage = ATTACK_VALUE;
  	} else if (mode === MODE_STRONG_ATTACK) {
    	maxDamage = STRONG_ATTACK_VALUE;
  	}
  const damage = dealMonsterDamage(maxDamage);
  currentMonsterHealth -= damage;
}


function attackHandler() {     //일반 공격을 눌렀을 경우
  attackMonster(MODE_ATTACK);
}


function strongAttackHandler() {	//강한 공격을 눌렀을 경우
  attackMonster(MODE_STRONG_ATTACK);
}

 

중간쯤 있는 attackMonster 함수의 if 조건문을 삼항 연산자를 이용하여 변경해보겠습니다.

// 기존 if조건문을 이용한 코드
function attackMonster(mode){
	let maxDamage;
	if (mode === MODE_ATTACK) {
    	maxDamage = ATTACK_VALUE;
  	} else if (mode === MODE_STRONG_ATTACK) {
    	maxDamage = STRONG_ATTACK_VALUE;
  	}
  const damage = dealMonsterDamage(maxDamage);
  currentMonsterHealth -= damage;
}

function attackMonster(mode){
	const maxDamage = mode === MODE_ATTACK ? ATTACK_VALUE : STRONG_ATTACK_VALUE;
    	const damage = dealMonsterDamage(maxDamage);
  	currentMonsterHealth -= damage;
}

상수 maxDamage에 매개변수 mode가 MODE_ATTACK일 경우(조건),

 

ATTACK_VALUE(조건이 true일 경우 사용되는 값)을 할당하고,

 

매개변수 mode가 MODE_ATTACK가 아닐 경우,

 

STRONG_ATTACK_VALUE조건이 false일 경우 사용되는 값)을 할당하게 됩니다.

 

 

---

 

삼항 연산자는 상단의 코드에서 확인할 수 있듯이, 상수에 직접 값을 할당할 경우에도 사용이 가능합니다.

 

또한 글의 첫 부분에서 말씀드린 것처럼 if문의 단축 형태로 사용할 수 도 있습니다.

 

상수에 값을 할당하는 부분에 if문 대신 삼항 연산자를 사용하니 코드의 사용이 확 줄어든 것을 확인하실 수 있습니다.

 

하지만 코드의 길이가 길어진다면, 보다 구조화되어 있고 읽기도 쉬운 if문을 사용하시는 것이 좋을 것입니다.