이중부정, 조건문 대신, or연산자와 조건문

1. or연산자와 조건문

: 어느날, 조건문을 만들고 있었다.
: 그런데, 오잉? 조건에 만족하는데 작동이 안되는 것이 아닌가..!

world가 B일 때, 왜 success가 출력이 안되지?

function hello(world) {
  if (world === 'A' || 'B') {
    console.log('success')
  }
}

: 문제는 바로 or연산자를 제대로 이해하지 못했던 것!
: JS에서 or연산자를 사용해 여러 조건을 체크하려면 아래와 같이 써야 한다.

function hello(world) {
  if (world === 'A' || world === 'B'){
    console.log('success');
  }
}

제대로 알지 못해 삽질한 나..🥲

2. 조건문을 다르게 만들어보자!

A. includes 사용해보기

: 아래와 같이 하나의 조건문이 있다.

function hello(world) {
  if (world === 'A' || world === 'B') {
    console.log('success');
  }
}

그런데 이 조건문, Array.includes를 사용하는 방법으로 변경할 수 있다!

// 방법1
function hello(world) {
  const worlds = ['A', 'B'];
  if (worlds.includes(world)) {
    console.log('success');  
  } 
}

// 방법2
function hello(world) {
  const worlds = ['A', 'B'];
  if (!worlds.includes(world)) return;  //this!
  console.log('success');
}

B. 조건별 return 사용해보기

: if ~ else if를 사용해 조건에 따른 result를 출력하는 코드가 있다.

function hello(world) {
  let result;
  if (world === 'A') {
    result = 'A is good'
  }
  else if (world === 'B') {
    result = 'B is good'      
  }
  else {
    result = 'None'  
  }
  return result;
}

이 긴 코드를 짧게 만들고 싶다? 그럼 조건별 return을 사용해보는 것도 좋다!

: return을 하면 함수 실행이 중단되므로 아래와 같이 활용할 수 있다.

function hello(world) {
  if (world === 'A') {
    return 'A is good'
  }
  if (world === 'B') {
    return 'B is good'      
  }
  return 'None';
}

C. Array.every, Array.some 사용해보기

: 만약 모든 과자에 초콜릿이 들어가 있는지 판별하는 코드가 있다고 하자.

const snacks = [
  { name: 'Banana Kick', includeChoco : false },
  { name: 'ChocoSongEi', includeChoco : true },
  { name: 'Nachos', includeChoco : false },
  { name: 'Pepero', includeChoco : true },
]

function findChocoSnack() {
  let result = true;
  for (let snack of snacks) {
    result = snack.includeChoco ? true : false;
    if (!result) break;
  }
  console.log(result); // false
}

이 코드는 Array.every, Array.some을 사용해 깔끔하게 만들 수 있다!

: Array.evevy는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 확인한다.

const snacks = [
  { name: 'Banana Kick', includeChoco : false },
  { name: 'ChocoSongEi', includeChoco : true },
  { name: 'Nachos', includeChoco : false },
  { name: 'Pepero', includeChoco : true },
]

function findChocoSnack() {
  const result = snacks.some((snack) => snack.includeChoco === true);
  console.log(result); //false
}

: 반대로 초코가 하나라도 있는지 체크하려면 Array.some이 유용하다.
: Array.some은 배열 안의 한 요소라도 주어진 판별 함수를 통과하는지 확인한다.

const snacks = [
  { name: 'Banana Kick', includeChoco : false },
  { name: 'ChocoSongEi', includeChoco : true },
  { name: 'Nachos', includeChoco : false },
  { name: 'Pepero', includeChoco : true },
]

function findChocoSnack() {
  const result = snacks.some((snack) => snack.includeChoco === true);
  console.log(result); //true
}

3. !!, 이중부정은 무엇일까?

: !! 연산자는 주어진 변수에 대한 Boolean값으로 보여준다.

예? !!변수 => boolean 이라고요? 엥? 무슨 말이지?

: 이게 무슨 말이냐면 null값을 가진 변수 A에 이중부정을 적용하면, 그 값의 논리값인 false를 가진다.
: 아래는 이중부정, 부정을 사용했을 때 예시이다.

let test1 = true; 
console.log(test1)      // true
console.log(!test1)     // false
console.log(!!test1)    // true

let test2; 
console.log(test2)      // undefined
console.log(!test2)     // true
console.log(!!test2)    // false

let test3 = null; 
console.log(test3)      // null
console.log(!test3)     // true
console.log(!!test3)    // false

출처
아래 사이트에 가면 더 자세히 알 수 있어요!

• 5 Tips to Write Better Conditionals in JavaScript
• Array.prototype.some()
• Array.prototype.evety()
• What's the double exclamation mark for in JavaScript?
• boolean 타입