JavaScript 기초 - 조건문(if/else if/else)

🌈 조건문(if/else if/else)

🔥 if문

🔥 삼항연산자

🔥 switch문

1. if문

• 조건에 따라 취야할 행동이 다를 때 조건문 사용
• 조건문은 ()안의 조건을 평가하고 그 결과를 boolean값으로 변환
• 0, "", null, undefined, NaN은 모두 false 값을 갖게 되어 해당 코드 블록이 실행되지 않음
• 이 외에 값은 불린형으로 변환 시 true가 됨으로 해당 코드 블록 실행
• 맨 처음 if()의 조건을 평가한 다음 else if()의 조건을 평가하고, 마지막으로 else의 조건을 평가
• else if와 else 구문은 필수가 아닌 선택 사항

// conditional operators : if, else if, else
const name = "jaewon";
if (name === "jaewon") {
  console.log("Welcome, Jaewon!");
} else if (name === "coder") {
  console.log("You are amazing coder");
} else {
  console.log("unknow");
} // Welcome, Jaewon!

2. 삼항연산자

• 삼항연산자는 평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2를 반환
• 삼항연산자 사용 방법 : 🔍 condition ? [true 일때 value1] : [false일 때, value2];
• if문을 더 간결하게 표현 가능함

name = "jaewon";
console.log(name === "jaewon" ? "yes" : "no"); // yes

// 기본 문법과 삼항연산자 비교1
// 기본 문법
let age = prompt('나이를 입력해주세요.', 18);
if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}
// 삼항 연산자 사용 예시
let age = prompt('나이를 입력해주세요.', 18);
let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
console.log( message );

// 기본 문법과 삼항연산자 비교2
// 기본 if문
const data = [1,2];
if (data.length === 0){
  console.log('빈 배열입니다.')
} else{
  console.log('데이터의 요소는 ' + data.length + '개 입니다.')
} // 데이터의 요소는 2개 입니다.
// 삼한연산자로 변환
desc = data.length === 0 ? '빈 배열입니다.' : '데이터의 요소는 ' + data.length + '개 입니다.' 
console.log(desc) // 데이터의 요소는 2개 입니다.

3. switch문

• 복수의 if문을 switch문으로 바꾸면 특정 변수를 다양한 상황에서 비교할 수 있고, 코드의 가독성이 높아짐
• switch문은 하나 이상의 case문으로 구성되고, default 구문이 필수는 아님
• switch문은 모든 형태의 표현식을 인수로 받음

let a = 2 + 2;
switch (a) {
  case 3:
    console.log( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    console.log( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    console.log( '비교하려는 값보다 큽니다.' );
    break;
  default:
    console.log( "어떤 값인지 파악이 되지 않습니다." );
} // 비교하려는 값과 일치합니다. -> a가 4와 같이 때문에 case 4의 기능을 실행하고 break로 빠져나옴
// switch문과 case는 모든 형태의 표현식을 인수로 받음
let a = "1";
let b = 0;
switch (+a) { // +a는 a를 숫자형으로 변환하기 때문에 1과 같음
  case b + 1:
    console.log("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.");
    break;
  default:
    console.log("이 코드는 실행되지 않습니다.");
} // 표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.

// if문과 switch문 비교
let browser = 'Chrome';
// if문
if(browser == 'Edge') {
  console.log("Edge를 사용하고 계시네요!");
} else if (browser == 'Chrome'
 || browser == 'Firefox'
 || browser == 'Safari'
 || browser == 'Opera') {
  console.log( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' );
} else {
  console.log( '현재 페이지가 괜찮아 보이길 바랍니다!' );
}
// switch문
switch (browser) {
  case 'Edge':
    console.log( "Edge를 사용하고 계시네요!" );
    break;
  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    console.log( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' );
    break;
  default:
    console.log( '현재 페이지가 괜찮아 보이길 바랍니다!' );
}