22.04.06 수

오늘 배운 것은 truthy, falsy, 삼항연산자, 단락회로 평가다.

 

Truthy, Falsy

불리언 true가 아님에도 불구하고 true로 분류하는 것을 Truthy,
불리언 false가 아님에도 불구하고 false로 분류하는 것을 Falsy라고 한다.

truthy는 빈 배열, 빈 객체, Infinity, 숫자값, "0", 문자열 등이 있다.
falsy는 null, undefined, 숫자 0, -0, NaN, ""(빈 문자열) 등이 있다

 

이 개념을 활용한 코드

const getName = (person) => {
   } 
 return person.name;
};

let person = { name: "이정환" };
const name = getName(person);
console.log(name); // 이정환

// 이 코드를 Truthy, Falsy를 활용해 예외처리를 해주겠다

const getName = (person) => {
  if(!person) {
    return "객체가 아님";
  }
 return person.name;
};

let person = { name: "이정환" };
const name = getName(person);
console.log(name); // 이정환

if를 활용해 undefined, null 처리할 수 있지만 더 간단하게 할 수 있는 것이 ! 이다.

!person을 통해 모든 값이 flase, true를 반환하면서 null과 undefined는 falsy한 성격을 가지고 있고 !를 통해 true가 되어 "객체가 아님"을 리턴하게 된다.

 

 

삼항연산자

삼항연산자
조건 ? 참 : 거짓 

 

● 활용 1 할당

let a = [] 

const arr = a.length === 0 ? "빈 배열" : "안 빈 배열";

console.log(arr);

 

● 활용 2 true, false

let a = []

const result = a ? true " false;

console.log(result); // true

 

● 활용 3 중첩

// 90 이상A+, 50 이상 B+, 아니면 F

let score = 100;

score >= 90
  ? console.log("A+")
  : scroe >= 50
  ? console.log("B+")
  : console.log("F");

중첩으로 사용하면 가독성이 떨어진다.

그래서 그냥 if 사용하는 것이 낫다

 

단락회로 평가

논리 연산자(&&, ||, !)를 통한 단락 회로 평가란 왼쪽에서 오른쪽으로 연산하게되는 논리연산자의 연산 순서를 이용한 문법

&&를 예로 들면 (False && true) 같은 조건에서 앞부분이 flase이기 때문에 뒷부분은 확인하지 않아도 된다. 

이처럼 피연산자 중 앞이 결정되어 뒤를 확인할 필요없이 연산을 끝내버리는 것을 단락회로 평가라고 한다.

 

코드 예시 

// truthy, falsy를 활용한 코드
const getName = (person) => {
  if(!person) {
  return "객체가 아닙니다.";
  }
  return person.name;
  };

let person;
const name = getName(person);
console.log(name);

// 단락회로 평가를 활용한 코드
const getName = (person) => {
  const name = person && person.name; // 이정환
  return name || "객체가 아닙니다";
  };

let person = {name: "이정환"};
const name = getName(person);
console.log(name);

person과 person.name 다 true이고 person.name이 할당된다. ( 논리연산자 할당할 때 맨 끝의 피연산자가 할당된다)

그리고 return에서 name이 할당되었기 때문에 뒤의 피연산자를 확인하지 않아도 된다.

만약 person이 null 값이었다면 && 연산자에서 빈값이기 때문에 뒤 피연산자를 보지 않아도 된다. 그리고 return에서는 name이 null이기 때문에 "객체가 아닙니다"를 출력한다

 

 

여기까지가 오늘 배운 코드이다.

중간에 헷갈리는 개념들 잊었던 개념들을 찾아보았다.

예를 들어 이런 코드

const getName = (person) => {
  if(!person) {
  return "객체가 아닙니다.";
  }
  return person.name;
  };

여기서 if가 끝나고 아래 return이 실행되어야 하는데 왜 안되지? 하고 생각해서 찾아봤는데 함수 내 return을 만나면 값을 반환하고 그 함수를 끝내기 때문이라고 한다. 이걸 보고서야 아차! 싶었다...

 

그리고 이런 코드 2

const getName = (person) => {
  const name = person && person.name; // 이정환
  return name || "객체가 아닙니다";
  };
  
let person = {name: "이정환"};
const name = getName(person);
console.log(name);

여기서 const name에 왜 이정환이 할당되는지 알 수 없었다. person도 할당될 수 있기 때문이다.

그래서 저 둘의 위치를 바꾼 결과 name에 person 객체가 할당되는 것을 확인했다.

즉, && 연산자에서 true값을 할당할 때 맨 뒤의 피연산자가 값이 저장되는 것이다. 라는 사실을 알 수 있었다