[JavaScript공부 - 11] 조건 연산자 : if, '?'

가끔 코드를 짤 때, 다른 조건 마다 다른 동작이 나타나게 수행하도록 하고 싶은 경우가 있음!

이러한 동작을 시켜주기 위해서, 코드에서는 if 구문과 3항연산자인 물음표처럼 생긴 ? 기호로 쓰이는 조건 연산자를 사용할 수 있음.

"if" 구문

---

if 구문은 조건을 적용한 다음 그 조건의 결과가 true이면 if 구문 안의 코드를 실행 시킴.

let year = prompt('In whtch year was ECMAScript-2015 specification published?');
 
if (year == 2015) {
    alert('You are right!');
}

위의 예시로 보면 prompt에서 가져온 값이 2015와 같으면 You are right이라는 alert 메세지를 받는 구조임. 이렇게 보면 쉽겠지만 코드에서는 더 복잡한 동작을 할 수 있도록 짤 수 있음.

하나 이상의 구문을 실행시키고 싶을 때는 if 의 중괄호(curly braces)안에 넣어주면 됨.

let year = prompt('In whtch year was ECMAScript-2015 specification published?');
 
if (year == 2015) {
    alert( "That's correct!" );
    alert( "You're so smart!" );
}

위의 예제들 대신에 if 구문 안에서 실행하는 동작 구문이 하나 일 때는 중괄호(curly braces)를 사용하지 않아도 됨.

let year = prompt('In whtch year was ECMAScript-2015 specification published?');
 
if (year == 2015) alert( "That's correct!" );

하지만 코드의 가독성을 높이기 위해서는 실행 동작 구문이 하나일 때에 뿐만 아니라 if를 넣을 때에는 항상 중괄호({ })를 넣어주는 것을 추천함!

Boolean 변환(Boolean conversion)

---

if (...) 구문은 괄호로 쌓여저 있는 코드가 true인지 false인지 판단을 하고 이 결과를 boolean 타입으로 반환함.

지난 포스팅 중 Type Conversion(타입 변환)에서 boolean타입의 변환 규칙을 다시 생각해보자!

(비교나 다른 구문을 제외하고!)

* 숫자 0, 빈문자열 "", null, undefined, NaN은 모두 false로 반환함.

* 이 외의 값들은 true로 반환함.

그래서 아래의 조건은 false를 반환하기 때문에 if의 중괄호 안에 있는 블럭은 실행이 되지 않음!

if (0) {
    alert("This never execute");
}

0이 아닌 값이 들어가게 되면 if의 중괄호 안에 있는 블럭은 실행됨!

if (1) {
    alert("This code execute!");
}

if 의 괄호 안에서 코드의 값을 판단할 때도 있지만 미리 위에서 구문을 먼저 boolean타입으로 판단하고 그 값을 변수로 넘길 수도 있음!

let con = (year == 2015); // equality evaluates to true or false
 
if (con) {
    alert("You are correct!");
}

else 구문

---

if 구문이 true가 아니면 다른 구문을 실행시킬 수 있도록 else를 넣을 수 있음. 즉, if 구문이 false일 때 if의 블럭을 실행시키지 않고 else 블럭을 실행 시키게 됨.

let year = promp("In which year was the ECMAScrip-2015 specification published?");
 
if (year == 2015) {
    alert("You guessed it right!");
} else { //any value except 2015 
    alert("How can you be so wrong!?");
}

다른 조건문을 달 수있도록! : else if

---

가끔은 조건을 다르게 해서 구문 실행 동작을 다르게 해야할 때가 있음. 그 때, else if 구문을 사용하면 여러 조건을 판단할 수 있도록 해줌!

let year = prompt("In which year was the ECMAScrip-2015 specification published?");
 
if (year < 2015) {
    alert("Too early...");
} else if (year > 2015) {
    alert("Too late...");
} else {
    alert("Exactly!!!!");
}

위의 코드를 설명해 보면,  JavaScript는 prompt로 받은 값으로 먼저 year < 2015 구문을 체크함. 만약 이 구문이 false를 반환하면 else if 구문의 year > 2015를 체크함. 이 구문도 false를 반환하면 else구문을 실행 시키게 됨!

else if 구문은 더 많을 수 있고, else는 넣어도되고 넣지 않아도 됨! 넣지 않으면 else if 구문들이 모두 false를 반환하면 어떠한 코드들도 실행되지 않음!

삼항 연산 (Ternary operator) : "?"

---

가끔 코드를 짤 때, 조건에 다라 변수에 값을 할당해야 할 때가 있음.

let accessAllowed;
let age = prompt('How old are you?', '');
 
if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}
 
alert(accessAllowed);

위에서와 같이 나이가 18세 이상인 경우에 true를 반환하고 아니면 false를 accessAllowed라는 변수에 값을 할당 해야 할 때가 있음. 이 if~else 구문을 좀 더 간단하고 짧은 방식으로 사용하는 것을 "ternary(삼항)", 또는 "question mark(물음표)"라고 불리는 연한을 사용한다.

이 연산자는 물음표(?)를 사용하여 구문을 나타냄. 공식적인 표현은 "ternary"로 연산자가 피연산자 3개를 가지고 있다는 의미임. 자바스크립트에서 삼항연산자처럼 세 개의 피연산자를 사용하는 연산자는 이 삼항연산이 유일함.

[구문 표현]

let result = condition ? value1 : value2;

위의 구문에서 condition은 true나 false를 결과값으로 반환되어야할 구문이며, 이 condition이 true이면 value1을, false이면 value2를 리턴함.

그래서.. 아까 위의 예시를 삼항연산으로 표현하자면

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

이렇게 표현될 수 있음!

기술적으로 보면, age > 18의 괄호 부분을 제외해도 괜찮음! 왜냐하면 삼항연산 ?는 낮은 우선순위에 있기 때문에 비교 연산자인 > 가 먼저 실행되고 그 후에 삼항연산 ?가 실행됨.

따라서 괄호를 제외하고 아래처럼 사용 가능함.

let accessAllowed = age > 18 ? true : false;

하지만 괄호는 코드를 더 읽고 이해하기 쉽게 해주기 때문에 삼항연산을 사용할 때 괄호를 넣어주는 것을 추천함!!

# true, false를 반환할 수 있는 구조!

위에서 처럼 삼항 연산으로 true, false를 비교구문의 결과에 따라 반환하는 데, 사실, 비교구문 자체만 넣어줘도 값이 반환되기 때문에 아래와 같이 사용할 수 있음!

let accessAllowed = age > 18;

다중 삼항연산 '?'

---

물음표 연산자 ?를 연속으로 사용하면 하나 이상의 조건에 따라 값을 리턴할 수 있음..!

let age = prompt('age?', 18);
 
let message = (age < 3) ? "Hi, Baby!" :
              (age < 18) ? "Hello!"   :
              (age < 100) ? "Greetings!" :
              "What an unusual age!";
 
alert(message);

이런 구문은 처음에 이해하기가 쉽지는 않음. 그래도 잘 보면 어떤 구조로 되어 있는지 파악할 수 있음!

1. 처음 삼항 연산은 prompt에서 받은 age가 3살 보다 작은지 큰지 비교함.

2. 만약 true이면 "Hi, Baby!"라는 alert창을 띄우고, 아니면 콜론( : ) 다음의 연산인 age가 18보다 작은지 큰지를 비교함.

3. 만약 비교 결과가 true면 "Hello!"를 반환하고 아니면 다음 콜론( : )의 연산인 age가 100보다 작은지 큰지를 비교함

4. 만약 비교 결과가 true면 "Greetings!"를 반환하고 아니면 마지막 콜론 ( : ) 뒤의 "What an unusual age!"를 반환함.

이 구문을 if ~ else 연산으로 하면...!

if (age < 3) {
    message = "Hi, baby!";
} else if (age < 18) {
    message = "Hello!";
} else if (age < 100) {
    message = "Greetings!";
} else {
    message = "What an unusual age!";
}

기존의 ?와 다른 사용방식

---

가끔 ?연산자는 if를 대체하여 사용하기도 함.

let company = prompt("Which company created JavaScript?", '');
 
(company == "Netscape") ?
    alert("Right!") : alert("Wrong...!");

company == "Netscape"라는 조건에 따라서 ? 다음의 첫번째나 두번째 표현을 실행시키고 alert 함수를 실행 시킴.

이런 방식은 변수에 값을 할당하는 것이 아니고 대신에 조건에 따라 다른 코드를 실행시키는 방식임.

이런 방식으로 삼항 연산을 사용하는 건 추천하지 않음.

사실 삼항연산은 if 구문보다 더 짧기 때문에 프로그래머들에게 매력적으로 보여지지만 가독성은 떨어짐!!

if를 사용해서 다음과 같은 방식으로 코드를 구성하는 걸 더욱 추천함.

let company = prompt("Which company created JavaScript?", '');
 
if (company == "Netscape") {
    alert("Right!!");
} else {
    alert("Wrong...!");
}

우리의 눈은 코드를 수직적으로 스캔하여 보기 때문에 여러 줄로 나뉘어진 코드 블럭이 한 줄로 구성되어 있는 것보다 더 읽기 편함.

물음표 연산자 ?의 목적은 조건에 따라 어떤 값 또는 다른 값을 리턴하기 위해 사용됨. 따라서 이런 목적으로 연산자를 사용하는 것을 추천함.

즉, 조건에 따라 다른 코드를 실행시켜야 하는 경우에는 if를 사용하길 권장함!!

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