5 Cool Useful JavaScript Coding Techniques You Should Know About

5 Cool Useful JavaScript Coding Techniques You Should Know About

ยท

2 min read

Table of contents

No heading

No headings in the article.

Are you familiar with JavaScript? Have you ever come across some tricks or techniques that make your work more efficient? If you haven't, then this blog post is for you. In this article, we will share 5 cool and useful JavaScript coding techniques that you should know about.

  • Swapping Variables: Previously, swapping variables required a temporary variable. However, with array deconstruction, we can swap variables more easily.
let myFood = '๐Ÿ”'
let yourFood = '๐Ÿซ'

[myFood, yourFood] = [yourFood, myFood]

console.log(myFood, yourFood) // ๐Ÿซ ๐Ÿ”
  • Avoid Pointless If Else statements: If you have a lot of conditions to check, you can use an object to hold all the data and make it faster to retrieve. This way, you can avoid writing long, complicated if statements:
const getPriceByName = (name) => {
  const foodMap = {
    '๐Ÿ”': 30,
    '๐Ÿจ': 20,
    '๐Ÿฟ': 10,
    // You can add new food here
    // ...
  }
  return foodMap[name]
}
console.log(getPriceByName('๐Ÿ”')) // 30
  • Object.entries Is a Smarter Way to Traverse If you want to iterate over an object, you can use Object.entries() to get an array of key-value pairs. This is better than using a for...in loop because you can avoid iterating over properties on object prototypes:
const foodMap = {
  '๐Ÿ”': 30,
  '๐Ÿจ': 20,
  '๐Ÿฟ': 10,
  '๐Ÿซ': 5
}

// โŒ
for (const key in foodMap) {
  console.log(key, foodMap[key])
}

// โœ…
Object.entries(foodMap).forEach(([key, value]) => {
   console.log(key, value) 
})
  • Flattening an Array If you have a nested array and you want to flatten it, you can use the flat() method. This method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth:
const foods = [['๐Ÿ”', ['๐Ÿซ']], ['๐Ÿจ', ['๐Ÿฟ', ['๐Ÿต']]]]

console.log(foods.flat(Infinity)) // ['๐Ÿ”', '๐Ÿซ', '๐Ÿจ', '๐Ÿฟ', '๐Ÿต']

Alternatively, you can use the reduce() method to flatten an array. For example:

const flattenFoods = (foods) => { return foods.reduce((res, food) => { 
return res.concat(Array.isArray(food) ? flattenFoods(food) : food); }, []); };
console.log(flattenFoods(foods)); // ['๐Ÿ”', '๐Ÿซ', '๐Ÿจ', '๐Ÿฟ', '๐Ÿต']
  • Calculate the Total Price of the Goods If you need to calculate the total price of an array of objects, you can use the reduce() method to simplify your code:
const foods = [
  {
    name: '๐Ÿ”',
    price: 30,
    amount: 10,
  },
  {
    name: '๐Ÿจ',
    price: 20,
    amount: 3,
  },
  {
    name: '๐Ÿฟ',
    price: 10,
    amount: 5,
  },
  {
    name: '๐Ÿต',
    price: 5,
    amount: 9,
  },
]

const sum = foods.reduce((total, food) => total + food.price * food.amount, 0)

console.log(sum) // 455

By incorporating these techniques into your coding, you can significantly improve your productivity and the efficiency of your code.

ย