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.