조건문

if(조건식){
	// 실행문
} else if {
	// 실행문
} else {
	// 실행문
}

프로그래밍의 핵심이죠. 바로 조건문!
위에서부터 차례대로 조건에 맞는지 검사 하며 모든 조건이 만족하지 않을 때 구문이 수행되도록 작성 할 수 있습니다.
false, undefined, null , 0, NaN, 빈 문자열은 조건문에서 거짓으로 판단합니다.

삼항연산자

조건문을 한 줄로 간단하게 표현 할 수 있는 문법입니다.

조건문 ? 실행문(True) : 실행문(else)

console.log(age > 19 ? '성인입니다.' : '미성년자입니다.');

age가 19 이상일 경우 '성인입니다' 아닐 경우 '미성년자입니다' 라는 조건문이 만들어진다.
참 간결하고 보기 좋습니다.

중첩

삼항연산자도 if문과 같이 내부적으로 중첩해서 작성이 가능하다.

const 조건1 = false;
const 조건2 = undefined;

const el = 조건1 
  ? '프론트엔드' 
  : 조건2 
    ? '백엔드' 
    : '풀스택';

console.log(el);

위와 같이 중첩해서 사용이 가능하지만 딱 봐도 어지러워진다. 이렇게 가독성이 떨어지는 구문은 되도록 작성하지 않는 것이 좋다.

if문과 삼항연산자의 차이

1. 할당

let hpMsg = hp <= 0 ? '체력이 없습니다.' : `현재 체력이 '${hp}'입니다.`

삼항 연산자는 조건에 대한 결과값을 바로 변수에 할당할 수 있다. if문은 바로 변수에 할당 할 수 없다.

2. scope

if문은 중괄호로 감싸진 블록문으로 이루어져 있고 삼항 연산자는 블록문을 만들 수 없다. 그래서
전역변수를 참조 할 수 있지만 지역변수는 생성할 수 없다.

이런 차이가 존재하기 때문에 if문을 무분별하게 삼항연산자로 대체하는 건 좋지 않다. 그 차이를 이해하고 알맞게 사용하는 것이 가장 좋다.

간편한 조건문

논리 연산자 &&와 ||를 이용하여 짧은 조건문을 작성할 수 있다.
나같은 경우 보통 조건을 여러개 나열해야 할때 주로 사용한다.

&&

A && B , A and B를 의미합니다. 묶인 조건들이 다 참이여야 if문이 실행된다.

let apple = prompt("사과인가요?");
let banana = prompt("바나나인가요?");

if (apple === "네" && banana === "네") {
  console.log("과일입니다.");
} else {
 console.log("과일이 아닌게 있습니다.");
}

||

A || B , A or B를 의미합니다. 여러 조건들중 하나만 참이여도 if문이 실행된다.

if (answer === "수원" || answer === "오산" || answer === "병점") {
  console.log("가까우시네요.");
  } else {
   console.log("멀리 사네요.")
  }

&& , || 동시에 사용한다면?

if (age > 16 || age < 20 && edu === "고등학교")

해석한다면 나이가 16살이 넘거나 20살 아래이고 고등학교를 다닌다.

• 왼쪽부터 차례대로 해석된다.
  (16살이 넘거나) (20살 아래이고 고등학교를 다닌다.)
• 가독성을 높여주기 위해 괄호로 묶어주도록 합니다.

if (age > 16 || (age < 20 && edu === "고등학교"))

가위바위보 게임

논리연산자를 활용한 조건문으로 가위바위보 게임을 만들어 봤습니다.

let arr = ["가위", "바위", "보"]
let com 
let play = document.querySelectorAll('.btn');
let my = document.querySelector('.player') 
let computer = document.querySelector('.computer');
let gameResult = document.querySelector('.winner');

// 컴퓨터 가위바위보 선택
function random() {
    let ran = Math.floor(Math.random() * 3); // ran 값은 0,1,2 랜덤 추출
        com = arr[ran];               
}

function result( com , player ) { // 게임 결과 판단
          if( player == com){
            gameResult.textContent = "무승부"
          } else if((player == "가위" && com == "보")
              || ((player == "바위" && com == "가위")
            ) || (player == "보" && com == "바위")) {
            gameResult.textContent = "승리"
          } else if((player == "가위" && com == "바위")
          || ((player == "바위" && com == "보")
        ) || (player == "보" && com == "가위")) {
            gameResult.textContent = "패배"
    }
}

play.forEach(btn => { // 플레이어 가위바위보 선택 
    btn.addEventListener('click', function(){
        random();
        player = this.textContent;
        my.textContent = player + " VS" 
        computer.textContent = com;
        result(com , player);
    })
})