2024/04/04 조건문 'if' 와 'switch'

블로그 생성전 읽고 지나가버린 부분을 복습겸 정리

'if'문

특정 조건을 만족할 때만 특정 코드 블록을 실행하도록 하는 구문
조건은 참(True) 또는 거짓(False)으로 평가될 수 있는 표현식이어야 함.
조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행,
false면 해당코드블록 무시하고 건너뜀.

기본문법
if (조건) { 조건이 참일 때 실행될 코드 }

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if(year == 2015) {
  alert('정답입니다!')
}

'else'

if문에서 조건이 거짓일 때 실행될 코드를 지정할 수 있음.

기본문법
if (조건) { 조건이 참일 때 실행될 코드 } else { 조건이 거짓일 때 실행될 코드 }

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year == 2015) {
  alert( '정답입니다!' );
} else {
  alert( '오답입니다!' ); // 2015 이외의 값을 입력한 경우
}

'else if'

복잡한 조건 판단이 필요할 때는 else if를 사용하여 여러 조건을 순차적으로 검사할 수 있음.

기본문법
if (조건1) { 조건1이 참일 때 실행 } else if (조건2) { 조건1이 거짓, 조건2가 참일 때 실행 } else { 모든 조건이 거짓일 때 실행 }

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

else if 블록을 더 많이 붙이는 것도 가능. 마지막에 붙는 else는 필수가 아닌 선택 사항

불린형으로의 변환

if 문의 조건은 불린형(Boolean Type) 값으로 변환되어 평가됨.
특정 조건을 참(true) 또는 거짓(false)으로 간주해야 할 때,
다양한 타입의 값을 자동으로 불린형 값으로 변환한다는 의미

• 조건문에서 false로 평가 되는경우 (falsy한 값)
  *false
  *0(숫자0)
  *-0 (음수 0)
  *0n (BigInt에서의 0)
  *"", '', ```` (빈 문자열)
  *null
  *undefined
  *NaN (Not a Number)

• 조건문에서 true로 평가 되는경우(truthy한 값)
  *모든 문자열(" " 띄어쓰기 포함)은 빈 문자열이 아닌 경우
  *모든 숫자는 0, -0, NaN이 아닌 경우
  *[] (빈 배열)
  *{} (빈 객체)
  *모든 함수

if ("hello") {
    console.log("참!"); // "hello"는 빈 문자열이 아니므로 참. 
}

if (0) {
    console.log("참!"); // 0은 falsy한 값. 실행되지않음
} else {
    console.log("거짓!"); // 이 코드가 실행됨.
}

조건부 연산자'?' (삼항 연산자)

세 개의 피연산자를 가지며, 간단한 조건문을 한 줄로 표현할 수 있게 해주는 연산자
조건을 평가한 후, 조건이 참(true)이면 첫 번째 표현식을, 거짓(false)이면 두 번째 표현식을 반환

기본문법
조건 ? 표현식1 : 표현식2;

• 조건 : 참 또는 거짓으로 평가될 수 있는 표현식
• 표현식1: 조건이 참(true)일 때 평가되는 표현식.
• 표현식2: 조건이 거짓(false)일 때 평가되는 표현식.

let age = 20;
let message = (age >= 18) ? ('성인') : ('미성년자'); //괄호필요없음. 가독성때문에 감쌌음
console.log(message); // 성인

다중'?'

여러 개의 삼항 연산자를 연결하여 사용하는 것
복잡한 조건문을 간결하게 표현할 수 있지만, 너무 많이 사용하면 코드의 가독성이 떨어짐.

기본문법
조건1 ? 표현식1 : 조건2 ? 표현식2 : 표현식3;

• 조건1: 첫 번째 조건입니다. 참 또는 거짓으로 평가.
• 표현식1: 조건1이 참일 때 평가되는 표현식.
• 조건2: 조건1이 거짓일 때 평가되는 두 번째 조건.
• 표현식2: 조건2가 참일 때 평가되는 표현식.
• 표현식3: 조건2가 거짓일 때 평가되는 표현식.

let age = prompt('나이를 입력해주세요.', 18);
//괄호는 가독성때문에 
let message = (age < 3) ? ('아기야 안녕?') :  //조건1 ? true면 표현식1. false면 조건2로 
  (age < 18) ? ('안녕!') : //조건2 ? true면 표현식2. false면 조건3으로
  (age < 100) ? ('환영합니다!') : //조건3 ? true면 표현식3. false면 표현식4로
  ('나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'); //표현식4

alert( message );

실행은 가능하지만, 복잡한 조건의 경우 if-else 문을 사용할것.
로직이 복잡하거나 여러 조건을 평가해야 하는 경우에는 적합하지 않은 방법.

---

'switch'문

특정 변수의 값에 따라 다양한 코드 블록을 실행할 수 있는 조건문
if-else 문과 비슷하지만, 하나의 변수를 여러 값과 비교해야 할 때
더 효율적이고 가독성이 좋은 코드를 작성할 수 있음

기본문법
switch(표현식) { case 'value1': 코드1 break; case 'value2': 코드2 break; default: 코드3 break; }

• 표현식: 비교할 값. 이 표현식의 결과는 경우(case)에 나열된 값과 비교.
• case value: 표현식의 결과와 비교될 값입니다. 일치하는 경우 해당 case 블록의 코드가 실행.
• break: 현재의 case 블록을 빠져나와 switch 문을 종료.
  break가 없으면 다음 case로 계속 진행됨.
• default: 선택적으로 사용할 수 있는 부분.
  어떤 case도 일치하지 않을 때 실행될 코드 블록을 정의.

let fruit = "사과";

switch (fruit) {
  case "바나나":
    console.log( '바나나는 노란색' );
    break;
  case "사과":
  console.log( '사과는 빨간색.' );
    break;
  case "키위":
  console.log( '키위는 초록색' );
    break;
  default:
  console.log( "어떤 값인지 파악이 되지 않습니다." ); //사과는 빨간색.
}

fruit는 사과가 할당되있음. switch 조건에 fruit(사과)가 들어가고
밑에 케이스를 순차적으로 비교함. 사과 !== 바나나 라서 다음 case로 넘어감.
사과 === 사과 일치하면서 break문에 의해 빠져나오게 되고 종료됨.

여러 개의 "case"문 묶기

여러 조건에 대해 동일한 동작을 수행하고자 할 때 코드의 중복을 줄일 수 있음.
이런 방식은 case들이 서로 다른 값을 가지지만,
결과적으로 실행되어야 하는 로직이 동일한 경우에 유용

만약 break문을 생략하면 다음과 같은 경우가 생김.

let fruit = "사과";

switch (fruit) {
  case "바나나":
    console.log( '바나나는 노란색' );
  case "사과":
  console.log( '사과는 빨간색.' );
  case "키위":
  console.log( '키위는 초록색' );
  default:
  console.log( "어떤 값인지 파악이 되지 않습니다." ); //사과는 빨간색.
												 // 키위는 초록색
												 //어떤 값인지 파악이 되지 않습니다.
}

조건과 일치하는 case를 찾은후 case문 안에 break문이 없으면
이어지는 case문을 실행. 그 case가 조건에 맞는지 따지지 않고 다음case를 계속 실행 .
의도적으로 사용하는게 아니라면 주의해야됨.

let week = 'Monday';

switch (week) {
  case 'Monday':
  case 'Tuesday':
  case 'Wednesday':
    console.log('주중입니다.');
    break;
  case 'Thursday':
  case 'Friday':
    console.log('주말이 다가오고 있습니다.');
    break;
  case 'Saturday':
  case 'Sunday':
    console.log('주말입니다!');
    break;
  default:
    console.log('올바른 요일이 아닙니다.');
} //주중입니다

이 경우가 의도적으로 break문을 생략한 경우. 폴스루(fall-through)라고 함

자료형의 중요성

switch문은 일치 비교로 조건을 확인. (===)
비교하려는 값과 case문의 값의 형과 값이 같아야 해당 case문이 실행(타입까지 일치)

let arg = "3";

switch (arg) {
  case '0':
  case '1':
    console.log( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
  console.log( '2를 입력하셨습니다.' );
    break;

  case 3:
  console.log( '3을 입력하셨습니다.' );
    break;

  default:
  console.log( '알 수 없는 값을 입력하셨습니다.' );
} // '알 수 없는 값을 입력하셨습니다.'

변수 arg에 "3" 문자형으로 값이 할당됨.
그러나 case의 3은 숫자형. 서로 비교하면 형 자체가 다르므로 case 3은 실행되지 않고
default값으로 넘어가버림.