제어구조 - Control Structure

if문 - if statement

if(condition)
조건식에는 보통 동적인 boolean 값이 들어간다.
동적인 boolean 값은 boolean operators 에 의해 실현된다.

• == 일치 연산자
• != 불일치 연산자
• === 삼중 등호 연산자 !=== 삼중 부등호 연산자
  삼중 (부)등호 연산자는 값 뿐만 아니라 타입까지 점검한다

    3 == "3"; //true
    3 === "3"; // false

=> 삼중 (부)등호 연산자를 이중보다 더 자주 사용하는 것을 추천한다.

주의 - 배열과 객체에서의 동등연산자

배열과 객체 그 자체를 비교할 때 내용물이 같다해도 같지 않다고 반환한다

const arr1 = ['a'];
const arr2 = ['a'];
arr1 == arr2 //false
arr1 === arr2 //false

const obj1 = {name : 'a'};
const obj2 = {name : 'a'};
obj1 == obj2 //false
obj1 === obj2 //false

const arr3 = arr2;
arr3 === arr2 //true

다음과 같이 할당 연산자를 통해 생성된 배열/객체의 경우 동일하다고 반환한다.

• >,<,>=,<= 비교연산자
  자바스크립트의 특이한 점은, 문자열끼리도 비교연산자를 사용할 수 있다는 점이다. 유니코드 값을 비교해 결과를 도출한다

'ab' > 'aa' //true
'a' > 'b' //false

• 단항연산자
  • ++,-- 1을 더하거나 뺌.
  • ! boolean 값을 반대로 만들어준다.

동시에 여러 조건을 달고 싶다면 - 논리연산자를 이용하면 된다

• && AND 연산자
• || OR 연산자

연산자 우선순위

대부분의 경우 상식선에서 해결되지만, 알아둬야 하는 것들도 존재한다

• 산술 연산자는 논리연산자보다 우선이다.
• AND 연산자는 OR 연산자보다 우선이다.

1. ()
2. 단항 연산자 ( --, ++, ! )
3. 산술 연산자 ( *, /, %, +, - )
4. 비교 연산자 ( >, >=, <, <=, ==, ===, !==, != )
5. 논리 연산자 ( &&, || )
6. 대입(복합 대입) 연산자 ( =, +=, -=, *=, /=, %= )

truly 와 falsy 값은 뭐지?

if 조건문의 조건식 안에 boolean 값을 넣어야 되는 것은 맞지만, 반드시 boolean 값을 넣어야 되는 것은 아니다. 왜냐하면 브라우저는 조건식 안에 boolean값이 아니더라도 이를 자체적으로 해석해 boolean 값 처럼 다루기 때문이다.

• 0 숫자 0은 false로 취급한다
• 이외의 모든 숫자는 true로 취급한다
• "" 빈 문자열은 false로 취급한다
• 이외의 모든 문자열은 true로 취급한다
• 모든 객체,배열은 true로 취급한다
• null undefined NaN 은 false로 취급한다.

결론 : falsy값은 다음과 같다

null, undefined, 0, NaN, ''(빈문자열), false

따라서 조건식에 boolean 타입이 아닌 변수를 넣어서 코드를 작성할 수 도 있다.

예시

function getResult(){
    const enteredValue = getUserInputNumber();
    if(!enteredValue){
        return;
    }
   ...생략
   }

위 예시 코드에서 enteredValue는 숫자형이다. 따라서 만약 enteredValue가 falsy 값인 0이라면, ! 연산자에 의해 true로 변환되어 조건문이 실행되고, 조건문의 return에 의해 함수가 종료된다.

JavaScript에서는 비교 연산자 없이도 조건문에서 변수를 사용할 수 있다.