홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

조건부 분기: if, '?'

저자：Eve Cole 업데이트 시간：2025-01-09 15:52:22

때로는 다양한 조건에 따라 다양한 작업을 수행해야 하는 경우도 있습니다.

이를 위해 if 문과 조건 연산자 ? 사용할 수 있습니다. , 이는 "물음표" 연산자라고도 합니다.

"if" 문

if(...) 문은 괄호 안의 조건을 평가하고 결과가 true 이면 코드 블록을 실행합니다.

예를 들어:

 let year = 프롬프트('ECMAScript-2015 사양이 발표된 연도는 무엇입니까?', '');

if (연도 == 2015) Alert( '당신 말이 맞아요!' );

위의 예에서 조건은 간단한 동일성 검사( year == 2015 )이지만 훨씬 더 복잡할 수 있습니다.

두 개 이상의 명령문을 실행하려면 코드 블록을 중괄호로 묶어야 합니다.

 if (연도 == 2015) {
  Alert( "맞습니다!" );
  Alert( "당신은 정말 똑똑해요!" );
}

실행할 문이 하나뿐이더라도 if 문을 사용할 때마다 코드 블록을 중괄호 {} 로 래핑하는 것이 좋습니다. 그렇게 하면 가독성이 향상됩니다.

부울 변환

if (…) 문은 괄호 안의 표현식을 평가하고 결과를 부울로 변환합니다.

유형 변환 장의 변환 규칙을 기억해 보겠습니다.

  • 숫자 0 , 빈 문자열 "" , null , undefined 및 NaN 모두 false 됩니다. 그렇기 때문에 "거짓" 값이라고 합니다.

  • 다른 값은 true 가 되므로 "truthy"라고 합니다.

따라서 이 조건의 코드는 절대 실행되지 않습니다.

 if (0) { // 0은 거짓입니다.
  ...
}

...그리고 이 조건 내에서는 항상 다음과 같습니다.

 if (1) { // 1은 참입니다.
  ...
}

다음과 같이 사전 평가된 부울 값을 if 에 전달할 수도 있습니다.

 cond = (연도 == 2015); // 동등성은 true 또는 false로 평가됩니다.

if (조건) {
  ...
}

"else" 절

if 문에는 선택적인 else 블록이 포함될 수 있습니다. 조건이 거짓일 때 실행됩니다.

예를 들어:

 let year = 프롬프트('ECMAScript-2015 사양이 발표된 연도는 무엇입니까?', '');

if (연도 == 2015) {
  Alert( '당신의 추측이 맞았습니다!' );
} 또 다른 {
  Alert( '어떻게 그렇게 틀릴 수 있나요?' ); // 2015를 제외한 모든 값
}

여러 조건: “else if”

때로는 조건의 여러 변형을 테스트하고 싶을 때도 있습니다. else if 절을 사용하면 그렇게 할 수 있습니다.

예를 들어:

 let year = 프롬프트('ECMAScript-2015 사양이 발표된 연도는 무엇입니까?', '');

if (연도 < 2015) {
  Alert( '너무 이르다...' );
} else if (연도 > 2015) {
  경고( '너무 늦었습니다' );
} 또 다른 {
  Alert( '정확히!' );
}

위 코드에서 JavaScript는 먼저 year < 2015 확인합니다. 이것이 거짓이면 다음 조건 year > 2015 로 이동합니다. 그것도 거짓이라면 마지막 alert 표시됩니다.

블록이 else if 있을 수 있습니다. 마지막 else 선택 사항입니다.

조건부 연산자 '?'

때로는 조건에 따라 변수를 할당해야 할 때도 있습니다.

예를 들어:

 액세스 허용을 허용합니다.
let age = 프롬프트('당신은 몇 살입니까?', '');

if (나이 > 18) {
  액세스허용 = true;
} 또 다른 {
  접근 허용 = 거짓;
}

경고(접속허용);

소위 "조건부" 또는 "물음표" 연산자를 사용하면 더 짧고 간단한 방법으로 이를 수행할 수 있습니다.

연산자는 물음표 ? 로 표시됩니다. . 연산자에 세 개의 피연산자가 있기 때문에 "삼항"이라고도 합니다. 실제로 JavaScript에서 이렇게 많은 연산자가 있는 유일한 연산자입니다.

구문은 다음과 같습니다.

 결과 = 조건으로 놔두시겠습니까? 값1 : 값2;

condition 평가됩니다. 참이면 value1 반환되고, 그렇지 않으면 value2 반환됩니다.

예를 들어:

 accessAllowed = (age > 18) 하시겠습니까? 사실 : 거짓;

기술적으로 age > 18 근처에서는 괄호를 생략할 수 있습니다. 물음표 연산자는 우선순위가 낮으므로 > 비교 후에 실행됩니다.

이 예제는 이전 예제와 동일한 작업을 수행합니다.

 // 어쨌든 비교 연산자 "age > 18"이 먼저 실행됩니다.
//(괄호로 묶을 필요가 없습니다)
accessAllowed = 연령 > 18이 되도록 하시겠습니까? 사실 : 거짓;

하지만 괄호를 사용하면 코드를 더 쉽게 읽을 수 있으므로 사용하는 것이 좋습니다.

참고:

위의 예에서는 비교 자체가 true/false 반환하므로 물음표 연산자를 사용하지 않아도 됩니다.

 //동일
accessAllowed = 연령 > 18세;

다수의 '?'

일련의 물음표 연산자 ? 둘 이상의 조건에 따라 달라지는 값을 반환할 수 있습니다.

예를 들어:

 나이 = 프롬프트('나이?', 18);

메시지 = (나이 < 3) ? '안녕, 자기야!' :
  (나이 < 18) ? '안녕하세요!' :
  (연령 < 100) ? '인사말!' :
  '정말 특이한 나이군요!';

경고( 메시지 );

처음에는 무슨 일이 일어나고 있는지 파악하기 어려울 수 있습니다. 그러나 좀 더 자세히 살펴보면 이것이 단지 일반적인 테스트 시퀀스라는 것을 알 수 있습니다.

  1. 첫 번째 물음표는 age < 3 인지 여부를 확인합니다.

  2. true인 경우 'Hi, baby!' 를 반환합니다. . 그렇지 않으면 콜론 “:” 뒤의 표현식으로 계속 진행하여 age < 18 확인합니다.

  3. 그것이 사실이라면 – 'Hello!' 반환합니다. . 그렇지 않으면 다음 콜론 “:” 다음에 표현식이 계속되어 age < 100 확인합니다.

  4. 그것이 사실이라면 – 'Greetings!' 반환합니다. . 그렇지 않으면 마지막 콜론 “:” 이후의 표현식으로 계속되어 'What an unusual age!' 반환합니다. .

if..else 사용하면 다음과 같습니다.

 if (나이 < 3) {
  message = '안녕, 자기야!';
} else if (나이 < 18) {
  message = '안녕하세요!';
} else if (연령 < 100) {
  message = '안녕하세요!';
} 또 다른 {
  message = '참 특이한 나이네요!';
}

'?'의 비전통적인 사용

때로는 물음표 ? if 를 대체하여 사용됩니다.

 let company = 프롬프트('자바스크립트를 만든 회사는 어디입니까?', '');

(회사 == '넷스케이프') ?
   Alert('맞습니다!') : Alert('틀렸습니다.');

company == 'Netscape' 조건에 따라 ? 뒤의 첫 번째 또는 두 번째 표현. 실행되고 경고가 표시됩니다.

여기서는 결과를 변수에 할당하지 않습니다. 대신 조건에 따라 다른 코드를 실행합니다.

이런 방식으로 물음표 연산자를 사용하는 것은 권장되지 않습니다.

표기법은 일부 프로그래머에게 매력적인 if 문보다 짧습니다. 하지만 가독성이 떨어집니다.

비교를 위해 if 사용하는 동일한 코드는 다음과 같습니다.

 let company = 프롬프트('자바스크립트를 만든 회사는 어디입니까?', '');

if (회사 == '넷스케이프') {
  Alert('맞아요!');
} 또 다른 {
  Alert('틀렸습니다.');
}

우리의 눈은 코드를 수직으로 스캔합니다. 여러 줄에 걸쳐 있는 코드 블록은 긴 가로 명령 세트보다 이해하기 쉽습니다.

물음표 연산자의 목적은 무엇입니까 ? 조건에 따라 하나의 값 또는 다른 값을 반환하는 것입니다. 바로 그 용도로 사용해주세요. 다양한 코드 분기를 실행해야 할 때 사용 if .

작업

if (0이 포함된 문자열)

중요도: 5

alert 표시됩니까?

 만약 ("0") {
  경고( '안녕하세요' );
}

예, 그럴 것입니다.

빈 문자열(및 "0" 비어 있지 않음)을 제외한 모든 문자열은 논리적 컨텍스트에서 true 됩니다.

다음을 실행하고 확인할 수 있습니다.

 만약 ("0") {
  경고( '안녕하세요' );
}

자바스크립트의 이름

중요도: 2

if..else 구문을 사용하여 'JavaScript의 "공식" 이름은 무엇입니까?'라고 묻는 코드를 작성합니다.

방문자가 "ECMAScript"를 입력하면 "Right!"이 출력되고, 그렇지 않으면 "You don't Know?"가 출력됩니다. ECMA스크립트!”

새 창에서 데모

 <!DOCTYPE HTML>
<html>

<본문>
  <스크립트>
    '엄격하게 사용하세요';

    let value = 프롬프트('자바스크립트의 "공식" 이름은 무엇입니까?', '');

    if (값 == 'ECMAScript') {
      Alert('맞아요!');
    } 또 다른 {
      Alert("모르시나요? ECMAScript!");
    }
  </script>


</body>

</html>

표지판을 보여주세요

중요도: 2

if..else 사용하여 prompt 통해 숫자를 가져온 다음 alert 에 표시하는 코드를 작성합니다.

  • 1 , 값이 0보다 큰 경우,

  • -1 , 0보다 작은 경우,

  • 0 , 0인 경우.

이 작업에서는 입력이 항상 숫자라고 가정합니다.

새 창에서 데모

 let value = 프롬프트('숫자를 입력하세요', 0);

if (값 > 0) {
  경고( 1 );
} else if (값 < 0) {
  경고( -1 );
} 또 다른 {
  경고( 0 );
}

'if'를 '?'로 다시 작성합니다.

중요도: 5

조건 연산자 '?' 사용하는 if 이를 다시 작성하세요. :

 결과를 보자;

만약 (a + b < 4) {
  결과 = '아래';
} 또 다른 {
  결과 = '오버';
}

 결과 = (a + b < 4) 로 놔두시겠습니까? '아래' : '위';

'if..else'를 '?'로 다시 작성합니다.

중요도: 5

여러 삼항 연산자 '?' 를 사용하여 if..else 다시 작성하세요. .

가독성을 위해 코드를 여러 줄로 분할하는 것이 좋습니다.

 메시지를 보내십시오;

if (로그인 == '직원') {
  메시지 = '안녕하세요';
} else if (로그인 == '감독') {
  message = '안녕하세요';
} else if (로그인 == '') {
  message = '로그인 안됨';
} 또 다른 {
  메시지 = '';
}

 메시지 = (로그인 == '직원') 하시겠습니까? '안녕하세요' :
  (로그인 == '감독') ? '인사말':
  (로그인 == '') ? '로그인 없음':
  '';
관련 기사