Skip to main content

Command Palette

Search for a command to run...

Exploring JavaScript Array Methods:

Published
•6 min read•View as Markdown

Exploring JavaScript Array Methods: reduceRight, filter, sort, and reduce

JavaScript offers an array of built-in methods that allow developers to perform complex operations efficiently. In this article, we’ll dive into methods such as reduceRight, filter, sort, and reduce through practical examples.

The Code Examples

Let’s explore these methods with some hands-on examples.


1. Using reduceRight

The reduceRight method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

Code Example:

let fruitsss = ['banana', 'apple', 'grape', 'kiwi', 'orange'];
const mm = fruitsss.reduceRight((x, y) => {
    console.log("It is coming from the back side, and it also reverses the string");
    console.log(x, y);
    return x + " " + y.split('').reverse().join('');
}, '');
console.log(mm.trim());

console.log("This demonstrates `reduceRight` for development.");

Explanation:

  • Input Array: ['banana', 'apple', 'grape', 'kiwi', 'orange']

  • The reduceRight method starts from the end of the array and combines elements while reversing each string.

  • Output: egnaro iwik eparg elppa ananab


2. Filtering Words with filter

The filter method creates a new array with elements that pass a specific condition defined in a callback function.

Code Example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
let filteringwords = words.filter((word) => {
    return word.length < 5;
});
console.log(filteringwords); // Output: ['spray', 'limit']

Explanation:

  • The condition word.length < 5 filters out words with fewer than 5 characters.

3. Sorting and Reversing Arrays

Sorting Strings Alphabetically

let fruits = ['banana', 'apple', 'grape', 'kiwi', 'orange'];
console.log(fruits.sort());

Output: ['apple', 'banana', 'grape', 'kiwi', 'orange']

Reversing a Number Array

let numberss = [10, 20, 30, 40, 50];
console.log(numberss.reverse());

Output: [50, 40, 30, 20, 10]

Using reduce to Calculate the Sum

let sum = numberss.reduce((x, y) => {
    return x + y;
});
console.log("Sum of all elements", sum);

Output: Sum of all elements 150


4. Combining filter, some, and every

Code Example:

const numbers = [12, 55, -2, 90, 33, -77, 18];

// Filter numbers less than 50
let fltr = numbers.filter((num) => {
    return num < 50;
});
console.log(fltr); // Output: [12, -2, 33, -77, 18]

// Check if there are any negative numbers
let ntive = numbers.some((num) => {
    return num < 0;
});
console.log(ntive); // Output: true

// Check if all numbers in the filtered array are odd
let evens = fltr.every((num) => {
    return num % 2;
});
console.log(evens); // Output: false

Explanation:

  • filter: Extracts numbers less than 50.

  • some: Returns true if at least one negative number exists.

  • every: Checks if all numbers in the filtered array are odd.


Final Thoughts

By combining methods like reduceRight, filter, sort, reverse, and reduce, developers can efficiently manipulate arrays in JavaScript. These methods offer clean and readable alternatives to manual loops, making your code more expressive and concise.

Experiment with these methods to enhance your understanding and streamline your development process!

Exploring JavaScript Array and Object Methods: reduceRight, filter, sort, reduce, and Object Methods

JavaScript offers an array of built-in methods that allow developers to perform complex operations efficiently. In this article, we’ll dive into methods such as reduceRight, filter, sort, reduce, and explore the versatile Object methods with practical examples.

The Code Examples

Let’s explore these methods with some hands-on examples.


1. Using reduceRight

The reduceRight method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

Code Example:

let fruitsss = ['banana', 'apple', 'grape', 'kiwi', 'orange'];
const mm = fruitsss.reduceRight((x, y) => {
    console.log("It is coming from the back side, and it also reverses the string");
    console.log(x, y);
    return x + " " + y.split('').reverse().join('');
}, '');
console.log(mm.trim());

console.log("This demonstrates `reduceRight` for development.");

Explanation:

  • Input Array: ['banana', 'apple', 'grape', 'kiwi', 'orange']

  • The reduceRight method starts from the end of the array and combines elements while reversing each string.

  • Output: egnaro iwik eparg elppa ananab


2. Filtering Words with filter

The filter method creates a new array with elements that pass a specific condition defined in a callback function.

Code Example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
let filteringwords = words.filter((word) => {
    return word.length < 5;
});
console.log(filteringwords); // Output: ['spray', 'limit']

Explanation:

  • The condition word.length < 5 filters out words with fewer than 5 characters.

3. Sorting and Reversing Arrays

Sorting Strings Alphabetically

let fruits = ['banana', 'apple', 'grape', 'kiwi', 'orange'];
console.log(fruits.sort());

Output: ['apple', 'banana', 'grape', 'kiwi', 'orange']

Reversing a Number Array

let numberss = [10, 20, 30, 40, 50];
console.log(numberss.reverse());

Output: [50, 40, 30, 20, 10]

Using reduce to Calculate the Sum

let sum = numberss.reduce((x, y) => {
    return x + y;
});
console.log("Sum of all elements", sum);

Output: Sum of all elements 150


4. Combining filter, some, and every

Code Example:

const numbers = [12, 55, -2, 90, 33, -77, 18];

// Filter numbers less than 50
let fltr = numbers.filter((num) => {
    return num < 50;
});
console.log(fltr); // Output: [12, -2, 33, -77, 18]

// Check if there are any negative numbers
let ntive = numbers.some((num) => {
    return num < 0;
});
console.log(ntive); // Output: true

// Check if all numbers in the filtered array are odd
let evens = fltr.every((num) => {
    return num % 2;
});
console.log(evens); // Output: false

Explanation:

  • filter: Extracts numbers less than 50.

  • some: Returns true if at least one negative number exists.

  • every: Checks if all numbers in the filtered array are odd.


5. Exploring Object Methods

JavaScript’s Object provides several useful methods for working with objects.

Code Example:

let obj = {"name": "shiva", "age": 23, "place": "bangalore"};
Object.seal(obj);
obj["gender"] = "male"; // We can't add a new key-value pair
obj["name"] = "shiva kumar"; // We can update an existing key-value pair
delete obj["age"]; // We can't delete a key-value pair
console.log(obj);

let k = Object.isSealed(obj);
console.log(k); // Output: true

Explanation:

  • Object.seal(obj): Prevents adding or deleting properties but allows modifying existing ones.

  • Object.isSealed(obj): Checks if the object is sealed.


Using Object.assign and Spread Operator

Merging Objects

let obj2 = {"subject": "maths", "marks": 100};
let op = Object.assign(obj, obj2);
console.log(op);

Output: { name: 'shiva kumar', age: 23, place: 'bangalore', subject: 'maths', marks: 100 }

Cloning Objects with Spread Operator

let objs = { ...obj };
console.log(objs);

Output: A shallow copy of obj.


Getting Object Properties and Values

Code Example:

let len = Object.keys(obj).length;
let valuesss = Object.values(obj).length;
let entries = Object.entries(obj).length;

console.log(len);       // Output: Number of keys in the object
console.log(valuesss);  // Output: Number of values in the object
console.log(entries);   // Output: Number of key-value pairs in the object

Advanced Object.assign Usage

Code Example:

let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };
let returnedTarget = Object.assign(target, source, { d: 6 });

console.log(returnedTarget); // Output: { a: 1, b: 4, c: 5, d: 6 }

Explanation:

  • Merges the source object into the target object, overriding existing properties.

  • Additional properties can be added during the assignment.


Final Thoughts

By combining array methods like reduceRight, filter, sort, reverse, and reduce, along with object manipulation methods like Object.assign, Object.keys, and Object.seal, developers can handle complex data operations effortlessly. These methods are powerful tools for improving code clarity and performance.

Experiment with these methods to enhance your JavaScript expertise!