자바스크립트의 조건문

Dohyeon Kong·2024년 3월 22일
0

JavaScript🟡

목록 보기
3/13
post-thumbnail

업로드중..

조건문(Conditional)

조건문이란? 어떤 특별한 조건이 되었을 때만 실행되는 행동을 의미한다.

쉽게 예를 들어보자면 운전자가 신호등 앞에 서있을 때 행동할 수 있는 것은 두 가지이다.

    1. 신호등 앞에서 기다린다.
    1. 신호등을 건넌다.

이제 이 행동을 취하기 위해서는 상황이 두가지로 나뉜다.

만약 신호등이 빨강색이라면 신호등 앞에서 기다린다. 신호등이 초록색이라면 신호등을 건넌다.

이러하듯 상황에 따라 다르게 행동하도록 프로그래밍하기 위해서 조건문을 사용하게 된다.


조건문(Conditional)의 종류

조건문의 종류에는 대표적으로 if문과 switch문이 있다.

if, else, else if문

if문

if문이란 if뒤에 오는 소괄호(())안의 조건식이 참으로 평가되면 중괄호({}) 안의 코드를 실행하는 조건문을 의미한다.

  • if문을 이해하기 쉽게 말한다면 '만약 ~ 조건식이 맞다면' 이라고 생각해서 코드를 작성하면 이해하기 편하다.
  • 숫자, 문자열, undefined, null을 써도 무조건 참과 거짓을 평가한다.
  • 평가된 참(true)과 거짓(false)에 따라 중괄호({})안의 코드를 실행하거나 실행하지 않는다.
// if문의 기본 형식

if(조건식){
 	// 조건식이 참이면 실행 
}
// 특정 숫자가 짝수인지 판단하는 코드

let num = 10;
if(num %2 === 0){
 	console.log("변수 num에 할당된 숫자는 짝수"); 
}

// * 실행결과 *
// 변수 num에 할당된 숫자는 짝수

else문

else문은 if문의 조건식(())이 거짓일 때 실행되는 블록문을 의미한다.

  • else의 사전적 의미는 '또 다른'이라는 의미이며 프로그래밍적으로 생각하게 된다면 if문 조건식에 해당되지 않으면 else문을 실행한다고 생각하면 될 것이다.
  • else문은 단독으로 사용할 수 없으며 반드시 if문이 선행되어서 작성되어야 한다.
  • 하나의 if문에 하나의 else문만 사용할 수 있다.
//if문의 기본 형식

if(조건식){
 	// 조건식이 참이면 블록문 실행 
}
else{
	// 조건식이 거짓이면 블록문 실행
}
// 특정 숫자가 짝수, 홀수인지 판단하는 코드

let num = 5;
if(num %2 === 0){
 	console.log("변수 num에 할당된 숫자는 짝수"); 
}
else{
 	console.log("변수 num에 할당된 숫자는 홀수"); 
}

else if문

else if문은 else 문에 조건을 추가하고 싶을 때 사용하며, else if문의 개수에는 제한이 없다.

  • else문과 마찬가지로 단독으로 사용할 수 없으며 항상 if문 다음에 사용하고 else문보다는 먼저 사용해야 한다.
// else if문 기본 형식

if(조건식1){
  // 조건식1이 참이면 블록문을 실행 
}
else if(조건식2){
 // 조건식2가 참이면 블록문을 실행 
}
else{
 // 조건식이 모두 거짓이면 블록문을 실행 
}
// else if문 예제 문
let num = 10;
if(num > 0){
  	console.log("양수"); 
}
else if(num < 0){
  	console.log("음수"); 
}
else{
 	console.log("0");
}

// * 실행 결과 *
// 0

중첩하기

어떤 조건식을 만족할 때 어떤 블록문을 실행할지 결정하는 것을 분기 처리라고 하며, if문은 작성하려는 코드의 분기 처리에 따라 중첩해서 사용할 수 있다.

// 중첩하기

if(true){
  if(true){
  	//블록문
  }
  else{
  
  }
}
else if(true){
 if(true){
   //블록문
 }
}
else{
  if(true){
    //블록문
  }
  else if(true){
  //블록문
  }
  else{
    //블록문
   if(true){
   	//블록문
   }
  }
}

삼항 연산자에 의한 조건문

if문과 else 문을 대신해서 삼항 연산자를 사용해 식의 형태로 사용할 수 있는 조건문을 의미하며 코드 길이를 간결하게 할 수 있다는 장점을 가진 조건문이다.

// 기본 형식
표현식 ? 반환값1 : 반환값2

// 삼항 연산자에 의한 조건문 예시
let num = age >= 21 ? "21이상 " : "21미만";
  • null 값을 처리할 때 사용된다.
// null 값을 처리할 때 사용하는 코드 예시
let greeting = (person) => {
  let name = person ? person.name : "이상한 사람";
  return '${name}';
};
console.log(greeting({name : "Kong"})); // Kong
console.log(greeting(null)); // 이상한 사람
  • 연결된 조건문을 처리할 때 사용할 수 있다.
  • if문과 else문, else if문과 유사하다.
// 연결된 조건문을 처리할 때 사용하는 코드 예시
// 기본 형식
function examp() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// 위 코드와 동등한 역할을 의미한다.
function examp() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

switch문

switch문이란 switch뒤에 오는 소괄호 안의 값()과 case문이 있을 때 해당 코드를 실행하는 조건문을 의미한다.

  • 일치 여부 확인은 일치 연산자(===)를 사용한 비교 연산처럼 값과 자료형을 비교한다.
  • switch문에는 하나 이상의 case문과 default문, break문을 사용한다.
  • case문은 소괄호 안의 값과 value값이 일치하는지 판단하는 역할을 한다.
  • break문은 코드 실행을 멈춰주는 역할을 한다.
// switch문 기본 형식
switch(key){
  case value:
    // key가 value1일 때 실행할 블록문
    break;
  case value2:
    // key가 value2일 때 실행할 블록문
    break;
  default:
    // 아무것도 일치하지 않을 때 실행할 블록문
    break;
}
// switch문 예제
let food = "melon";
switch(food){
  case "melon" :
    console.log("fruit");
    break;
  case "apple" :
    console.log("fruit");
    break;
  case "banana" :
    console.log("fruit");
  	break;
  case "carrot" :
    console.log("vegetable");
    break;
  default :
    console.log("It'n not fruits and vegetables");
    break;
}

// * 실행 결과 *
// fruit
// break문을 의도적으로 생략한 switch문 예제
let food = "melon";
switch(food){
  case "melon" :
  case "apple" :
  case "banana" :
    console.log("fruit");
  	break;
  case "carrot" :
    console.log("vegetable");
    break;
  default :
    console.log("It'n not fruits and vegetables");
    break;
}
  • 해당 문처럼 break문을 의도적으로 생략하게 된다면 case문의 값과 일치하였지만 break문이 없기 때문에 break문을 만날 때까지 case문을 연속으로 실행한다.

  • 그러므로 appple 값의 case문도 실행이 되고 bananan값의 case문도 실행이 되며 banana값의 case문도 실행하다가 break 문을 만나 조건문이 종료가 된다.

  • swtich문은 default문을 생략해도 되지만 switch문 안에 case문과 default문 중 하나 이상은 있어야 한다.

if문과 조건식

if문에는 조건에 식을 사용할 수 있으며, 논리 연산자와 비교 연산자를 식에 이용할 수 있다.

  • 논리 연산자
논리 연산자설명
|| (OR 결합)피연산자 중 어느 한쪽만 true이면 결과는 true
&& (AND 결합)피연산자 양 쪽 모두 true이어야 true
! (논리 부정)피연산자가 true면 false를, false면 true를 반환
  • 비교 연산자
  1. 대소 비교 연산자
비교 연산자설명
>좌항의 값이 크면 true, 아니면 false를 반환
<우항의 값이 크면 true, 아니면 false를 반환
>=좌항의 값이 크거나 같으면 true, 아니면 false를 반환
<=우항의 값이 크거나 같으면 true, 아니면 false를 반환
  1. 등가 비교 연산자
비교 연산자설명
==두 값이 같으면 true, 아니면 false를 반환
!=두 값이 다르면 true, 아니면 false를 반환

// if문과 조건식의 예제
let score = 90;
if(score >= 90 && score <= 100){
  console.log("A++ 학점");
}
//score가 90이상이며 score가 100이하이면 "A++ 학점" 문장을 출력한다.

if문과 switch문 중 어떠한 것을 사용해야 할까?🧐

  • if문과 switch문의 결정적인 차이점은 조건의 형태이다.
  • if문은 조건에 식(Expression)을 사용하며 switch문은 조건에 값(value)을 사용한다.
  • swtich문이 조건으로 값을 받기 때문에 값이 범위일 경우에는 모든 값을 일일이 case문으로 정의를 해야한다.

// 값이 범위일 경우 switch문을 사용하게 되면 안좋은 예
let score = 90;
switch(score){
  case 90:
  //(생략)
  case 98:
  case 99:
    console.log("A++ 학점");
    break;
  default:
  	break;
}

그러므로 코드의 최적화를 위해서 범위를 이용한 조건을 작성할 때는 if문을, 값이 하나일 대는 swtich문을 사용하면 좋다.

profile
천천히, 꾸준히, 그리고 끝까지

0개의 댓글