본문 바로가기
언어

Conditional branching: if, '?' (JavaScript)

by adawn 2025. 3. 12.

출처: https://javascript.info/ifelse

 

Conditional branching: if, '?'

 

javascript.info

 

 

조건부 분기: if, ?

떄떄로 우리는 조건에 따라 다른 동작을 수행해야 함.

이를 위해  if문과 삼항 연산자(?)를 사용할 수 있음.

 

if문

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

 

예제 : 

 

let year = prompt('ECMAScript-2015 사양이 발표된 연도는?', '');

if (year == 2015) alert('정답입니다!');

 

위 코드에서 year == 2015 조건이 참이면 alert이 실행됨.

 

여러 줄의 코드를 실행하려면 중괄호 { } 로 묶어야 함. 

 

if (year == 2015) {
  alert("정답입니다!");
  alert("당신은 정말 똑똑하군요!");
}

 

if 문을 사용할 때 코드 블록이 한 줄이어도 가독성을 위해 항상 {}를 사용하는 것이 좋음.

 

불리언 변환

if(...) 문은 괄호 안의 표현식을 평가한 후 불리언 값으로 변환됨.

 

불리언 변환 규칙:

 

0 , 빈 문자열 "", null , undefined , NaN -> false(falsy 값)

그 외의 값 -> true(truthy 값) 

 

if (0) {  // 0은 falsy
  ...
}

if (1) {  // 1은 truthy
  ...
}

 

또한 미리 평가된 불리언 값을 사용할수도 있음.

 

let cond = (year == 2015); // true 또는 false
if (cond) {
  ...
}

 

else 문

let year = prompt('ECMAScript-2015 사양이 발표된 연도는?', '');

if (year == 2015) {
  alert('정답입니다!');
} else {
  alert('틀렸습니다!'); // 2015가 아닌 경우 실행
}

 

if문에는 선택적으로 else 블록을 추가할수도 있으며 , 조건이 거짓일 떄 실행됨.

 

else if문 

여러 개의 조건을 확인할 때 else if를 사용할 수 있음.

 

let year = prompt('ECMAScript-2015 사양이 발표된 연도는?', '');

if (year < 2015) {
  alert('너무 이르네요...');
} else if (year > 2015) {
  alert('너무 늦었어요.');
} else {
  alert('정확합니다!');
}

 

JavaScript는 위에서부터 조건을 확인하며 , 첫번째 참(true)인 조건을 실행한 후에 종료함.

 

삼항 연산자(?)

변수에 조건에 따라 다른 값을 할당하려면 삼항 연산자를 사용할 수 있음.

 

예시 : 

 

let accessAllowed;
let age = prompt('나이가 몇 살인가요?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

 

위 코드는 삼항 연산자를 사용하여 더 짧고 간단하게 작성할 수 있음.

 

삼항 연산자의 문법 : 

 

let result = condition ? value1 : value2;

 

조건을 평가하여 , 참(true)이면 value 1을 , 그렇지 않으면 value2를 반환함.

 

예시 : 

 

let accessAllowed = (age > 18) ? true : false;

 

기술적으로 괄호 없이도 작성할 수 있음. 

 

let accessAllowed = age > 18 ? true : false;

 

그러나 가독성을 위해 괄호를 넣는 것이 좋음.

 

참고 : 위 예제에서는 비교 연산 자체가 true 또는 false를 반환하므로 , 삼항 연산자를 사용하지 않고 아래처럼 작성 할 수도 있음.

 

어차피 삼항 연산자를 써도 true , false를 반환하니까 그냥 써도 된다는 의미.

 

let accessAllowed = age > 18;

 

 

다중 ? 연산자

연속된 삼항 연산자 ?를 사용하면 여러 조건에 따라 값을 반환할 수 있음.

 

예시 : 

 

let age = prompt('나이?', 18);

let message = (age < 3) ? '안녕, 아기야!' :
  (age < 18) ? '안녕하세요!' :
  (age < 100) ? '반갑습니다!' :
  '정말 특이한 나이네요!';

alert(message);

 

위 코드는 아래의 if..else 구문과 동일함.

 

if (age < 3) {
  message = '안녕, 아기야!';
} else if (age < 18) {
  message = '안녕하세요!';
} else if (age < 100) {
  message = '반갑습니다!';
} else {
  message = '정말 특이한 나이네요!';
}

 

비전통적인 ? 사용

때떄로 삼항 연산자 ?를  if문 대신 사용하기도 함.

 

let company = prompt('JavaScript를 만든 회사는?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('틀렸습니다.');

 

위 코드는 조건 company == 'Netscape'에 따라 첫 번째 혹은 두 번째 표현식을 실행하여 alert를 보여줌 .

하지만 변수에 결과를 할당하지 않고 단순히 조건에 따라 코드를 실행하는 경우 , 가독성을 위해 아래처럼 if문을 사용하는 것이 좋음. 

 

let company = prompt('JavaScript를 만든 회사는?', '');

if (company == 'Netscape') {
  alert('정답입니다!');
} else {
  alert('틀렸습니다.');
}

 

 

코드 블록이 여러 줄에 걸쳐 있으면 세로로 읽기가 훨씬 수월함.

 

삼항 연산자 ? 는 조건에 따라 한 값을 반환하는 용도로 사용해야 함. 

조건에 따라 서로 다른 코드 분기를 실행해야 할 떄는 if 문을 사용.

 

 

과제 

1.if (문자열 "0")

 

다음 코드에서 alert가 실행이 될까? 

 

if ("0") {
  alert('Hello');
}

 

"0"은 문자열이 비어있는 것이 아니므로 실행이 됨.

 

2.javaScript의 공식 명칭

 

다음 if else 구문을 사용해 코드를 작성

 

질문: “JavaScript의 ‘공식’ 명칭은 무엇일까요?”
방문자가 “ECMAScript”를 입력하면 “정답입니다!”를 출력하고, 그렇지 않으면 “모르시나요? ECMAScript입니다!”를 출력합니다.

 

예시 : 

 

let answer = prompt('JavaScript의 "공식" 명칭은?', '');

if (answer == 'ECMAScript') {
  alert('정답입니다!');
} else {
  alert('모르시나요? ECMAScript입니다!');
}

 

만든 것 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <Script>
         result = prompt("JavaScript의 공식 명칭은 무엇일까요?", "입력" )
         if(result == "ECMAScript"){
            alert("정답입니다")
         }
         else{
            alert("모르시나요? ECMAScript입니다!")
         }


    </Script>
 
</body>
</html>

 

 

3.부호 표시하기 

 

if..else 구문을 사용하여 prompt로 숫자를 입력받은 후 , 다음과 같이 alert를 출력 : 

 

값이 0보다 크면 : 1 

값이 0보다 작으면 : -1 

값이 0이면 : 0 

 

(이 문제에선 입력값이 항상 숫자라고 가정함.)

 

예시 : 

 

let num = prompt('숫자를 입력하세요', '');

if (num > 0) {
  alert(1);
} else if (num < 0) {
  alert(-1);
} else {
  alert(0);
}

 

 

제작

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <Script>
         result = prompt("숫자를 입력해주세요", "입력" )
         if(result > 0 ){
            alert("1")
         }
         else if(result == 0){
            alert("0")
         }
         else if(result < 0){
            alert("-1")
         }


    </Script>
 
</body>
</html>

 

 

4. if문을 "?" 연산자로 변환하기 

 

다음 if문을 조건부 연산자 ?를 사용하여 변환 : 

 

let result;

if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}

 

예시 :

 

let result = (a + b < 4) ? 'Below' : 'Over';

 

 

 

 

제작 :

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <Script>
        let result;

        result = (a+b <4)? 'below' : 'over';

    </Script>
 
</body>
</html>

 

5. if..else 문을 '?' 연사자로 변환하기

 

아래 if..else 코드를 여러 개의 삼항 연산자 ? 를 사용하여 변환

가독성을 위해 여러 줄로 나누는 것을 권장 

 

let message;

if (login == 'Employee') {
  message = 'Hello';
} else if (login == 'Director') {
  message = 'Greetings';
} else if (login == '') {
  message = 'No login';
} else {
  message = '';
}

 

예시 : 

 

let message = (login == 'Employee') ? 'Hello' :
              (login == 'Director') ? 'Greetings' :
              (login == '') ? 'No login' :
              '';

 

 

제작 : 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <Script>
        let message;

        message = (login == 'Employee')? 'Hello' : 
        (login == 'Director')? 'Greetings' : 
        (login == '')? 'No login' : ''

    </Script>
 
</body>
</html>

 

 

 

 

 

'언어' 카테고리의 다른 글

Nullish coalescing operator '??' (JavaScript)  (0) 2025.03.13
Logical operators (JavaScript)  (0) 2025.03.12
Comparisons (JavaScript)  (0) 2025.03.10
Basic operators, maths (JavaScript)  (0) 2025.03.10
Type Conversions (JavaScript)  (0) 2025.03.10

관련글

티스토리툴바