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

0
()

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

Read Also:  array to string javascript - JavaScript array to string (with and without commas)

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]

Free Live Chat for Any Issue
Download

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.

Read Also:  how to hide div when click outside using jquery?

How useful was this post?

Click on a star to rate it!