Javascript divide array into chunks




Hey guys in this post, we will discuss how to divide an array of objects using Javascript slice() with easy to understand examples.

Introduction


In every programming language, it is very common that split an array into two parts from one index to another index. For this, Javascript has provided a method slice()

slice() returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array.

  • start, The beginning index of the specified portion of the array. If start is undefined, then the slice begins at index 0.
  • end, The end index of the specified portion of the array. This is exclusive of the element at the index ‘end’. If end is undefined, then the slice extends to the end of the array.

Example – 1


Consider the array of numbers, we want to split the array from one index to another index.

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

const result = numbers.slice(0, 3);

console.log(numbers);
console.log(result);

Run the example:

PS C:\workspace\javascript-workspace> node app.js
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3 ]

Example – 2


Consider the array of numbers, we want to return the copy of the array from one index to till the end of the array

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

const result = numbers.slice(3);

console.log(numbers);
console.log(result);

Run the example:

PS C:\workspace\javascript-workspace> node app.js
[ 1, 2, 3, 4, 5, 6 ]
[ 4, 5, 6 ]

example – 3


Consider the array of objects which we fetched from the remote server, we need to split that array to return only the first 5 records.

let employees = [];

for (let index = 0; index < 20; index++) {
    const e = {
        name: "Emp "+(index+1),
        id: index + 1
    }
    employees.push(e);
}

console.log("Original employees", employees);

const topFiveRecords = employees.slice(0, 5);
console.log("------------------------");
console.log("First 5 employees", topFiveRecords);

Run the example:

PS C:\workspace\javascript-workspace> node app.js
Original employees [       
  { name: 'Emp 1', id: 1 },
  { name: 'Emp 2', id: 2 },
  { name: 'Emp 3', id: 3 },
  { name: 'Emp 4', id: 4 },
  { name: 'Emp 5', id: 5 },
  { name: 'Emp 6', id: 6 },
  { name: 'Emp 7', id: 7 },
  { name: 'Emp 8', id: 8 },
  { name: 'Emp 9', id: 9 },
  { name: 'Emp 10', id: 10 },
  { name: 'Emp 11', id: 11 },
  { name: 'Emp 12', id: 12 },
  { name: 'Emp 13', id: 13 },
  { name: 'Emp 14', id: 14 },
  { name: 'Emp 15', id: 15 },
  { name: 'Emp 16', id: 16 },
  { name: 'Emp 17', id: 17 },
  { name: 'Emp 18', id: 18 },
  { name: 'Emp 19', id: 19 },
  { name: 'Emp 20', id: 20 }
]
------------------------
First 5 employees [
  { name: 'Emp 1', id: 1 },
  { name: 'Emp 2', id: 2 },
  { name: 'Emp 3', id: 3 },
  { name: 'Emp 4', id: 4 },
  { name: 'Emp 5', id: 5 }
]

That’s it for this post, if you like this post, share this with your friends and colleagues or you can share this within your social media platform. Thanks, I will see you in our next post.



About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *