DEV Community: bomoniyi

JS features to master

bomoniyi — Mon, 13 Mar 2023 06:42:15 +0000

/* 
- map()
- filter()
- reduce()
- some() / every()
- find() / findIndex()
- forEach()

Plus:

- slice()
- concat()
- includes()
- array spread operator
*/

const numbers = [1, 2, 3, 4, 5];
// instead of this
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
//  use this
numbers.forEach(number => {
  console.log(number);  
});

Using .set to get get unique values in an array

bomoniyi — Mon, 13 Mar 2023 06:29:26 +0000

const customerDishes = [
  "Chicken Wings",
  "Fish Sandwich",
  "Beef Stroganoff",
  "Grilled Cheese",
  "Blue Cheese Salad",
  "Chicken Wings",
  "Reuben Sandwich",
  "Grilled Cheese",
  "Fish Sandwich",
  "Chicken Pot Pie",
  "Fish Sandwich",
  "Beef Stroganoff"
];

const uniqueDishes = [...new Set(customerDishes)];
console.log(uniqueDishes)

// const numbers = new Set([[1], [2], [3]]);

// for (const num of numbers) {
//   console.log(num);  
// }

When you put the values in the .set array in [] to form an object, the .set method can't recognize this as unique anymore (as in above comment)

Turning objects into flexible arrays

bomoniyi — Sat, 11 Mar 2023 03:26:11 +0000

// for-in loop
// const obj = { one: 1, two: 2 };

// for (const key in obj) {
//   console.log('value', obj[key]);
// }

// Object.keys(), Object.values(), Object.entries()
// const user = {
//   name: 'John',
//   age: 29  
// };

// console.log(Object.entries(user));

const users = {
  '2345234': {
    name: "John",
    age: 29
  },
  '8798129': {
    name: "Jane",
    age: 42
  },
  '1092384': {
    name: "Fred",
    age: 17 
  }
};

const usersOver20 = Object.entries(users).reduce((acc, [id, user]) => {
  if (user.age > 20) {
    acc.push({ ...user, id });
  }  
  return acc;
}, []);
console.log(usersOver20);

// const values = Object.keys(user).map(key => user[key]);
// console.log(values);
// console.log(Object.values(user));

// const monthlyExpenses = {
//   food: 400,
//   rent: 1700,
//   insurance: 550,
//   internet: 49,
//   phone: 95  
// };

// const monthlyTotal = Object.values(monthlyExpenses).reduce((acc, expense) => acc + expense, 0);
// console.log(monthlyTotal);

Using spread operators to get data from arrays

bomoniyi — Sat, 11 Mar 2023 01:32:23 +0000

// In our restaurant, the chef has some favourite dishes in two different categories.
// The chef loves all dishes that start with "S", while the rest are regular dishes
// Use array destructoring to create arrays of the chefs favourite dishes of meat and
// fish, and to create arrays of the regular meat and fish dishes

const fishDishes = ['Salmon Rillettes', 'Grilled Tuna Provencal', 'Fish and Chips']
const meatDishes = ['Lasagna', 'Spaghetti', 'Satay Chicken Skewers']

// Modify these four variables first
let [chefsFishDishes, ...regularFishDishes] = fishDishes;

let [regularMeatDishes ,...chefsMeatDishes] = meatDishes;

// console.log(chefsFishDishes);
// console.log(regularFishDishes);
// console.log(regularMeatDishes);
// console.log(chefsMeatDishes);

// Finally, use the spread operator to create these two arrays as well
let chefsDishes = [...chefsMeatDishes, chefsFishDishes]
let regularDishes = [...regularFishDishes, regularMeatDishes];
console.log(chefsDishes);
console.log(regularDishes);

Of course you can use findByIndex but this is intended to explain spread operators

Using array spreads to prevent array overriding

bomoniyi — Wed, 08 Mar 2023 06:45:31 +0000

const lunchMenuIdeas = ['Harvest Salad', 'Southern Fried Chicken'];

const allMenuIdeas = [...lunchMenuIdeas];

allMenuIdeas.push('Club Sandwich');

console.log(allMenuIdeas);

using square brackets and ... prevents the lunchMenuIdeas array from being overwritten by allMenuIdeas as arrays are passes as references

Performing array maths operations with .map() and .filter()

bomoniyi — Sat, 04 Mar 2023 21:24:22 +0000

const numbers = [1, 2, 3, 4, 5, 6];

const doubledNumbers = numbers.reduce((acc, num) => {
  acc.push(num * 2);
  return acc;
}, []);
console.log('doubled numbers', doubledNumbers);
console.log('numbers', numbers);

You can use .reduce()

const numbers = [1, 2, 3, 4, 5, 6];

const doubledNumbers = numbers.map(num => num * 2);
console.log('doubled numbers', doubledNumbers);
console.log('numbers', numbers);

Or you can use a newer and easier method .map()

const numbers = [1, 2, 3, 4, 5, 6];

const greaterNumbers = numbers.filter(num => num > 3);
console.log(greaterNumbers);

Use .filter() if you're dealing with operations that deal with boolean. For example >, =, ?, etc...

Using If statements with .reduce()

bomoniyi — Sat, 04 Mar 2023 21:13:07 +0000

const cars = [
  { name: "Toyota", isElectric: false, weight: 1320 },
  { name: "Ford", isElectric: false, weight: 1400 },
  { name: "Volkswagen", isElectric: false, weight: 1370 },
  { name: "Honda", isElectric: false, weight: 1375 },
  { name: "Tesla", isElectric: true, weight: 1750 },
  { name: "BMW", isElectric: true, weight: 1350 },  
];


const totalWeight = cars.reduce((accumulator, car) => {
    if (car.isElectric) {
        return accumulator + car.weight;
    } else {
        return accumulator;
    }
}, 0)

console.log(totalWeight);

or following FP principles:

const cars = [
  { name: "Toyota", isElectric: false, weight: 1320 },
  { name: "Ford", isElectric: false, weight: 1400 },
  { name: "Volkswagen", isElectric: false, weight: 1370 },
  { name: "Honda", isElectric: false, weight: 1375 },
  { name: "Tesla", isElectric: true, weight: 1750 },
  { name: "BMW", isElectric: true, weight: 1350 },  
];


const totalWeight = cars.filter(car => car.isElectric).reduce((accumulator, car) => {
        return accumulator + car.weight;
}, 0)

console.log(totalWeight);

Tranforming arrays with .reduce()

bomoniyi — Sat, 04 Mar 2023 20:46:52 +0000

const menuItems = [
  { item: "Blue Cheese Salad", price: 8 },
  { item: "Spicy Chicken Rigatoni", price: 18 },
  { item: "Ponzu Glazed Salmon", price: 23 },
  { item: "Philly Cheese Steak", price: 13 },
  { item: "Baked Italian Chicken Sub", price: 12 },
  { item: "Pan Seared Ribeye", price: 31 }
];

const total = menuItems.reduce((accumulator, menuItem) => {
  console.log(`
    accumulator: ${accumulator},
    menu item price: ${menuItem.price}
  `);
  return accumulator + menuItem.price;  
}, 0);
console.log(total);

To get menu price total

const menuItems = [
  { item: "Blue Cheese Salad", price: 8 },
  { item: "Spicy Chicken Rigatoni", price: 18 },
  { item: "Ponzu Glazed Salmon", price: 23 },
  { item: "Philly Cheese Steak", price: 13 },
  { item: "Baked Italian Chicken Sub", price: 12 },
  { item: "Pan Seared Ribeye", price: 31 }
];

const mealChoices = menuItems.reduce((accumulator, menuItem) => {

  return accumulator + menuItem.item + ', ';  
}, '');
console.log(mealChoices);

To get all the meal item choices

Using .filter and .find in arrays

bomoniyi — Mon, 27 Feb 2023 04:34:14 +0000

const restaurants = [
  { name: 'Cap City Diner', milesAway: 2.2 },
  { name: 'Chop Shop', milesAway: 4.1 },
  { name: 'Northstar Cafe', milesAway: 0.9 },
  { name: 'City Tavern', milesAway: 0.5 },
  { name: 'Shake Shack', milesAway: 5.3 }
]

const results = restaurants.filter(restaurant => 
  restaurant.name.startsWith('C') && restaurant.milesAway < 3
)
console.log(results);

Gives multiple results.

const restaurants = [
  { name: 'Cap City Diner', milesAway: 2.2 },
  { name: 'Chop Shop', milesAway: 4.1 },
  { name: 'Northstar Cafe', milesAway: 0.9 },
  { name: 'City Tavern', milesAway: 0.5 },
  { name: 'Shake Shack', milesAway: 5.3 }
]

const result = restaurants.find(restaurant => 
  restaurant.name.toLowerCase().includes('north') && restaurant.milesAway < 2
)
console.log(result);

Returns the first result that meets the description.

Performing action on elements in an array

bomoniyi — Mon, 27 Feb 2023 04:12:31 +0000

const temperatures = [
  { degrees: 69, isRecordTemp: false },
  { degrees: 82, isRecordTemp: true },
  { degrees: 73, isRecordTemp: false },
  { degrees: 64, isRecordTemp: false }
];

const newTemps = temperatures.map(temperature => 
temperature.degrees > 70 ? { ...temperature, isHigh: true } : temperature 
);

newTemps.forEach(temperature => {
   if (temperature.isHigh) {
     console.log(`Temperature ${temperature.degrees} was a record high last week!`);  
   }
})
// console.log(newTemps);

Thus adds isHigh to elements given a conditional is granted.

const temperatures = [
  { degrees: 69, isRecordTemp: false },
  { degrees: 82, isRecordTemp: true },
  { degrees: 73, isRecordTemp: false },
  { degrees: 64, isRecordTemp: false }
];

const newTemps = temperatures.map(temperature => {
   temperature.isHigh = true; 
   return temperature;
});
console.log(newTemps);

Thus adds isHigh to all elements in the array.

Using .some and .every

bomoniyi — Sun, 26 Feb 2023 07:47:59 +0000

const temperatures = [
    { degrees: 69, isRecordTemp: false }, 
    { degrees: 82, isRecordTemp: false }, 
    { degrees: 73, isRecordTemp: false }, 
    { degrees: 64, isRecordTemp: false }
];

// includes, some, every
const result = temperatures.every(temperature => !temperature.isRecordTemp); // true / false
console.log(result);

.every loops through the entire array to find the value
.some stops the loop once it finds the value

Using arrow functions to manage the this. function

bomoniyi — Sun, 26 Feb 2023 06:29:37 +0000

const userData = { 
  username: "Reed",
  title: "JavaScript Programmer",
  getBio() {
    console.log(`User ${this.username} is a ${this.title}`);
  },
  askToFriend() {
    setTimeout(() => {
      console.log(`Would you like to friend ${this.username}?`);   
    }, 2000);  
  } 
}

userData.askToFriend();

If you have a function in a function, use the arrow function to make sure the this. function still pulls from the above function (example in code above).