Add new value to an existing array in JavaScript

JavascriptArrays

Javascript Problem Overview


In PHP, I'd do something like:

$array = array();
$array[] = "value1";
$array[] = "value2";
$array[] = "value3";

How would I do the same thing in JavaScript?

Javascript Solutions


Solution 1 - Javascript

You don't need jQuery for that. Use regular javascript

var arr = new Array();
// or var arr = [];
arr.push('value1');
arr.push('value2');

Note: In javascript, you can also use Objects as Arrays, but still have access to the Array prototypes. This makes the object behave like an array:

var obj = new Object();
Array.prototype.push.call(obj, 'value');

will create an object that looks like:

{
    0: 'value',
    length: 1
}

You can access the vaules just like a normal array f.ex obj[0].

Solution 2 - Javascript

This has nothing to do with jQuery, just JavaScript in general.

To create an array in JavaScript:

var a = [];

Or:

var a = ['value1', 'value2', 'value3'];

To append values on the end of existing array:

a.push('value4');

To create a new array, you should really use [] instead of new Array() for the following reasons:

  • new Array(1, 2) is equivalent to [1, 2], but new Array(1) is not equivalent to [1]. Rather the latter is closer to [undefined], since a single integer argument to the Array constructor indicates the desired array length.
  • Array, just like any other built-in JavaScript class, is not a keyword. Therefore, someone could easily define Array in your code to do something other than construct an array.

Solution 3 - Javascript

Array is a JavaScript native object, why don't you just try to use the API of it? Knowing API on its own will save you time when you will switch to pure JavaScript or another framework.

There are number of different possibilities, so, use the one which mostly targets your needs.

Creating array with values:

var array = ["value1", "value2", "value3"];

Adding values to the end

var array = [];
array.push("value1");
array.push("value2");
array.push("value3");

Adding values to the begin:

var array = [];
array.unshift("value1");
array.unshift("value2");
array.unshift("value3");

Adding values at some index:

var array = [];
array[index] = "value1";

or by using splice

array.splice(index, 0, "value1", "value2", "value3");

Choose one you need.

Solution 4 - Javascript

There are several ways:

Instantiating the array:

var arr;

arr = new Array(); // empty array

// ---

arr = [];          // empty array

// ---

arr = new Array(3);
alert(arr.length);  // 3
alert(arr[0]); // undefined

// ---

arr = [3];
alert(arr.length);  // 1
alert(arr[0]); // 3

Pushing to the array:

arr = [3];     // arr == [3]
arr[1] = 4;    // arr == [3, 4]
arr[2] = 5;    // arr == [3, 4, 5]
arr[4] = 7;    // arr == [3, 4, 5, undefined, 7]

// ---

arr = [3];
arr.push(4);        // arr == [3, 4]
arr.push(5);        // arr == [3, 4, 5]
arr.push(6, 7, 8);  // arr == [3, 4, 5, 6, 7, 8]

Using .push() is the better way to add to an array, since you don't need to know how many items are already there, and you can add many items in one function call.

Solution 5 - Javascript

You can use the .push() method (which is standard JavaScript)

e.g.

var primates = new Array();
primates.push('monkey');
primates.push('chimp');

Solution 6 - Javascript

Indeed, you must initialize your array then right after that use array.push() command line.

var array = new Array();
array.push("first value");
array.push("second value");

Solution 7 - Javascript

array = ["value1", "value2", "value3"]

it's not so much jquery as javascript

Solution 8 - Javascript

jQuery is an abstraction of JavaScript. Think of jQuery as a sub-set of JavaScript, aimed at working with the DOM. That being said; there are functions for adding item(s) to a collection. I would use basic JavaScript in your case though:

var array;

array[0] = "value1";
array[1] = "value2";
array[2] = "value3";

... Or:

var array = ["value1", "value2", "value3"];

... Or:

var array = [];

array.push("value1");
array.push("value2");
array.push("value3");

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndrewView Question on Stackoverflow
Solution 1 - JavascriptDavid HellsingView Answer on Stackoverflow
Solution 2 - JavascriptMikeView Answer on Stackoverflow
Solution 3 - JavascriptnemisjView Answer on Stackoverflow
Solution 4 - JavascriptnickfView Answer on Stackoverflow
Solution 5 - JavascriptmopokeView Answer on Stackoverflow
Solution 6 - JavascriptSitepor500.com.brView Answer on Stackoverflow
Solution 7 - JavascriptAntony HatchkinsView Answer on Stackoverflow
Solution 8 - JavascriptcllpseView Answer on Stackoverflow