Posted inJavaScript / jQuery

javascript add to array – 3 Way to Append Item to Array in JavaScript

javascript add to array – 3 Ways to Append Item to Array (Mutative) using push, splice and length. also 2 Ways to Append Item to Array (Non Mutative) like concat and spread.

javascript add to array – JavaScript Array push() Method

Main 3 Ways to Append Item to Array (Mutative)

using push
The simplest way to add items to the end of an array is to use push.

const team = ['?', '?'];

team.push('?');

console.log(team); // ['?', '?', '?']
const team = ['?', '?'];

team.push('?', '?', '?');

console.log(team); // ['?', '?', '?', '?', '?']
const team = ['?', '?'];
const birds = ['?', '?', '?'];

team.push(...birds);

console.log(team); // ['?', '?', '?', '?', '?']

Using splice

Parameters Parameter Name Definition
1 startIndex The index where you want to add/remove item
2 deleteCount The number of items you want to remove
3 items The number you want to add
(If you’re removing, you can just leave this blank)
const team = ['?', '?'];

team.splice(
  team.length, // We want add at the END of our array
  0, // We do NOT want to remove any item
  '?', '?', '?', // These are the items we want to add
);

console.log(team); // ['?', '?', '?', '?', '?']

Using length

const team = ['?', '?'];

// '?' | Index = 0
// '?' | Index = 1

The bracket notation in arrays

const team = ['?', '?'];

// Retrieve
team[0]; // Returns '?'

// Override
team[1] = '?';

console.log(team); // ['?', '?']; **

// ** JUST JOKING ?
// ...I promise no workers were hurt in this blog article ?

using array.length

const team = ['?', '?'];
const length = team.length; // 2

team[length] = '?';

console.log(team); // ['?', '?', '?']

2 Ways to Append Item to Array (Non Mutative)

concat

const players = ['?', '?'];
const bolower = ['?', '?'];

const allrounders = players.concat(bolower);

allrounders; // ['?', '?', '?', '?']

// Original Array Not Affected
players; //  ['?', '?']
const players = ['?', '?'];

const allrounders = players.concat('?'); 
const renews = players.concat('?', '?');

allrounders; // ['?', '?', '?']
renews; //  ['?', '?', '?', '?']

// Original Array Not Affected
players; // ['?', '?']

Don’t Miss : javascript push array into array

spread

const players = ['?', '?'];
const bolower = ['?', '?'];

const allrounders = [...players, ...bolower];

allrounders; // ['?', '?', '?', '?']

// Original Array Not Affected
players; //  ['?', '?']
const players = ['?', '?'];
const bolower = ['?', '?'];

const allrounders = [players, bolower];

// [  ['?', '?'],  ['?', '?'] ]
const players = ['?', '?'];

const allrounders = [...players, '?']; 
const renews = [...players, '?', '?'];

allrounders; // ['?', '?', '?']
renews; //  ['?', '?', '?', '?']

// Original Array Not Affected
players; // ['?', '?']

To Mutate Or Not to Mutate?

function menu(isRekha) {
  const player = ['?', '?'];
  isRekha ? player.push('?') : player;

  return player;
}

Community Input

add an empty item to an array

const resultsPlayers = [1, 2];

resultsPlayers.length = 3;

console.log(resultsPlayers); // [1, 2, <1 empty item>]

use it to shrink array

const resultsPlayers = [1, 2];

resultsPlayers.length = 1;

console.log(resultsPlayers); // [1]

I hope you get an idea about javascript add to array.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype