Insert values into an array in JavaScript

The Array.push() method is used to add one or more elements to the end of an array. It modifies the original array by appending the specified elements to it. The method returns the new length of the array after the addition of the elements.

arr = ["one","two","three"]; arr.push('four'); console.log(arr);
Output:
[ 'one', 'two', 'three', 'four' ]

The JavaScript Array.push() method is intentionally designed to be generic, making it versatile and applicable not only to standard arrays but also to objects that resemble arrays. This allows developers to use the push() method in conjunction with call() or apply() to add elements to array-like objects.

For instance, you can use push() on array-like objects such as HTML collections or custom objects with a length property and numerical indices. By utilizing call() or apply(), you can apply the push() method to these array-like objects, effectively adding elements to them.

Moreover, the push() method can be used to add multiple values to the end of an array or array-like object in a single call. This makes the process of adding multiple elements more efficient and concise.

arr = ["one","two","three"]; arr.push('four','five'); console.log(arr);
Output:
[ 'one', 'two', 'three', 'four', 'five' ]

The push method relies on a length property to determine where to start inserting the given values. If your browser does not support ECMAScript 6 , you can use .apply instead:

var arr1 = ['one']; arr1.push('two', 'three'); arr2 = ['four', 'five']; arr1.push.apply(arr1,arr2); console.log(arr1);
Output:
[ 'one', 'two', 'three', 'four', 'five' ]

It is important to note that above solution will fail with a stack overflow error if array arr2 is too long. If you cannot guarantee that arr2 is short enough, you should use a standard loop-based technique


Append values into an array in JavaScript

Array.concat()

If you want to add the elements of one array to another array, you can use array1.concat(array2) .

var arr1 = ['one','two']; var arr2 = ['three','four']; arr = arr1.concat(arr2); console.log(arr);
Output:
[ 'one', 'two', 'three', 'four' ]

Array.unshift()

If you want to prepend any value to the start of a JavaScript array then you can use Array.unshift() for this purpose.

var arr = ['one', 'two', 'three']; arr.unshift('zero'); console.log(arr);
Output:
[ 'zero', 'one', 'two', 'three' ]

Spread syntax (...)

The spread syntax was introduced in the ECMAScript 6 (ES6) specification of JavaScript. The spread operator, represented by three dots (...), allows for the expansion of an iterable into its individual elements. It offers a convenient way to pass an array or any other iterable as arguments to a function, accommodating situations where zero or more arguments are expected. Importantly, the original array remains unaltered, preserving its immutability, while a new array is generated, containing the appended items. This adheres to the principles of functional programming, promoting the creation of pure functions that do not mutate the input data, thereby enhancing code predictability and maintainability.

var arr1 = ['one','two']; var arr2 = [...arr1,'three','four']; console.log(arr2);
Output:
[ 'one', 'two', 'three', 'four' ]





Related Topics
  1. Difference between using "let" and "var" in JavaScript
  2. How to Use Array forEach() in JavaScript
  3. How to Remove Duplicate Values from a JavaScript Array?
  4. How To Get a Timestamp in JavaScript
  1. Function Declarations vs. Function Expressions in JavaScript
  2. How To Remove a Property from a JavaScript Object
  3. Which equals operator (== vs ===) should be used in JavaScript comparisons?
  4. How to Capitalize the First Letter of Each Word in JavaScript
  5. Get the size of the screen/browser window | JavaScript/jQuery
  6. Difference between setInterval and setTimeout in JavaScript
  7. Can't set headers after they are sent to the client
  8. Blocked by CORS policy: No 'Access-Control-Allow-Origin'