JavaScript의 if 문 내부에 여러 조건 지정

JavaScript에서는 각 조건을 if 문의 괄호 안에 넣습니다. 모든 조건이 참이어야 한다면 &&로, 하나 이상의 조건이 참이면 된다면 ||로 조건을 연결하세요. 두 연산자를 함께 사용할 때는 괄호로 논리를 명확히 하고, 조건마다 서로 다른 동작이 필요하면 if...else if 체인을 사용하세요.

JavaScript if 문에서 &&와 ||로 조건 결합하기

if 조건에서 &&는 두 피연산자가 모두 참으로 평가되어야 하고, ||는 피연산자 중 하나 이상이 참으로 평가되면 됩니다. JavaScript 논리 연산자는 불리언이 아닐 수도 있는 피연산자 값 중 하나를 반환하며, if 문은 그 결과가 참인지 확인합니다. 예를 들어 age >= 18 && hasTicket은 성인이면서 티켓도 있는 경우에만 동작을 허용합니다. 조건 중 하나라도 거짓으로 평가되면 결합된 조건도 거짓으로 평가됩니다.

예를 들어 isAdmin || isOwner는 사용자가 관리자이거나 해당 항목의 소유자일 때 동작을 허용합니다. 필요한 규칙에 따라 연산자를 선택하세요. “모두 만족”에는 &&를, “하나라도 만족”에는 ||를 사용합니다.

이 예제에서 첫 번째 검사는 성인이면서 티켓이 있는 경우만 허용합니다. 두 번째 검사는 사용자가 관리자이거나 항목의 소유자인 경우를 허용합니다.

이 예제를 실행해 보세요:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const visitors = [
  { name: "Ava", age: 20, hasTicket: true, isAdmin: false, isOwner: false },
  { name: "Ben", age: 16, hasTicket: true, isAdmin: false, isOwner: true },
  { name: "Cy", age: 30, hasTicket: false, isAdmin: true, isOwner: false }
];

for (const visitor of visitors) {
  if (visitor.age >= 18 && visitor.hasTicket) {
    console.log(`${visitor.name}: entry allowed`);
  }

  if (visitor.isAdmin || visitor.isOwner) {
    console.log(`${visitor.name}: can manage the item`);
  }
}

Ava: entry allowed
Ben: can manage the item
Cy: can manage the item

조건에는 불리언 속성과 숫자 비교가 사용되므로, 연산자가 결과를 결합하기 전에 각 부분을 따로 살펴볼 수 있습니다. 실제 프로그램에서는 예시 값을 애플리케이션의 값으로 바꾸세요.

괄호와 연산자 우선순위로 &&와 || 안전하게 결합하기

하나의 조건에서 두 연산자를 함께 사용할 수 있습니다. JavaScript에서는 &&가 ||보다 먼저 평가되므로 isMember || hasCoupon && cartTotal >= 50은 isMember || (hasCoupon && cartTotal >= 50)과 같습니다. 이 조건은 모든 회원을 허용하거나, 쿠폰이 있고 장바구니 금액이 50 이상인 비회원도 허용합니다.

규칙을 다르게 묶어야 하거나 의도한 규칙을 더 쉽게 읽을 수 있도록 하려면 괄호를 추가하세요. 예를 들어 (isMember || hasCoupon) && cartTotal >= 50은 회원과 쿠폰 보유자 모두에게 최소 금액 조건을 요구합니다. 두 식은 서로 같은 의미가 아닙니다. JavaScript 연산자의 우선순위는 MDN 연산자 우선순위 참고 자료에서 확인할 수 있습니다.

특정 숫자나 문자열과 값을 비교할 때는 status === "ready"처럼 일치 비교 연산자인 ===를 사용하세요. 이렇게 하면 느슨한 일치 연산자(==)가 수행하는 형 변환을 피할 수 있습니다. 논리 연산자는 단락 평가도 합니다. 왼쪽 피연산자가 거짓이면 &&는 오른쪽 피연산자를 평가하지 않고, 왼쪽 피연산자가 참이면 ||는 오른쪽 피연산자를 건너뜁니다. 이는 user !== null && user !== undefined && user.active처럼 조건을 확인한 뒤 안전하게 접근하는 데 유용합니다.

조건마다 다른 동작이 필요하면 if...else if 사용하기

하나의 if 조건은 한 가지 동작을 위한 검사를 결합합니다. 값에 따라 여러 동작 중 하나를 선택해야 한다면 if...else if...else 체인을 작성하세요. JavaScript는 분기를 순서대로 확인하고, 조건이 참인 첫 번째 분기를 실행한 뒤 같은 체인의 나머지 분기는 건너뜁니다. 마지막 else는 선택 사항이며, 앞선 조건에 해당하지 않는 값을 처리합니다.

예를 들어 score >= 90, score >= 70, score >= 50 같은 조건으로 점수를 구간별로 분류할 수 있습니다. 가장 높은 구간부터 확인하세요. 점수가 95라면 세 비교를 모두 만족하지만, 체인에서는 처음 일치하는 분기만 실행됩니다. 다음 예제는 각 점수 구간에 서로 다른 동작 레이블을 지정합니다:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const score = 95;
let action;

if (score >= 90) {
  action = "excellent";
} else if (score >= 70) {
  action = "pass";
} else if (score >= 50) {
  action = "review";
} else {
  action = "retry";
}

score가 95이면 action은 "excellent"가 됩니다. 점수가 낮은 기준도 만족하지만, JavaScript는 첫 번째 일치 항목을 찾은 뒤 나머지 분기를 건너뜁니다. 대신 각각 별도의 if 문을 사용하면 같은 점수에 여러 동작이 실행될 수 있습니다.

각 분기의 조건과 동작이 서로 맞도록 작성하세요. 예를 들어 더 높은 구간을 먼저 확인하므로 score >= 70 분기는 70 이상 90 미만의 점수에 해당합니다. 정확한 값을 비교할 때는 ===를 사용하고, score >= 70 && score < 90처럼 범위를 직접 확인할 때는 비교를 &&로 결합하세요.