정보실

웹학교

정보실

javascript JavaScript로 조건문을 작성하는 방법 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript로 조건문을 작성하는 방법 


소개 


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


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


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


JavaScript 조건 문의 몇 가지 예는 다음과 같습니다.

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

조건문은 컴퓨터 프로그램의 논리, 의사 결정 또는 흐름 제어의 일부입니다. 조건문을 “Choose Your Own Adventure” 책 또는 플로우 차트와 비교할 수 있습니다.


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


https://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript 


If 문 


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


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!");
}
Output
You have enough money to purchase the item!

우리는 계좌 잔고가 500이고 40 인 청바지를 구입하려고 합니다. 작거나 같은 연산자를 사용하여 청바지 가격이 보유한 금액보다 적은지 확인합니다. 청바지 <= 밸런스가 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로 평가되므로 이 예제에는 출력이 없습니다. 코드 블록은 단순히 무시되고 프로그램은 다음 줄로 진행합니다.


Else Statement 


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.");
}
Output
You do not have enough money in your account to purchase this item.

if 조건이 성공하지 못했기 때문에 코드는 else 문의 내용으로 이동합니다.


경고를 표시하거나 사용자에게 앞으로 나아가 야 할 조치를 알려주는 데 매우 유용합니다. 일반적으로 성공과 실패에 대한 조치가 필요하므로 if ... else가 solo if 문보다 일반적입니다.


Else if Statement 


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


다음은 if 문, 여러 개의 else if 문 및 조건이 true로 평가되지 않은 경우 else 문을 포함하는 코드 블록의 기본 예입니다.


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 블록으로 기본 설정됩니다.


필요한 경우 if 문을 많이 가질 수 있습니다. 다른 많은 if 문의 경우 가독성을 높이기 위해 switch 문을 사용하는 것이 좋습니다.


여러 다른 if 문의 예로, 100 점 만점에 기반한 문자 등급을 출력하는 채점 앱을 만들 수 있습니다.


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


  • Grade of 90 and above is an A
  • Grade of 80 to 89 is a B
  • Grade of 70 to 79 is a C
  • Grade of 60 to 69 is a D
  • Grade of 59 or below is an 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");
}
Output
B

이 예에서는 먼저 90보다 크거나 같은 가장 높은 점수를 확인합니다. 그 후 else if 문은 실패한 성적의 기본 값에 도달 할 때까지 80, 70 및 60보다 큰 값을 확인합니다. .


C, D 및 F의 경우 87의 등급 값이 기술적으로도 사실이지만, 성명서는 성공한 첫 번째 진술에서 멈출 것입니다. 따라서 첫 번째 일치 인 B의 출력을 얻습니다.


삼항 연산자 (Ternary Operator) 


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


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

(condition) ? expression on true : expression on false

위의 문장에서 조건은 먼저 쓰여지고 그 뒤에?가 옵니다. 첫 번째 표현식은 true에서 실행되고 두 번째 표현식은 false에서 실행됩니다. 보다 간결한 구문으로 if ... else 문과 매우 유사합니다.


이 예에서는 사용자가 21 세 이상인지 확인하는 프로그램을 만듭니다. 만약 그렇다면, "입력 할 수 있습니다"라는 메시지가 콘솔에 표시됩니다. 그렇지 않은 경우 "입력 할 수 없습니다."라고 인쇄됩니다. 콘솔에.

// 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 문에 "입력 할 수 없습니다." else 문에서.


결론 


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


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



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 36회 ]  작성일19-10-28 12:10

웹학교