How to Add Elements to a JavaScript Array?

What is JavaScript?

JavaScript is a very powerful and popular programming language with a lot of applications in terms of web development. It enables developers to design dynamic and interactive content for web pages for a seamless user experience.

What is an Array?

An array is a special kind of data type in which we can store a list of items (usually numbers, strings, or other object types, if desired) with a single variable. With different methods and properties, it is possible to manipulate the contents of an array.

Example:

Array.push() Method

One of the most simple method to add an element at the end of an array is push() method. It alters the original array and returns the length of the altered array.

Code:

Output:

 
[ 'red', 'green', 'blue', 'yellow' ]   

Spread Operator with Array Literal

Another way is by creating a new array using the spread operator (...) and pushing new elements. This method doesn't change the original array.

Code:

Output:

 
[ 1, 2, 3, 4, 5 ]   

JavaScript splice() Method

You can use the splice() method to insert elements at any particular index of the array. It mutates the original array removes elements or adds new ones.

Syntax:

• start: The index at which mutations start.
• deleteCount: The number of items to delete (set to 0 to add without deleting).
• item1, item2, ...: Items to add.

Code:

Output:

 
[ 'cat', 'elephant', 'lion', 'dog', 'rabbit' ]   

JavaScript concat() Method

The concat() method is used to join two or more arrays or to add new elements to an existing array. Won't change the original array but going to return a new one.

Code:

Output:

 
Merged Array is :: [ 10, 20, 30, 40, 50 ]
Original Array is :: [ 10, 20 ]   

Advantages

1. Simple and Intuitive
   Using Arrays is simple, they have built in constants such as push(), splice(), and concat() for adding elements. That simplicity makes arrays such a simple data structure for beginners.
2. Ordered Collection
   An array preserves the order of the elements. In append-only mode, data is stored in order which is useful for lists, queues or ordered datasets.
3. Efficient Element Access
   Since the elements from the arrays are accessed directly using an index, this is efficient for the retrieval or modification of data from them if we want the data at any specific point.
4. Dynamic Size
   JavaScript arrays are dynamic, which means that they are not fixed in size like arrays in some languages like C or Java. It provides automatic resizing of the array so you can add or delete elements without resizing the array manually.
5. Versatile Methods
   There are a lot of built-in methods with JavaScript arrays (e.g., map(), filter(), reduce()) to allow us to manipulate and transform data easily after we add it.
6. Compatibility
   The fact that JavaScript has built-in support for arrays means that they naturally play well with other in-house components, frameworks, libraries, and even built-in APIs that expect or return array data.

Disadvantages

1. Performance Concerns for Large Arrays
   For big arrays, adding elements especially in the middle or start using splice() or unshift() becomes a slow process, as elements have to be shifted.
2. No Key-Value Pair Structure
   An array is a collection that is indexed and does not support key-value pairs like an object or a map does. This makes arrays relatively inappropriate for use cases in which you want to assign each data element a descriptive key.
3. Mutability Issues
   There are array methods that change the original array like push() or splice() and careless use of them can put bugs or unwanted side effects into your code.
4. Limited for Complex Data
   Arrays are not suitable to manage hierarchical or deeply nested data structures. These scenarios are best handled via an Object, a Map or even a Set.
5. Inefficient Searches
   Searching for a value in an array will take O(n) as we have to search the value by iterating the whole array. If you want to make lookups faster, better use a Set.
6. Memory Overhead
   Putting tons of data into an array can lead to lots of memory usage, especially when that data can be better stored in different types of data structures.
7. No Built-in Constraints
   Arrays permit duplicate values and they do not perform any data validation. If you want the data to be unique or within certain constraints, you have to perform checks yourself.

Conclusion

JavaScript has different ways to add elements in an array and each way can match the certain case. Push() and splice() mutate the array, while spread operator and concat() create a new array. With knowledge of these techniques, you can pick the proper way based on your use case and write cleaner, effective code.