JavaScript에서 조건문을 작성하는 방법

소개

프로그래밍에서는 사용자 입력이나 기타 요인에 따라 다른 코드 블록을 실행해야 하는 경우가 많이 있습니다.

예를 들어, 각 필드가 제대로 채워진 경우 양식을 제출하고 일부 필수 필드가 누락된 경우 해당 양식이 제출되지 않도록 할 수 있습니다. 이와 같은 작업을 수행하기 위해 모든 프로그래밍 언어의 필수적인 부분인 조건문이 있습니다.

조건문은 true 또는 false의 결과에 따라 특정 작업을 실행합니다.

표시될 수 있는 JavaScript 조건문의 몇 가지 예는 다음과 같습니다.

사용자의 위치를 확인하고 국가에 따라 올바른 언어를 표시
제출 시 양식을 보내거나 누락된 필수 필드 옆에 경고 표시
클릭 이벤트에서 드롭다운 열기 또는 이미 열려 있는 경우 드롭다운 닫기
사용자가 법정 음주 연령을 초과한 경우 주류 공급업체의 웹사이트 표시
호텔 예약 양식을 표시하지만 호텔이 예약된 경우 표시하지 않음

조건문은 컴퓨터 프로그램의 논리, 의사 결정 또는 흐름 제어의 일부입니다. 조건문을 \Choose Your Own Adventure\ 책이나 순서도와 비교할 수 있습니다.

이 자습서에서는 if, else 및 else if 키워드를 포함한 조건문을 살펴보겠습니다. 삼항 연산자도 다룰 것입니다.

if 문

가장 기본적인 조건문은 if 문입니다. if 문은 문이 참인지 거짓인지 평가하고 문이 true를 반환하는 경우에만 실행됩니다. false 결과의 경우 코드 블록이 무시되고 프로그램이 다음 섹션으로 건너뜁니다.

if 문은 if 키워드와 괄호 안의 조건, 중괄호 사이에 실행될 코드로 작성됩니다. 간단히 말해서 if() {}로 쓸 수 있습니다.

다음은 기본적인 if 문에 대한 더 긴 조사입니다.

if (condition) {
	// code that will execute if condition is true
}

if 문의 내용은 들여쓰기되며 실행할 코드 블록을 포함하는 중괄호는 함수 블록처럼 세미콜론으로 끝나지 않습니다.

예를 들어 쇼핑 앱을 생각해 봅시다. 예를 들어 이 앱의 기능을 위해 계정에 일정 금액을 예치한 사용자는 상점에서 항목을 구매하려고 합니다.

// Set balance and price of item
const balance = 500;
const jeans = 40;

// Check if there are enough funds to purchase item
if (jeans <= balance) {
  console.log("You have enough money to purchase the item!");
}

OutputYou have enough money to purchase the item!

500의 계정 잔액이 있고 40에 청바지를 사고 싶습니다. 작거나 같음 연산자를 사용하여 청바지 가격이 보유한 자금보다 작거나 같은지 확인할 수 있습니다. jeans <= balance는 true로 평가되므로 조건이 통과되고 코드 블록이 실행됩니다.

새 예에서는 사용 가능한 잔액보다 더 많은 비용이 드는 새 상점 항목을 생성합니다.

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
	console.log("You have enough money to purchase the item!");
}

이 예는 phone <= balance가 false로 평가되기 때문에 출력이 없습니다. 코드 블록은 단순히 무시되고 프로그램은 다음 줄로 진행됩니다.

다른 진술

if 문을 사용하면 문이 true로 평가될 때만 코드를 실행하지만 종종 조건이 실패하면 다른 일이 일어나기를 원할 것입니다.

예를 들어 양식이 제대로 제출되지 않은 경우 어떤 필드가 올바르게 채워졌는지 사용자에게 알려주는 메시지를 표시할 수 있습니다. 이 경우 원래 조건이 성공하지 못하는 경우 실행할 코드인 else 문을 활용합니다.

else 문은 if 문 뒤에 작성되며 괄호 안에 조건이 없습니다. 기본 if...else 문의 구문은 다음과 같습니다.

if (condition) {
	// code that will execute if condition is true
} else {
	// code that will execute if condition is false
}

위와 동일한 예를 사용하여 계정의 자금이 너무 적은 경우 표시할 메시지를 추가할 수 있습니다.

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
	console.log("You have enough money to purchase the item!");
} else {
	console.log("You do not have enough money in your account to purchase this item.");
}

OutputYou do not have enough money in your account to purchase this item.

if 조건이 성공하지 않았으므로 코드는 else 문에 있는 내용으로 이동합니다.

이것은 경고를 표시하거나 사용자가 앞으로 나아가기 위해 취해야 할 조치를 알려주는 데 매우 유용할 수 있습니다. 일반적으로 성공과 실패 모두에 대해 작업이 필요하므로 단독 if 문보다 if...else가 더 일반적입니다.

다른 if 문

if 및 else를 사용하면 조건이 true인지 false인지에 따라 코드 블록을 실행할 수 있습니다. 그러나 때로는 여러 가지 가능한 조건과 출력이 있을 수 있으며 단순히 두 가지 이상의 옵션이 필요할 수 있습니다. 이를 수행하는 한 가지 방법은 가능한 결과를 두 개 이상 평가할 수 있는 else if 문을 사용하는 것입니다.

다음은 if 문, 여러 else if 문 및 else 문이 포함된 코드 블록의 기본 예입니다. 조건이 true로 평가되었습니다.

if (condition a) {
	// code that will execute if condition a is true
} else if (condition b) {
	// code that will execute if condition b is true
} else if (condition c) {
	// code that will execute if condition c is true
} else {
	// code that will execute if all above conditions are false
}

JavaScript는 모든 명령문을 순서대로 실행하려고 시도하고 그 중 어느 것도 성공하지 못하면 기본적으로 else 블록으로 설정됩니다.

필요한 만큼 else if 문을 사용할 수 있습니다. 많은 else if 문의 경우 가독성을 위해 switch 문이 선호될 수 있습니다.

여러 else if 문의 예로, 100점 만점에 점수를 기준으로 문자 등급을 출력하는 등급 앱을 만들 수 있습니다.

이 앱의 요구 사항은 다음과 같습니다.

90점 이상은 A입니다
80~89점은 B입니다.
70~79점은 C입니다.
60~69점은 D입니다.
59점 이하는 F입니다.

아래에서 간단한 if, else 및 else if 문 집합을 만들고 주어진 등급에 대해 테스트합니다.

// Set the current grade of the student
let grade = 87;

// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
  console.log("A");
} else if (grade >= 80) {
  console.log("B");
} else if (grade >= 70) {
  console.log("C");
} else if (grade >= 60) {
  console.log("D");
} else {
  console.log("F");
}

OutputB

이 예에서는 먼저 90보다 크거나 같은 가장 높은 점수를 확인합니다. 그 후, else if 문은 80, 70 및 60보다 큰지 확인합니다. 낙제 등급의 기본 else.

우리의 등급 값인 87은 기술적으로 C, D 및 F 에도 적용됩니다. , 성공한 첫 번째 문에서 문이 중지됩니다. 따라서 첫 번째 일치 항목인 B의 출력을 얻습니다.

삼항 연산자

조건부 연산자라고도 하는 삼항 연산자는 if...else 문의 축약형으로 사용됩니다.

삼항 연산자는 아래와 같이 물음표(?) 뒤에 콜론(:)이 오는 구문으로 작성됩니다.

(condition) ? expression on true : expression on false

위의 명령문에서 조건이 먼저 작성되고 그 뒤에 ?가 작성됩니다. 첫 번째 식은 true에서 실행되고 두 번째 식은 false에서 실행됩니다. 보다 간결한 구문을 사용하는 if...else 문과 매우 유사합니다.

이 예에서는 사용자가 21 이상인지 확인하는 프로그램을 만듭니다. 그렇다면 콘솔에 You may enter가 인쇄됩니다. 그렇지 않은 경우 콘솔에 You may not enter.가 인쇄됩니다.

// Set age of user
let age = 20;

// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

// Print output
oldEnough;

Output'You may not enter.'

사용자의 나이가 21 미만이었기 때문에 실패 메시지가 콘솔에 출력되었습니다. 이에 해당하는 if...else는 if 문에서 \You may enter.\이고 \You may enter.\입니다. not enter.\를 else 문에 입력합니다.

결론

조건문은 프로그램의 출력을 결정하는 흐름 제어를 제공합니다. 이들은 프로그래밍의 기본 빌딩 블록 중 하나이며 거의 모든 프로그래밍 언어에서 찾을 수 있습니다.

이 기사에서는 if, else 및 else if 키워드를 사용하는 방법과 명령문의 중첩 및 사용법에 대해 배웠습니다. 삼항 연산자.