[js] if문

mynoseis3·2024년 2월 6일

JavaScript

javascript

목록 보기

6/13

if문

프로그래밍에서 조건을 검사하고, 해당 조건이 true(참)이면
특정한 코드 블록을 실행하는 제어문

여러가지의 케이스를 처리해주기 위해 쓰인다.

if문의 형태

if (조건) {
    // 조건이 true일 때 실행되는 코드
} else if (다른 조건) {
    // 다른 조건이 true일 때 실행되는 코드
} else {
    // 위의 모든 조건이 거짓일 때 실행되는 코드
}

if문에서 조건을 작성할 때는 비교 연산자와 논리 연산자가 자주 사용된다.
이들은 조건을 평가하고, 조건이 참 또는 거짓인지를 판별하는 데 도움을 준다.

조건에 자주 쓰이는 연산자

연산자	유형	설명
`==`	비교	동일한지 비교
`===`	비교	값과 자료형이 동일한지 비교
`!=`	비교	다른지 비교
`!==`	비교	값 또는 자료형 중 하나라도 다른지 비교
`<`	비교	작음을 비교
`>`	비교	큼을 비교
`<=`	비교	작거나 같음을 비교
`>=`	비교	크거나 같음을 비교
&&	논리	AND 연산자 (모든 조건이 true여야 함)
∥	논리	OR 연산자 (하나 이상의 조건이 true여야 함)
!	논리	NOT 연산자 (조건을 부정)

== 과 === 의 결과

let a = 1
let b = "1"

console.log(a == b)  // true
console.log(a === b) // false

===은 값 뿐 아니라 자료형도 같은지 비교하므로 좀 더 엄격한 비교를 해준다.

범위 표현

예를 들어 1과 10 사이라는 조건을 표현하고 싶을 때 1<a<10 이 아니라
&& 연산자를 사용하여 표현해주어야 한다 !

let a = 5;

if (a >= 1 && a <= 10) {
    console.log("a는 1과 10 사이에 있습니다.");
} else {
    console.log("a는 1과 10 사이에 없습니다.");
}

if문 안에 if문 사용 가능

let a = 15;

if (a > 10) {
    console.log("a는 10보다 큽니다.");

    if (a > 15) {
        console.log("a는 15보다 큽니다.");
    } else {
        console.log("a는 10보다 크지만 15보다 작거나 같습니다.");
    }
} else {
    console.log("a는 10보다 작거나 같습니다.");
}

!= 예시

let c = 20;

if (c != 10) {
    console.log("c는 10이 아닙니다.");
} else {
    console.log("c는 10입니다.");
}

// 결과 : c는 10이 아닙니다.

if문 문제 풀기

사용자에게 숫자를 입력받아 0, 양수, 음수 판별하는 프로그램 구현

html

 <h2>숫자를 입력하세요 : ) </h2>
  <input type="text" id="user-input" placeholder="숫자 입력...">
  <button onclick="check()">send</button>

function check() {
  // 사용자 입력 가져오기
  let input = document.getElementById("user-input").value;

  // 입력된 값이 숫자인지 확인
  if (!isNaN(input)) {
    let number = parseFloat(input);

    // 입력된 숫자 판단하기
    if (number === 0) {
      alert("입력된 숫자는 0입니다.");
    } else if (number > 0) {
      alert("입력된 숫자는 양수입니다.");
    } else {
      alert("입력된 숫자는 음수입니다.");
    }
  } else {
    alert("입력된 값이 숫자가 아닙니다.");
  }
}

isNaN / parseFloat 함수

💡 !isNaN(input) : isNaN 함수는 주어진 값이 숫자인지를 판별하는 함수이며 숫자일 경우 false를 반환 / 그렇지 않을 경우 true를 반환한다.
여기서 ! 연산자를 사용하여 결과를 부정하면, 입력값이 숫자인 경우에는 true가 되고, 숫자가 아닌 경우에는 false가 된다.
따라서 이 조건문은 입력값이 숫자인 경우에만 실행된다.

💡 let number = parseFloat(input); : parseFloat 함수를 사용하여 입력값을 부동소수점 숫자로 변환하고, 이를 number 변수에 저장하여 number 변수에는 숫자 값만이 저장되게 된다.

이를 통해 사용자가 입력한 값이 숫자인지를 먼저 확인하고, 숫자로 변환하여 변수에 저장한 후에 어떤 조건에 만족하는지 판별하게 된다.

결과

점수에 따라 등급을 부여하는 프로그램 구현


let report = prompt("레포트 점수");

// 입력값이 빈 문자열인 경우
if (report === "") {
  console.log("입력된 값이 없습니다.");
} else {
  // 입력값을 숫자로 변환
  let score = parseFloat(report);

  // 점수가 0 이상 100 이하인지 확인
  if (score >= 0 && score <= 100) {
    if (score >= 90 && score <= 100) {
      console.log("A");
    } else if (score >= 80 && score < 90) {
      console.log("B");
    } else if (score >= 70 && score < 80) {
      console.log("C");
    } else if (score >= 60 && score < 70) {
      console.log("D");
    } else {
      console.log("F");
    }
  } else {
    console.log("범위에 없는 점수입니다.");
  }
}

배열+if문 응용 문제
배열 요소를 확인하여 합격/예비/탈락 구분하는 프로그램 구현

// 사용자로부터 스킬을 입력 받는다.
function getUserSkills() {
  const skills = prompt("보유한 스킬을 입력하세요 (쉼표로 구분하여 여러 개 입력 가능)");
  return skills.split(",").map(skill => skill.trim()); 
  // 쉼표로 구분된 스킬들을 배열로 변환하여 반환
}

// 배열 요소를 확인하여 합격/예비/탈락을 구분하는 함수
function checkSkills(skills) {
  const hasHtml = skills.includes("HTML");
  const hasReact = skills.includes("React");

  if (hasHtml && hasReact) {
    return "합격";
  } else if (hasHtml || hasReact) {
    return "예비";
  } else {
    return "탈락";
  }
}

// 메인 프로그램
function main() {
  const userSkills = getUserSkills();
  const result = checkSkills(userSkills);
  console.log(`결과: ${result}`);
}

// 메인 함수 실행
main();