Viết câu điều kiện tốt hơn trong javascript

Một trong những món ăn mà anh em lập trình chúng ta phải nhai đi nhai lại trong suốt cuộc đời, dù là bạn đang viết ngôn ngữ gì là C U ĐIỀU KIỆN. Nếu không khéo trong lúc nấu code, thì món ngon đó đôi khi trở thành món dỡ ẹt, người sau vào ăn không thấy ngon, chúng ta tự ăn cũng không thấy ngon.

Bài này được viết trong một chiều chủ nhật đang đói bụng

Điều kiện lồng vào nhau

Tạm, chưa ngon
let result;
if(condition) {
} else if(condition2) {
} else {
}
return result;

Có vẻ không vấn đề nhỉ? Nhưng thật ra nó sẽ chạy y chang khi chúng ta viết thế này

Không ngon
let result;
if(condition) {
} else {
   if(condition2) {
   } else {
   }
}
return result;

Du là thế nào đi nữa, gặp lồng câu điều kiện else...if... là phải tìm cách khử liền

Chuẩn cơm mẹ nấu
if (condition){
}
if(condition2) {
}

Array.includes

Không ngon
if ( animal == 'dog' || animal == 'cat' || animal == 'turtle')Chuẩn cơm mẹ nấu
['cat', 'dog', 'turtle'].includes(animal)
hoặc
['cat', 'dog', 'turtle'].indexOf(animal) !== -1

return

Không ngon
const printAnimalDetails = animal => {
  let result;
  if (animal) {
    if (animal.type) {
      if (animal.name) {
        if (animal.gender) {
          result = `${animal.name} is a ${animal.gender} ${animal.type};`;
        } else {
          result = "No animal gender";
        }
      } else {
        result = "No animal name";
      }
    } else {
      result = "No animal type";
    }
  } else {
    result = "No animal";
  }
  return result;
};

Nếu bạn vẫn viết code thế này thì mình cũng lại!

Chuẩn cơm mẹ nấu
const printAnimalDetails = ({type, name, gender } = {}) => {
  if(!type) return 'No animal type';
  if(!name) return 'No animal name';
  if(!gender) return 'No animal gender';

  return `${animal.name} is a ${animal.gender} ${animal.type}`;
}

Dùng Object thay cho switch...case

Đoạn code return loại trái cây có màu sắc như điều kiện truyền vào

Không ngon
function printFruits(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

Code như trên không sai, mà nếu dùng object làm thì sẽ ngon hơn nhiều

Chuẩn cơm mẹ nấu
function printFruits(color) {
    const fruitColor = {
      red: ['apple', 'strawberry'],
      yellow: ['banana', 'pineapple'],
      purple: ['grape', 'plum']
    };
    return fruitColor[color] || [];
}

params mặc định và destructuring

Không ngon
function printVegetableName(vegetable) {
   if (vegetable && vegetable.name) {
    console.log (vegetable.name);
  } else {
   console.log('unknown');
  }
}
Chuẩn cơm mẹ nấu
function printVegetableName({ name } = {}) {
  console.log (name || 'unknown');
}

Array.every, Array.some

Đoạn code kiểm tra tất cả trái cây có màu đó

Không ngon
const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' }
];
function test() {
  let isAllRed = true;

  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = (f.color == 'red');
  }

  console.log(isAllRed); // false
}

Thay vì dùng vòng lặp for, có thể dùng Array.every

function test() {
  const isAllRed = fruits.every(f => f.color == 'red');
  console.log(isAllRed); // false
}

Chỉ cần vài item trong đó thỏa điều kiện là được, ta dùng Array.some

const isAllRed = fruits.some(f => f.color == 'red');

📜 Tips to write better Conditionals in JavaScript