[패캠 인강] 단축 평가 논리 계산법(Truthy, Falsy)

1. Truthy, Falsy

  자바 스크립트에서 논리 연산자에 true와 false 만 들어가야 하는 것은 아니다. true와 false는 아니지만 true처럼 취급 받는 truthy와 false처럼 취급 받는 falsy라는 값이 존재한다. truthy 는 굉장히 많기 때문에 falsy한 값만 알면 falsy 이외에는 모두 truthy라고 생각하면 된다. 대표적인 falsy는 다음과 같다

 

1. false (false도 넓은 범위에서 falsy)
2. 0
3. '' (빈 문자열)
4. undefined
5. null
6. NaN

 

  한 가지 주의점이 있는데, 빈 객체 { } 나 빈 배열 [ ] 은 falsy 값이 아니다.  

 

  간혹,  falsy 값을 좀더 정밀하게 false 처럼 사용하고 싶은 분들은 falsy한 값 앞에 !! 을 붙여서 논리 연산하기도 한다. 

if (undefined)
=> if (falsy)

if ( !!undefined ) 
=> if ( !(!falsy) )
=> if ( !true)
=> if (false) 

  

 

2. 단축 평가 논리 계산법

  간단한 논리 계산 로직이지만 if를 사용하면 코드 줄이 길어진다. 가독성을 좋게 하기 위해서 몇 가지를 생략시켜 코드 줄을 단축시키는 것이 단축 평가 논리 계산법이다.

 

  1) && 

  A && B 일 때, A 가 truthy 라면 B 가 나온다. 반면에 A 가 falsy 라면 A 가 출력된다.

console.log(true && 'logic') // logic
  // && 앞이 truthy 이므로 && 뒤의 값이 나온다
console.log(false && 'logic') // false
  // && 앞이 falsy 이므로 && 앞의 값이 나온다


console.log('name' && 'je') // je
  // && 앞이 truthy 이므로 && 뒤의 값이 나온다
console.log('' && 'je') // (빈문자열이라 따옴표 없이 공백으로 나옴) 
  // && 앞이 falsy 이므로 && 앞의 값이 나온다


console.log(1 && 0) // 0
  // && 앞이 truthy 이므로 && 뒤의 값이 나온다
console.log(0 && 1) // 0
  // && 앞이 falsy 이므로 && 앞의 값이 나온다
  

console.log(1 && 2) // 2
  // && 앞이 truthy 이므로 && 뒤의 값이 나온다
console.log(2 && 1) // 1
  // && 앞이 truthy 이므로 && 앞의 값이 나온다

 

  true 일 때 뒤의 값을 출력한다는 내용이 직관적으로 if 구문과 비슷하다. 

 

// if 로 썼을 때

function whatName (name) {
  if (name) {
    return 'je'
  } else {
    return name
  }
}

console.log(whatName(name))



// 단축 평가 논리 계산법으로 썼을 때

console.log(name && 'je')

 

  2) ||

  A || B 일 때, A 가 truthy 라면 A 가 나온다. 반면에 A 가 falsy 라면 B 가 출력된다.

console.log(true || 'logic') // true
  // || 앞이 truthy 이므로 || 앞의 값이 나온다
console.log(false || 'logic') // ligic
  // || 앞이 falsy 이므로 || 뒤의 값이 나온다


console.log('name' || 'je') // 'name'
  // || 앞이 truthy 이므로 || 앞의 값이 나온다
console.log('' || 'je') // 'je'
  // || 앞이 falsy 이므로 || 뒤의 값이 나온다


console.log(1 || 0) // 1
  // || 앞이 truthy 이므로 || 앞의 값이 나온다
console.log(0 || 1) // 1
  // || 앞이 falsy 이므로 || 뒤의 값이 나온다
  

console.log(1 || 2) // 1
  // || 앞이 truthy 이므로 || 앞의 값이 나온다
console.log(2 || 1) // 2
  // || 앞이 truthy 이므로 || 뒤의 값이 나온다

  직관적으로 느껴지지는 않으나 이 연산은 보통 만약 내가 원하는 겂이 없을 때 대체적으로 뒤에 있는 걸 사용한다는 의미로 쓴다. 함수를 사용할 때 사용자로부터 받는 인자가 원하는 타입이나 값이 아닐 경우, 에러를 방지하기 기본 설정으로 그렇게 부여한다.

 

  3) 사용 예제

  && 예제 

const person = {
  name: 'je'
}


// 일반적인 경우

function getName(person) {
  if(person) {
    return person.name
  } 
  return undefined
}

console.log(getName(person)) // 'je'
console.log(getName()) // undefined



// 단축 논리 평가 논리 계산법

function getNameShort(person) {
  return person && person.name
}

console.log(getName(person)) // 'je'
console.log(getName()) // undefined



// 파라미터 기본 설정

function getNameParameter (person=undefined) {
  if(person) return person.name
}

console.log(getName(person)) // 'je'
console.log(getName()) // undefined

 

 

  || 예제 

const person = {
  name: 'je'
}

const nameless = {
  name: ''
}


// 일반적인 경우

function getName(person) {
  const name = person && person.name
  if (!name) {
    return "이름이 없는 동물입니다."
  }
}


function getNameShort(person) {
  const name = person && person.name
  return name || '이름이 없는 인물입니다.'
}