JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript arrays.

An array is a special variable, which can hold more than one value:

Why Use Arrays?

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

It is a common practice to declare arrays with the const keyword.

Learn more about const with arrays in the chapter: JS Array Const .

Spaces and line breaks are not important. A declaration can span multiple lines:

You can also create an array, and then provide the elements:

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

The two examples above do exactly the same.

There is no need to use new Array() .

For simplicity, readability and execution speed, use the array literal method.

Advertisement

Accessing Array Elements

You access an array element by referring to the index number :

Note: Array indexes start with 0.

[0] is the first element. [1] is the second element.

Changing an Array Element

This statement changes the value of the first element in cars :

Converting an Array to a String

The JavaScript method toString() converts an array to a string of (comma separated) array values.

Access the Full Array

With JavaScript, the full array can be accessed by referring to the array name:

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns John:

Objects use names to access its "members". In this example, person.firstName returns John:

Array Elements Can Be Objects

JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array:

Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and methods:

Array methods are covered in the next chapters.

The length Property

The length property of an array returns the length of an array (the number of array elements).

The length property is always one more than the highest array index.

Accessing the First Array Element

Accessing the last array element, looping array elements.

One way to loop through an array, is using a for loop:

You can also use the Array.forEach() function:

Adding Array Elements

The easiest way to add a new element to an array is using the push() method:

New element can also be added to an array using the length property:

Adding elements with high indexes can create undefined "holes" in an array:

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes .  

WARNING !! If you use named indexes, JavaScript will redefine the array to an object.

After that, some array methods and properties will produce incorrect results .

 Example:

The difference between arrays and objects.

In JavaScript, arrays use numbered indexes .  

In JavaScript, objects use named indexes .

Arrays are a special kind of objects, with numbered indexes.

When to Use Arrays. When to use Objects.

  • JavaScript does not support associative arrays.
  • You should use objects when you want the element names to be strings (text) .
  • You should use arrays when you want the element names to be numbers .

JavaScript new Array()

JavaScript has a built-in array constructor new Array() .

But you can safely use [] instead.

These two different statements both create a new empty array named points:

These two different statements both create a new array containing 6 numbers:

The new keyword can produce some unexpected results:

A Common Error

is not the same as:

How to Recognize an Array

A common question is: How do I know if a variable is an array?

The problem is that the JavaScript operator typeof returns " object ":

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray() :

Solution 2:

The instanceof operator returns true if an object is created by a given constructor:

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference .

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Get the value " Volvo " from the cars array.

Start the Exercise

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

JavaScript Arrays: Create, Access, Add & Remove Elements

We have learned that a variable can hold only one value. We cannot assign multiple values to a single variable. JavaScript array is a special type of variable, which can store multiple values using a special syntax.

The following declares an array with five numeric values.

In the above array, numArr is the name of an array variable. Multiple values are assigned to it by separating them using a comma inside square brackets as [10, 20, 30, 40, 50] . Thus, the numArr variable stores five numeric values. The numArr array is created using the literal syntax and it is the preferred way of creating arrays.

Another way of creating arrays is using the Array() constructor, as shown below.

Every value is associated with a numeric index starting with 0. The following figure illustrates how an array stores values.

js assign array values

The following are some more examples of arrays that store different types of data.

It is not required to store the same type of values in an array. It can store values of different types as well.

Get Size of an Array

Use the length property to get the total number of elements in an array. It changes as and when you add or remove elements from the array.

Accessing Array Elements

Array elements (values) can be accessed using an index. Specify an index in square brackets with the array name to access the element at a particular index like arrayName[index] . Note that the index of an array starts from zero.

For the new browsers, you can use the arr.at(pos) method to get the element from the specified index. This is the same as arr[index] except that the at() returns an element from the last element if the specified index is negative.

You can iterate an array using Array.forEach() , for, for-of, and for-in loop, as shown below.

Update Array Elements

You can update the elements of an array at a particular index using arrayName[index] = new_value syntax.

Adding New Elements

You can add new elements using arrayName[index] = new_value syntax. Just make sure that the index is greater than the last index. If you specify an existing index then it will update the value.

In the above example, cities[9] = "Pune" adds "Pune" at 9th index and all other non-declared indexes as undefined.

The recommended way of adding elements at the end is using the push() method. It adds an element at the end of an array.

Use the unshift() method to add an element to the beginning of an array.

Remove Array Elements

The pop() method returns the last element and removes it from the array.

The shift() method returns the first element and removes it from the array.

You cannot remove middle elements from an array. You will have to create a new array from an existing array without the element you do not want, as shown below.

Learn about array methods and properties in the next chapter.

Declaration

There are two syntaxes for creating an empty array:

Almost all the time, the second syntax is used. We can supply initial elements in the brackets:

Array elements are numbered, starting with zero.

We can get an element by its number in square brackets:

We can replace an element:

…Or add a new one to the array:

The total count of the elements in the array is its length :

We can also use alert to show the whole array.

An array can store elements of any type.

For instance:

An array, just like an object, may end with a comma:

The “trailing comma” style makes it easier to insert/remove items, because all lines become alike.

Get last elements with “at”

Let’s say we want the last element of the array.

Some programming languages allow the use of negative indexes for the same purpose, like fruits[-1] .

Although, in JavaScript it won’t work. The result will be undefined , because the index in square brackets is treated literally.

We can explicitly calculate the last element index and then access it: fruits[fruits.length - 1] .

A bit cumbersome, isn’t it? We need to write the variable name twice.

Luckily, there’s a shorter syntax: fruits.at(-1) :

In other words, arr.at(i) :

  • is exactly the same as arr[i] , if i >= 0 .
  • for negative values of i , it steps back from the end of the array.

Methods pop/push, shift/unshift

A queue is one of the most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations:

  • push appends an element to the end.
  • shift get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.

Arrays support both operations.

In practice we need it very often. For example, a queue of messages that need to be shown on-screen.

There’s another use case for arrays – the data structure named stack .

It supports two operations:

  • push adds an element to the end.
  • pop takes an element from the end.

So new elements are added or taken always from the “end”.

A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:

For stacks, the latest pushed item is received first, that’s also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).

Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements, both to/from the beginning or the end.

In computer science, the data structure that allows this, is called deque .

Methods that work with the end of the array:

Extracts the last element of the array and returns it:

Both fruits.pop() and fruits.at(-1) return the last element of the array, but fruits.pop() also modifies the array by removing it.

Append the element to the end of the array:

The call fruits.push(...) is equal to fruits[fruits.length] = ... .

Methods that work with the beginning of the array:

Extracts the first element of the array and returns it:

Add the element to the beginning of the array:

Methods push and unshift can add multiple elements at once:

An array is a special kind of object. The square brackets used to access a property arr[0] actually come from the object syntax. That’s essentially the same as obj[key] , where arr is the object, while numbers are used as keys.

They extend objects providing special methods to work with ordered collections of data and also the length property. But at the core it’s still an object.

Remember, there are only eight basic data types in JavaScript (see the Data types chapter for more info). Array is an object and thus behaves like an object.

For instance, it is copied by reference:

…But what makes arrays really special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast.

But they all break if we quit working with an array as with an “ordered collection” and start working with it as if it were a regular object.

For instance, technically we can do this:

That’s possible, because arrays are objects at their base. We can add any properties to them.

But the engine will see that we’re working with the array as with a regular object. Array-specific optimizations are not suited for such cases and will be turned off, their benefits disappear.

The ways to misuse an array:

  • Add a non-numeric property like arr.test = 5 .
  • Make holes, like: add arr[0] and then arr[1000] (and nothing between them).
  • Fill the array in the reverse order, like arr[1000] , arr[999] and so on.

Please think of arrays as special structures to work with the ordered data . They provide special methods for that. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object {} .

Performance

Methods push/pop run fast, while shift/unshift are slow.

Why is it faster to work with the end of an array than with its beginning? Let’s see what happens during the execution:

It’s not enough to take and remove the element with the index 0 . Other elements need to be renumbered as well.

The shift operation must do 3 things:

  • Remove the element with the index 0 .
  • Move all elements to the left, renumber them from the index 1 to 0 , from 2 to 1 and so on.
  • Update the length property.

The more elements in the array, the more time to move them, more in-memory operations.

The similar thing happens with unshift : to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes.

And what’s with push/pop ? They do not need to move anything. To extract an element from the end, the pop method cleans the index and shortens length .

The actions for the pop operation:

The pop method does not need to move anything, because other elements keep their indexes. That’s why it’s blazingly fast.

The similar thing with the push method.

One of the oldest ways to cycle array items is the for loop over indexes:

But for arrays there is another form of loop, for..of :

The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

Technically, because arrays are objects, it is also possible to use for..in :

But that’s actually a bad idea. There are potential problems with it:

The loop for..in iterates over all properties , not only the numeric ones.

There are so-called “array-like” objects in the browser and in other environments, that look like arrays . That is, they have length and indexes properties, but they may also have other non-numeric properties and methods, which we usually don’t need. The for..in loop will list them though. So if we need to work with array-like objects, then these “extra” properties can become a problem.

The for..in loop is optimized for generic objects, not arrays, and thus is 10-100 times slower. Of course, it’s still very fast. The speedup may only matter in bottlenecks. But still we should be aware of the difference.

Generally, we shouldn’t use for..in for arrays.

A word about “length”

The length property automatically updates when we modify the array. To be precise, it is actually not the count of values in the array, but the greatest numeric index plus one.

For instance, a single element with a large index gives a big length:

Note that we usually don’t use arrays like that.

Another interesting thing about the length property is that it’s writable.

If we increase it manually, nothing interesting happens. But if we decrease it, the array is truncated. The process is irreversible, here’s the example:

So, the simplest way to clear the array is: arr.length = 0; .

new Array()

There is one more syntax to create an array:

It’s rarely used, because square brackets [] are shorter. Also, there’s a tricky feature with it.

If new Array is called with a single argument which is a number, then it creates an array without items, but with the given length .

Let’s see how one can shoot themselves in the foot:

To avoid such surprises, we usually use square brackets, unless we really know what we’re doing.

Multidimensional arrays

Arrays can have items that are also arrays. We can use it for multidimensional arrays, for example to store matrices:

Arrays have their own implementation of toString method that returns a comma-separated list of elements.

Also, let’s try this:

Arrays do not have Symbol.toPrimitive , neither a viable valueOf , they implement only toString conversion, so here [] becomes an empty string, [1] becomes "1" and [1,2] becomes "1,2" .

When the binary plus "+" operator adds something to a string, it converts it to a string as well, so the next step looks like this:

Don’t compare arrays with ==

Arrays in JavaScript, unlike some other programming languages, shouldn’t be compared with operator == .

This operator has no special treatment for arrays, it works with them as with any objects.

Let’s recall the rules:

  • Two objects are equal == only if they’re references to the same object.
  • If one of the arguments of == is an object, and the other one is a primitive, then the object gets converted to primitive, as explained in the chapter Object to primitive conversion .
  • …With an exception of null and undefined that equal == each other and nothing else.

The strict comparison === is even simpler, as it doesn’t convert types.

So, if we compare arrays with == , they are never the same, unless we compare two variables that reference exactly the same array.

For example:

These arrays are technically different objects. So they aren’t equal. The == operator doesn’t do item-by-item comparison.

Comparison with primitives may give seemingly strange results as well:

Here, in both cases, we compare a primitive with an array object. So the array [] gets converted to primitive for the purpose of comparison and becomes an empty string '' .

Then the comparison process goes on with the primitives, as described in the chapter Type Conversions :

So, how to compare arrays?

That’s simple: don’t use the == operator. Instead, compare them item-by-item in a loop or using iteration methods explained in the next chapter.

Array is a special kind of object, suited to storing and managing ordered data items.

The declaration:

The call to new Array(number) creates an array with the given length, but without elements.

  • The length property is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods.
  • If we shorten length manually, the array is truncated.

Getting the elements:

  • we can get element by its index, like arr[0]
  • also we can use at(i) method that allows negative indexes. For negative values of i , it steps back from the end of the array. If i >= 0 , it works same as arr[i] .

We can use an array as a deque with the following operations:

  • push(...items) adds items to the end.
  • pop() removes the element from the end and returns it.
  • shift() removes the element from the beginning and returns it.
  • unshift(...items) adds items to the beginning.

To loop over the elements of the array:

  • for (let i=0; i<arr.length; i++) – works fastest, old-browser-compatible.
  • for (let item of arr) – the modern syntax for items only,
  • for (let i in arr) – never use.

To compare arrays, don’t use the == operator (as well as > , < and others), as they have no special treatment for arrays. They handle them as any objects, and it’s not what we usually want.

Instead you can use for..of loop to compare arrays item-by-item.

We will continue with arrays and study more methods to add, remove, extract elements and sort arrays in the next chapter Array methods .

Is array copied?

What is this code going to show?

The result is 4 :

That’s because arrays are objects. So both shoppingCart and fruits are the references to the same array.

Array operations.

Let’s try 5 array operations.

  • Create an array styles with items “Jazz” and “Blues”.
  • Append “Rock-n-Roll” to the end.
  • Replace the value in the middle with “Classics”. Your code for finding the middle value should work for any arrays with odd length.
  • Strip off the first value of the array and show it.
  • Prepend Rap and Reggae to the array.

The array in the process:

Calling in an array context

What is the result? Why?

The call arr[2]() is syntactically the good old obj[method]() , in the role of obj we have arr , and in the role of method we have 2 .

So we have a call of the function arr[2] as an object method. Naturally, it receives this referencing the object arr and outputs the array:

The array has 3 values: initially it had two, plus the function.

Sum input numbers

Write the function sumInput() that:

  • Asks the user for values using prompt and stores the values in the array.
  • Finishes asking when the user enters a non-numeric value, an empty string, or presses “Cancel”.
  • Calculates and returns the sum of array items.

P.S. A zero 0 is a valid number, please don’t stop the input on zero.

Run the demo

Please note the subtle, but important detail of the solution. We don’t convert value to number instantly after prompt , because after value = +value we would not be able to tell an empty string (stop sign) from the zero (valid number). We do it later instead.

A maximal subarray

The input is an array of numbers, e.g. arr = [1, -2, 3, 4, -9, 6] .

The task is: find the contiguous subarray of arr with the maximal sum of items.

Write the function getMaxSubSum(arr) that will return that sum.

If all items are negative, it means that we take none (the subarray is empty), so the sum is zero:

Please try to think of a fast solution: O(n 2 ) or even O(n) if you can.

Open a sandbox with tests.

Slow solution

We can calculate all possible subsums.

The simplest way is to take every element and calculate sums of all subarrays starting from it.

For instance, for [-1, 2, 3, -9, 11] :

The code is actually a nested loop: the external loop over array elements, and the internal counts subsums starting with the current element.

The solution has a time complexity of O(n 2 ) . In other words, if we increase the array size 2 times, the algorithm will work 4 times longer.

For big arrays (1000, 10000 or more items) such algorithms can lead to serious sluggishness.

Fast solution

Let’s walk the array and keep the current partial sum of elements in the variable s . If s becomes negative at some point, then assign s=0 . The maximum of all such s will be the answer.

If the description is too vague, please see the code, it’s short enough:

The algorithm requires exactly 1 array pass, so the time complexity is O(n).

You can find more detailed information about the algorithm here: Maximum subarray problem . If it’s still not obvious why that works, then please trace the algorithm on the examples above, see how it works, that’s better than any words.

Open the solution with tests in a sandbox.

  • If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
  • If you can't understand something in the article – please elaborate.
  • To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

  • © 2007—2024  Ilya Kantor
  • about the project
  • terms of usage
  • privacy policy
  • 90% Refund @Courses
  • DSA with JS - Self Paced
  • JS Tutorial
  • JS Exercise
  • JS Interview Questions
  • JS Operator
  • JS Projects
  • JS Cheat Sheet
  • JS Examples
  • JS Free JS Course
  • JS A to Z Guide
  • JS Formatter
  • JS Web Technology

Related Articles

  • Solve Coding Problems
  • JavaScript Tutorial

JavaScript Basics

  • Introduction to JavaScript
  • JavaScript Versions
  • How to Add JavaScript in HTML Document ?
  • JavaScript Statements
  • JavaScript Syntax
  • JavaScript Output
  • JavaScript Comments

JS Variables & Datatypes

  • Variables and Datatypes in JavaScript
  • Global and Local variables in JavaScript
  • JavaScript Let
  • JavaScript Const
  • JavaScript var

JS Operators

  • JavaScript Operators
  • Operator precedence in JavaScript
  • JavaScript Ternary Operator
  • JavaScript typeof Operator
  • JavaScript yield Operator
  • JavaScript delete Operator
  • JavaScript Comma Operator
  • JavaScript Pipeline Operator
  • JavaScript in Operator
  • JavaScript Grouping Operator
  • Javascript Short Circuiting Operators
  • JavaScript Loops
  • 7 Loops of JavaScript
  • JavaScript For Loop
  • JavaScript While Loop
  • JavaScript for in Loop
  • JavaScript for...of Loop
  • JavaScript do...while Loop

JS Perfomance & Debugging

  • JavaScript | Performance
  • Debugging in JavaScript
  • JavaScript Errors Throw and Try to Catch
  • Objects in Javascript
  • Introduction to Object Oriented Programming in JavaScript
  • JavaScript Objects
  • Creating objects in JavaScript (4 Different Ways)
  • JavaScript JSON Objects
  • JavaScript Object Reference

JS Function

  • Functions in JavaScript
  • How to write a function in JavaScript ?
  • JavaScript Function Call
  • Different ways of writing functions in JavaScript
  • Difference between Methods and Functions in JavaScript
  • Explain the Different Function States in JavaScript
  • JavaScript Function Complete Reference

JavaScript Arrays

  • JavaScript Array Methods
  • Best-Known JavaScript Array Methods
  • What are the Important Array Methods of JavaScript ?
  • JavaScript Array Reference
  • JavaScript Strings
  • JavaScript String Methods
  • JavaScript String Reference
  • JavaScript Numbers
  • How numbers are stored in JavaScript ?
  • How to create a Number object using JavaScript ?
  • JavaScript Number Reference
  • JavaScript Math Object
  • What is the use of Math object in JavaScript ?
  • JavaScript Math Reference
  • JavaScript Map
  • What is JavaScript Map and how to use it ?
  • JavaScript Map Reference
  • Sets in JavaScript
  • How are elements ordered in a Set in JavaScript ?
  • How to iterate over Set elements in JavaScript ?
  • How to sort a set in JavaScript ?
  • JavaScript Set Reference
  • JavaScript Date
  • JavaScript Promise
  • JavaScript BigInt
  • JavaScript Boolean
  • JavaScript Proxy/Handler
  • JavaScript WeakMap
  • JavaScript WeakSet
  • JavaScript Function Generator
  • JavaScript JSON
  • Arrow functions in JavaScript
  • JavaScript this Keyword
  • Strict mode in JavaScript
  • Introduction to ES6
  • JavaScript Hoisting
  • Async/Await Function in JavaScript

JavaScript Exercises

  • JavaScript Exercises, Practice Questions and Solutions
  • What is Array in JavaScript?

JavaScript Array is a data structure that allows you to store and organize multiple values within a single variable. It is a versatile and dynamic object. It can hold various data types, including numbers, strings, objects, and even other arrays. Arrays in JavaScript are zero-indexed i.e. the first element is accessed with an index 0, the second element with an index of 1, and so forth.

JavaScript Arrays

JavaScript Array

You can create JavaScript Arrays using the Array constructor or using the shorthand array literal syntax, which employs square brackets. Arrays can dynamically grow or shrink in size as elements are added or removed.

Table of Content

Basic Terminologies of JavaScript Array

Declaration of an array, basic operations on javascript arrays, difference between javascript arrays and objects, when to use javascript arrays and objects, recognizing a javascript array, javascript array complete reference, javascript array examples, javascript cheatsheet.

  • Array: A data structure in JavaScript that allows you to store multiple values in a single variable.
  • Array Element: Each value within an array is called an element. Elements are accessed by their index.
  • Array Index: A numeric representation that indicates the position of an element in the array. JavaScript arrays are zero-indexed, meaning the first element is at index 0.
  • Array Length: The number of elements in an array. It can be retrieved using the length property.

There are basically two ways to declare an array i.e. Array Literal and Array Constructor.

1. Creating an Array using Array Literal

Creating an array using array literal involves using square brackets [] to define and initialize the array. This method is concise and widely preferred for its simplicity.

2. Creating an Array using Array Constructor (JavaScript new Keyword)

The “Array Constructor” refers to a method of creating arrays by invoking the Array constructor function. This approach allows for dynamic initialization and can be used to create arrays with a specified length or elements.

Note: Both the above methods do exactly the same. Use the array literal method for efficiency, readability, and speed.

1. Accessing Elements of an Array

Any element in the array can be accessed using the index number. The index in the arrays starts with 0.

2. Accessing the First Element of an Array

The array indexing starts from 0, so we can access first element of array using the index number.

3. Accessing the Last Element of an Array

We can access the last array element using [array.length – 1] index number.

4. Modifying the Array Elements

Elements in an array can be modified by assigning a new value to their corresponding index.

5. Adding Elements to the Array

Elements can be added to the array using methods like push() and unshift().

6. Removing Elements from an Array

Remove elements using methods like pop(), shift(), or splice().

7. Array Length

Get the length of an array using the length property.

8. Increase and Decrease the Array Length

We can increase and decrease the array length using the JavaScript length property.

9. Iterating Through Array Elements

We can iterate array and access array elements using for and forEach loop.

Example: It is the example of for loop.

Example: It is the example of Array.forEach() loop.

10. Array Concatenation

Combine two or more arrays using the concat() method. Ir returns new array conaining joined arrays elements.

11. Conversion of an Array to String

We have a builtin method toString() to converts an array to a string.

12. Check the Type of an Arrays

The JavaScript typeof operator is used ot check the type of an array. It returns “object” for arrays.

  • JavaScript arrays use indexes as numbers.
  • objects use indexes as names..
  • Arrays are used when we want element names to be numeric.
  • Objects are used when we want element names to be strings.

There are two methods by which we can recognize a JavaScript array:

  • By using Array.isArray() method
  • By using instanceof method  

Below is an example showing both approaches:

Note: A common error is faced while writing the arrays:

The above two statements are not the same.

Output: This statement creates an array with an element ” [5] “.

We have a complete list of Javascript Array, to check those please go through this JavaScript Array Reference article. It contains detailed description and examples of all Array Properties and Methods.

JavaScript Array examples contains list of questions that are majorily asked in interview. Please check this article JavaScript Array Examples for more detail.

We have a Cheat Sheet on Javascript where we have covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript .

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now !

Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!

Please Login to comment...

  • javascript-array
  • Web Technologies
  • Dharmendra_Kumar
  • himanimishra
  • janardansthox
  • akmalanw6kf
  • sumit_lovanshi
  • amitsingh2730
  • amit_singh27
  • user_j5w9i0eqluj
  • Top 12 AI Testing Tools for Test Automation in 2024
  • 7 Best ChatGPT Plugins for Converting PDF to Editable Formats
  • Microsoft is bringing Linux's Sudo command to Windows 11
  • 10 Best AI Voice Cloning Tools to be Used in 2024 [Free + Paid]
  • 10 Best IPTV Service Provider Subscriptions

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

  • Web Development
  • Mobile App Development
  • Software Development
  • Cloud Infrastructure
  • How we work

All the latest news and technology insights from Scaffold.

Team Member

Reassigning Objects & Arrays using Const

  • Written by Gary Miskimmons
  • Published Mar 24, 2020
  • Read time 5 mins

Reassigning Objects & Arrays using Const featured image

When working with numbers, strings and booleans with const we know through our previous blog post var-vs-const-vs-let that you cannot reassign a const variable. The same goes for any const variables even objects or arrays. But unlike simple variables, objects and arrays have methods and properties that let you modify the object or array.

Const Arrays

The code above has an array variable called numbers holding three values. Even though the numbers array is a const you’re able to update or change the variable. For example, you can add another number to the numbers array by using the push method. Methods are actions you perform on the array or object.

With methods, we can modify our array by adding another value to the end of the array using the push method. Another way you could modify the array is to remove an item from the end by using the pop method. There is to many methods to go over in detail in one blog post but if you visit  The Mozilla Developer Network  you’ll find everything thing you need to know on arrays and everything to do with Javascript.

Const Objects

The modifying principle applies to an object for example.

The code above creates a user object with a name property then it assigns a new age property to object. One thing to remember const does not stop array and objects from being modified it only stops the variable itself from being reassigned or being overwritten for example.

If we attempt to override the user object with another object literal the console will throw an error. That’s because we are trying to reassign a user to a new object literal. However, if you modify the name property directly by assigning it a new value you will not get an error.

In short, you cannot reassign any variables declared with const. However, unlike simple variables ie numbers, strings, and booleans, objects & arrays provided additional properties and methods that let modify their values. Making it the ideal way to declare your structured data with the additional benefit of not being able to be reassigned by stray variables. Thank you for taking the time to read my post stay tuned into our blog for all the latest from Scaffold.

Latest Blog Posts

Team news - scaffold shortlisted for it project of the year and development team of the year, shortlisted - mobile app project of the year, scaffold digital shortlisted - best 'not for profit' it project of the year.

JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods

On average I work with JSON data 18 times a week. And I still need to google for specific ways to manipulate them almost every time. What if there was an ultimate guide that could always give you the answer?

In this article, I'll show you the basics of working with object arrays in JavaScript.

If you ever worked with a JSON structure, you've worked with JavaScript objects. Quite literally. JSON stands for JavaScript Object Notation.

Creating an object is as simple as this:

This object represents a car. There can be many types and colors of cars, each object then represents a specific car.

purple

Now, most of the time you get data like this from an external service. But sometimes you need to create objects and their arrays manually. Like I did when I was creating this e-shop:

categories

Considering each category list item looks like this in HTML:

code

I didn't want to have this code repeated 12 times, which would make it unmaintainable.

Creating an array of objects

But let's get back to cars. Let's take a look at this set of cars:

cars

We can represent it as an array this way:

Arrays of objects don't stay the same all the time. We almost always need to manipulate them. So let's take a look at how we can add objects to an already existing array.

Add a new object at the start - Array.unshift

beginning

To add an object at the first position, use Array.unshift .

Add a new object at the end - Array.push

ending

To add an object at the last position, use Array.push .

Add a new object in the middle - Array.splice

middle

To add an object in the middle, use Array.splice . This function is very handy as it can also remove items. Watch out for its parameters:

So if we want to add the red Volkswagen Cabrio on the fifth position, we'd use:

Looping through an array of objects

Let me ask you a question here: Why do you want to loop through an array of objects? The reason I'm asking is that the looping is almost never the primary cause of what we want to achieve.

JavaScript provides many functions that can solve your problem without actually implementing the logic in a general cycle. Let's take a look.

Find an object in an array by its values - Array.find

Let's say we want to find a car that is red. We can use the function Array.find .

cars-colorred

This function returns the first matching element:

It's also possible to search for multiple values:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

In that case we'll get the last car in the list.

Get multiple items from an array that match a condition - Array.filter

The Array.find function returns only one object. If we want to get all red cars, we need to use Array.filter .

cars-colorred2

Transform objects of an array - Array.map

This is something we need very often. Transform an array of objects into an array of different objects. That's a job for Array.map . Let's say we want to classify our cars into three groups based on their size.

cars-sizes

It's also possible to create a new object if we need more values:

Add a property to every object of an array - Array.forEach

But what if we want the car size too? In that case we can enhance the object for a new property size . This is a good use-case for the Array.forEach function.

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

cars-sort

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

sort

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

You may remember the function Array.includes which is similar to Array.some , but works only for primitive types.

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference .

Or get in touch with me and I will prepare another article :-)

Jamstack dev, YouTube video maker & streamer, dev evangelist @Kontent, 3D printing enthusiast, bad AoE2 player, German Shepherd lover

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

Object.assign()

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object . It returns the modified target object.

The target object — what to apply the sources' properties to, which is returned after it is modified.

The source object(s) — objects containing the properties you want to apply.

Return value

The target object.

Description

Properties in the target object are overwritten by properties in the sources if they have the same key . Later sources' properties overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters . Therefore it assigns properties, versus copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters.

For copying property definitions (including their enumerability) into prototypes, use Object.getOwnPropertyDescriptor() and Object.defineProperty() instead.

Both String and Symbol properties are copied.

In case of an error, for example if a property is non-writable, a TypeError is raised, and the target object is changed if any properties are added before the error is raised.

Note: Object.assign() does not throw on null or undefined sources.

Cloning an object

Warning for deep clone.

For deep cloning , we need to use alternatives like structuredClone() , because Object.assign() copies property values.

If the source value is a reference to an object, it only copies the reference value.

Merging objects

Merging objects with same properties.

The properties are overwritten by other objects that have the same properties later in the parameters order.

Copying symbol-typed properties

Properties on the prototype chain and non-enumerable properties cannot be copied, primitives will be wrapped to objects, exceptions will interrupt the ongoing copying task, copying accessors, specifications, browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Polyfill of Object.assign in core-js
  • Object.defineProperties()
  • Enumerability and ownership of properties
  • Spread in object literals

IMAGES

  1. How to add elements into an array in JavaScript

    js assign array values

  2. JavaScript Array values() Method

    js assign array values

  3. javascript

    js assign array values

  4. Commonly used array methods

    js assign array values

  5. JavaScript Associative Array

    js assign array values

  6. 35 How To Assign Value In Javascript

    js assign array values

VIDEO

  1. Resource Calendar in msp #microsoftproject #msp #abctrainings #abccadcentre #shorts

  2. Project Setup 01 The Cloud

  3. Main functions of array in js

  4. JavaScript Arrays (Part 1)

  5. How to use default value and Rest Operator in JS || Hindi || Code And Tech

  6. How to SUM array of object value in Js

COMMENTS

  1. Populating another array from array

    Very simple thing I am trying to do in JS (assign the values of one array to another), but somehow the array bar 's value doesn't seem affected at all. The first thing I tried, of course, was simply bar = ar; -- didn't work, so I tried manually looping through... still doesn't work. I don't grok the quirks of Javascript! Please help!!

  2. JavaScript Arrays

    Using an array literal is the easiest way to create a JavaScript Array. Syntax: const array_name = [ item1, item2, ... ]; It is a common practice to declare arrays with the const keyword. Learn more about const with arrays in the chapter: JS Array Const. Example const cars = ["Saab", "Volvo", "BMW"]; Try it Yourself »

  3. Array

    Relationship between length and numerical properties A JavaScript array's length property and numerical properties are connected. Several of the built-in array methods (e.g., join (), slice (), indexOf (), etc.) take into account the value of an array's length property when they're called.

  4. JavaScript Arrays: Create, Access, Add & Remove Elements

    JavaScript array is a special type of variable, which can store multiple values using a special syntax. The following declares an array with five numeric values. let numArr = [10, 20, 30, 40, 50]; In the above array, numArr is the name of an array variable.

  5. How to Manipulate Arrays in JavaScript

    What are Arrays in JavaScript? Before we proceed, you need to understand what arrays really mean. In JavaScript, an array is a variable that is used to store different data types. It basically stores different elements in one box and can be later assesssed with the variable. Declaring an array: let myBox = []; // Initial Array declaration in JS ...

  6. Understanding Arrays in JavaScript

    An array in JavaScript is a type of global object used to store data. Arrays can store multiple values in a single variable, which can condense and organize our code. JavaScript provides many built-in methods to work with arrays, including mutator, accessor, and iteration methods. JavaScript Development.

  7. Assignment (=)

    The assignment ( =) operator is used to assign a value to a variable or property. The assignment expression itself has a value, which is the assigned value. This allows multiple assignments to be chained in order to assign a single value to multiple variables. Try it Syntax js x = y Parameters x

  8. Array.prototype.values()

    Array.prototype.values () is the default implementation of Array.prototype [@@iterator] (). js. Array.prototype.values === Array.prototype[Symbol.iterator]; // true. When used on sparse arrays, the values () method iterates empty slots as if they have the value undefined. The values () method is generic.

  9. Javascript

    5,130 21 61 93 Add a comment 9 Answers Sorted by: 58 There's no built-in way, you'll have to loop over all of them: function setAll (a, v) { var i, n = a.length; for (i = 0; i < n; ++i) { a [i] = v; } } http://jsfiddle.net/alnitak/xG88A/ If you really want, do this:

  10. Arrays

    Declaration There are two syntaxes for creating an empty array: let arr = new Array(); let arr = []; Almost all the time, the second syntax is used. We can supply initial elements in the brackets: let fruits = ["Apple", "Orange", "Plum"]; Array elements are numbered, starting with zero. We can get an element by its number in square brackets:

  11. JavaScript Arrays

    Elements in an array can be modified by assigning a new value to their corresponding index. Javascript // Creating an Array and Initializing with Values. let courses = ["HTML", ... Difference Between JavaScript Arrays and Objects. JavaScript arrays use indexes as numbers. objects use indexes as names..

  12. Indexed collections

    Indexed collections. This chapter introduces collections of data which are ordered by an index value. This includes arrays and array-like constructs such as Array objects and TypedArray objects. An array is an ordered list of values that you refer to with a name and an index.

  13. javascript

    Is it a standard way to assign to multiple variables from an array in JavaScript? In Firefox and Opera, you can do: var [key, value] = "key:value".split (":"); alert (key + "=" + value); // will alert "key = value"; But it doesn't work in IE8 or Google Chrome. Does anyone know a nice way to do this in other browsers without a tmp variable?

  14. How to Declare an Array in JavaScript

    You can add values to the new array by placing them in between the brackets, separated by a comma. let myArray = new Array("John Doe", 24, true); Just like you learned earlier, you can access each value using its index number, which starts from zero (0).

  15. Reassign Objects & Arrays in Javascript

    const numbers = [ 1, 2, 3 ]; numbers.push ( 4 ); console. log (numbers) // Outpusts [1,2,3,4]; With methods, we can modify our array by adding another value to the end of the array using the push method. Another way you could modify the array is to remove an item from the end by using the pop method.

  16. Array() constructor

    Arrays can be created using a constructor with a single number parameter. An array is created with its length property set to that number, and the array elements are empty slots. js. const arrayEmpty = new Array(2); console.log(arrayEmpty.length); // 2 console.log(arrayEmpty[0]); // undefined; actually, it is an empty slot console.log(0 in ...

  17. Assigning values from an array into variables in javascript

    125 2 22 asked Sep 2, 2021 at 7:23 Atul Sagar 13 5 3 Frankly, don't. Any time you want to deal with a set of sequentially named variables, you should be using an array in the first place. The smells of being an XY problem. - Quentin Sep 2, 2021 at 7:25 We usually do the opposite.

  18. JavaScript Array of Objects Tutorial

    JavaScript provides many functions that can solve your problem without actually implementing the logic in a general cycle. Let's take a look. Find an object in an array by its values - Array.find. Let's say we want to find a car that is red. We can use the function Array.find. let car = cars.find(car => car.color === "red");

  19. Destructuring assignment

    Unpacking values from a regular expression match. When the regular expression exec() method finds a match, it returns an array containing first the entire matched portion of the string and then the portions of the string that matched each parenthesized group in the regular expression. Destructuring assignment allows you to unpack the parts out of this array easily, ignoring the full match if ...

  20. how to assign values to multidimensional arrays in javascript?

    how to assign values to multidimensional arrays in javascript? - Stack Overflow how to assign values to multidimensional arrays in javascript? Asked 12 years, 9 months ago Modified 6 years, 8 months ago Viewed 18k times 6 I tried to do this with: arr [i] [j] = 'whatever'; but I get some kind of error "cannot convert to object..." javascript arrays

  21. Object.assign()

    Object.assign () The Object.assign () static method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. Try it Syntax js Object.assign(target) Object.assign(target, source1) Object.assign(target, source1, source2) Object.assign(target, source1, source2, /* …, */ sourceN)