[javascript] 3. 연산자

삼항 조건 연산자

• 세 개의 피연산자를 취할 수 있는 유일한 연산자
• 맨 앞에 조건문이 들어가고 그 뒤로 물음표(?)와 조건이 true 라면 실행할 식이 물음표 뒤에 들어가며 바로 뒤에 콜론(:)이 들어가고 조건이 false 라면 실행할 식이 마지막에 들어감
  • if 문의 단축형태로 쓰인다.

// 예제 1
    const age = 26;
    const average = (age > 21) ? "Beer" : "Juice";
    console.log(average) 
    // "Beer"

// 예제 2
    const arr1 = [];
    let text1 =
      arr1.length === 0 ? "배열이 비어있습니다." : "배열이 비어있지 않습니다.";
    
    console.log(text1);
    // "배열이 비어있습니다."

// **예제 3**
    const condition1 = false;
    const condition2 = false;
    
    const value = condition1 ? "와우!" : condition2 ? "blabla" : "foo";
    console.log(value);
// 이렇게 복잡하게 조건을 걸게 되면  오히려 헷갈릴수가 있음 
// 차라리 **if/else문**을 쓰는게 더 나을 수도 있음

truthy and falsy

• fasly한 값들

    console.log(undefined);
    console.log(null);
    console.log(0);
    console.log("");
    console.log(NaN);
    console.log(false);

• truthy한 값들
  

    console.log(3);
    console.log("hello");
    console.log(["array"]);
    console.log([]);
    console.log({});

단축 평가 논리 계산법

• 특정값이 유효할때만 어떤 값을 조회해야하는 상황에 사용함
• 연산자 예시 1
  

    console.log(true && "hello");
    // 앞에 오는 값이 true면 뒤에는 연산결과가 됨
    // "hello"
    
    console.log(false && "hello");
    // 앞에 오는 값이 false면 뒤에 오는것은 신경쓰지 않음
    // 값이 안나옴
    
    console.log("hello" && "bye");
    // 앞에 hello를 true로 간주하고 뒤에 오는 값을 결과물로 보여줌
    // "bye"
    
    console.log(null && "hello");
    console.log(undefined && "hello");
    // 앞에 null이나 undefined처럼 fasly한 값이기 때문에 뒤에 있는 결과물을 
    // 신경쓰지 않고 앞에 null/undefined를 보여줌
    // null/undifined

• 연산자 예시 2
  

    // 특정값이 유효할때만 어떤 값을 조회해야하는 상황에 사용함
    const object = null;
    const name = object && object.name;
    console.log(name);
    // null
    
    const object = {name: '홍길동'};
    const name = object && object.name;
    console.log(name);
    // '홍길동'
    
    // 객체가 이름을 갖고 있는지 조회 해야하는 상황에서의 &&연산자

• 연산자 예시 3
  

    const namelessDog = {
      name: "멍멍이"
    };
    
    function getName(animal) {
      const name = animal && animal.name;
      if (!name) {
        return "이름이 없는 동물입니다.";
      }
      return name;
      
    }
    const name = getName(namelessDog);
    console.log(name);// 멍멍이

- 위에 있는 코드처럼 작성하면 값은 나오지만 아래에서 좀 더 간결하게 써보겠다

    const namelessDog = {
      name: "멍멍이"
    };
    
    function getName(animal) {
      const name = animal && animal.name;
      return name || "이름이 없는 동물입니다.";
    }
    const name = getName(namelessDog);
    console.log(name);
    // 멍멍이

이게 왜 되는가에 대해 생각을 해보니 || <- or연산자는 앞에 오는 값이
false가 나오면 뒤에 있는 값을 보여준다.
반대로 앞에 true값이 나오게 된다면 뒤에 있는 값은 보여지지 않고
오로지 앞에 있는 true값만 보여지게 된다