Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
19 May
2023

flat() and flatMap() in JavaScript

by Shubham Batra

55

Hello guys and welcome to Code2Night. In JavaScript, the array methods flat() and flatMap() are powerful additions introduced in ECMAScript 2019 (ES10) that simplify working with nested arrays. These methods provide concise and efficient ways to handle arrays within arrays, making your code more readable and manageable. In this tutorial, we will delve into the functionalities of both flat() and flatMap() and understand how they can enhance your array manipulation skills. So, let's dive in and explore each method in detail.

flat() and flatMap()

In JavaScript, flat() and flatMap() are array methods introduced in ECMAScript 2019 (ES10) that allow you to work with nested arrays in a concise manner. Let's explore each method:

1.) flat(): The flat() method creates a new array by concatenating all subarrays within a nested array up to a specified depth.

Syntax:

 let newArray = array.flat(depth);
  • Parameters:

    • depth (optional): An integer specifying the depth level of flattening. If not provided, the default depth is 1.
    • Example:

 const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = nestedArray.flat();

console.log(flattenedArray);
// Output: [1, 2, 3, 4, [5, 6]]
In the example above, flat() is called on the nestedArray with no depth specified, resulting in a new array where subarrays are concatenated up to a depth of 1. The nested subarray [5, 6] is not flattened because the depth is 1.

2.) flatMap(): The flatMap() method combines the functionality of map() and flat() in a single step. It maps each element of an array using a mapping function and then flattens the result into a new array.
Syntax:

 let newArray = array.flatMap(callback);
Parameters:

callback: A function that is called for each element in the array and returns the value to be included in the new array. It takes three arguments: currentValue, index, and array.
Example:

 const numbers = [1, 2, 3, 4, 5];
const doubledArray = numbers.flatMap(num => [num, num * 2]);

console.log(doubledArray);
// Output: [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
In the example above, flatMap() is used to create a new array where each element of the original array is mapped to two elements: the original value and its double.

It's important to note that both flat() and flatMap() methods are non-mutating, meaning they do not modify the original array. Instead, they return a new array with the desired transformation applied.


  • |
  • flat() and flatMap() in JavaScript

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier