DEV Community

hjqueeen
hjqueeen

Posted on

Useful ES6 Syntax to Know( reduce, bind, every)

1. reduce

The reduce method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. It's particularly useful for summing up values, concatenating strings, or combining array elements in a single value in various ways.

Syntax:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // Return the updated accumulator
}, initialValue);
Enter fullscreen mode Exit fullscreen mode

Example: Summing an Array of Numbers

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

// Sum all numbers in the array
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 0 is the initial value of the accumulator

console.log(sum); // Output: 15
Enter fullscreen mode Exit fullscreen mode

Example: Creating a Map of Item Frequencies

const items = ['apple', 'banana', 'orange', 'banana', 'apple'];

const itemCounts = items.reduce((accumulator, item) => {
  // Initialize the item count as 0 if not already in the accumulator
  accumulator[item] = (accumulator[item] || 0) + 1;
  return accumulator;
}, {}); // Initialize accumulator as an empty object

console.log(itemCounts); // Output: { apple: 2, banana: 2, orange: 1 }
Enter fullscreen mode Exit fullscreen mode

2. bind

The bind method allows you to permanently set the this context of a function. Regardless of how the function is called, this will refer to the object specified at the time bind was called. This is particularly useful for callback functions or event handlers, where the execution context might not be what you expect.

Syntax:

const boundFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]]);
Enter fullscreen mode Exit fullscreen mode

thisArg: The value to be passed as the this parameter to the target function when the bound function is called.
arg1, arg2, ...: Arguments to prepend to arguments provided to the bound function when invoking the target function.
Example:

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

setTimeout(person.greet, 1000); // Typically, `this` would refer to the global object (window) in this call
setTimeout(person.greet.bind(person), 1000); // Using `bind`, `this` will refer to the `person` object
Enter fullscreen mode Exit fullscreen mode

In this example, calling person.greet directly within setTimeout would make this refer to the global object rather than the person object. Using the bind method to explicitly bind this to the person object ensures that this refers to person when setTimeout executes the function.

3. every

The every method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Syntax:

array.every(function(element, index, array) {
  // Return a boolean value
});
Enter fullscreen mode Exit fullscreen mode

Example: Checking if All Numbers are Positive

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

const allPositive = numbers.every(number => {
  return number > 0;
});

console.log(allPositive); // Output: true
Enter fullscreen mode Exit fullscreen mode

Example: Verifying Age Eligibility

const ages = [22, 18, 19, 23, 17];

const allEligible = ages.every(age => {
  return age >= 18;
});

console.log(allEligible); // Output: false, because one age is below 18
Enter fullscreen mode Exit fullscreen mode

Top comments (0)