[JavaScript][clean-code] Truthy & Falsy

* Truthy & Falsy

- 자바스크립트는 동적인 타이핑을 가진 언어 이다보니 형변환이 자유롭다.
- 사용자가 의도하지 않아도 형변환이 일어나게 된다.

 

* 예시코드

if ('string'.length > 0) {
}

if (!isNaN(10)) {
}

if (boolean === true) {
}

* 아래와 같이 변경해도 충분히 동작한다.

 - 이유는??

전부 Truthy값이기 때문이다. (참으로 평가되기 때문에 정상적으로 동작하는것이다.)

if ('string'.length) {
}

if (10) {
}

if (boolean) {
}

* 참 같은 값 (Truthy)

if (true) {
  console.log('true!');
}
if ({}) {
  console.log('true!');
}
if ([]) {
  console.log('true!');
}
if (42) {
  console.log('true!');
}
if ("0") {
  console.log('true!');
}
if ("false") {
  console.log('true!');
}
if (new Date()) {
  console.log('true!');
}
if (-42) {
  console.log('true!');
}
if (12n) {
  console.log('true!');
}
if (3.14) {
  console.log('true!');
}
if (-3.14) {
  console.log('true!');
}
if (Infinity) {
  console.log('true!');
}
if (-Infinity) {
  console.log('true!');
}

 

* 거짓 같은 값(Falsy)

- console값이 출력되지않는다.

if (false) {
  console.log('false')
}
if (null) {
  console.log('false')
}
if (undefined) {
  console.log('false')
}
if (0) {
  console.log('false')
}
if (-0) {
  console.log('false')
}
if (0n) {
  console.log('false')
}
if (NaN) {
  console.log('false')
}
if ("") {
  console.log('false')
}

* Truthy & Falsy활용

* 활용하기 전 (Before)

function printName(name) {
  if (name === undefined || name === null) {
    return '사람이 없네요.';
}
  return `안녕하세요 ${name}님`;
}

console.log(printName());

* 활용한 코드 (After)

function printName(name) {
  if (!name) {
    return '사람이 없네요.';
}
  return `안녕하세요 ${name}님`;
}

console.log(printName());

• 위의 코드처럼 단축 가능
• name에 문자열이 들어가면 Truthy로 기결이 된다.
• 문자열이 들어오지 않았을때 Falsy로 기결이 된다.
• Falsy에 undefined와 null이 포함되어 있다. 따라서 아래의 코드는 단축되어도 정상적으로 작동이 된다.
• 정말 철저한 검사가 아니면 Truthy와 Falsy를 활용하면 좋다. (코드의 단축)