javascript change array length

Home » JavaScript Array Methods » JavaScript Array Length

JavaScript Array Length

Summary : in this tutorial, you’ll learn about the JavaScript Array length property and how to handle it correctly.

What exactly is the JavaScript Array length property

By definition, the length property of an array is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

The value of the length is 2 32 . It means that an array can hold up to 4294967296 (2 32 ) elements.

The length property behaves differently depending on the array types including dense and sparse.

1) Dense arrays

A dense array is an array where its elements have contiguous indexes starting at zero.

For dense arrays, you can use the length property to get the number of elements in the array. For example:

In this example, the length property returns three, which is the same as the number of elements in the colors array.

The following adds one more element to the colors array:

Now, the length property of the colors array is four.

When you empty the colors array, its length is zero:

2) Sparse arrays

A sparse array is an array whose elements don’t have contiguous indexes starting at zero.

For example, the [10,, 20, 30] is a sparse array because the indexes of its elements are 0, 2, and 3.

In a sparse array, the length property doesn’t indicate the actual number of elements. It’s a number that is greater than the highest index. For example:

In this example, the number of elements in the numbers array is three: 10, 20, and 30. The highest index is three. Therefore, the length property returns four.

The following adds an element to the numbers array at the index 10:

In this example, the length property returns 11.

Modifying JavaScript Array length property

JavaScript allows you to change the value of the array length property. By changing the value of the length, you can remove elements from the array or make the array sparse.

1) Empty an array

If you set length to zero, the array will be empty :

2) Remove elements

If you set the length property of an array to a value that is lower than the highest index, all the elements whose index is greater than or equal to the new length are removed.

The following example changes the length property of the fruits array to two, which removes the third element from the array:

3) Make array sparse

If you set the length property of an array to a value that is higher than the highest index, the array will be spare. For example:

• The length property of an array is an unsigned, 32-bit integer that is always numerically greater than the highest index of the array.
• The length returns the number of elements that a dense array has.
• For the spare array, the length doesn’t reflect the number of actual elements in the array.
• Modifying the length property can remove elements from the array or make the array spare.

JavaScript Array Length Explained

length is a property of arrays in JavaScript that returns or sets the number of elements in a given array.

The length property of an array can be returned like so.

The assignment operator, in conjunction with the length property, can be used to set the number of elements in an array like so.

More info about arrays:

Isarray() method.

The Array.isArray() method returns true if an object is an array, false if it is not.

Parameters:

obj The object to be checked.

MDN link | MSDN link

Array.prototype.forEach

The ‘forEach’ array method is used to iterate through each item in an array. The method is called on the array Object and is passed a function that is called on each item in the array.

The callback function can also take a second parameter of an index in case you need to reference the index of the current item in the array.

Further reading about arrays:

array.prototype.filter

array.prototype.reduce

If this article was helpful, share it .

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

Understanding JavaScript array length property

by Nathan Sebhastian

Last Updated Jul 06, 2022

Reading time: 3 minutes

The JavaScript array length property returns a number that represents how many elements (or values) are currently stored in a JavaScript array.

To use it, you just need to access the property like any other object properties:

This property is immediately available for all array objects that you declare in your script.

You don’t even need to assign your array object into a variable to use it:

Iterate over an array with for loop and length

By utilizing the length property, you can iterate over an array and perform operations on its elements. Here’s an example where every element of the array is doubled:

Since the array index starts from 0 , you can start the for loop at 0 too by using let i = 0; .

Set the length property manually

The array length property can also be used to set the size of an array by assigning a new number to it.

Consider the following example:

When you set the array length property to be lower than the number of elements present, then the array will be truncated.

But you can’t set length to a negative number value. It will cause an error:

You can also extend the length of the array by assigning a higher number to the property.

The empty slot created by this assignment will return undefined as its value:

If you push a new element into the array, it won’t replace the undefined elements. JavaScript will place the new element after those undefined elements instead:

You need to replace the undefined elements using the index:

Finally, when you loop over the array with forEach method, the undefined elements will be skipped:

But when you do a manual loop with for and length , the undefined elements will be included:

This is one of the weird parts about JavaScript, but don’t worry too much because you will rarely need to assign the length property manually like this.

Now you’ve learned how the JavaScript array length property works. Nice work!

Take your skills to the next level ⚡️

I'm sending out an occasional email with the latest tutorials on programming, web development, and statistics. Drop your email in the box below and I'll send new stuff straight into your inbox!

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials. Learn statistics, JavaScript and other programming languages using clear examples written for people.

Learn more about this website

Connect with me on Twitter

Or LinkedIn

Type the keyword below and hit enter

Click to see all tutorials tagged with:

What Does Setting the Length of a JavaScript Array Do?

The most common pattern is setting the length of the array to 0. Setting array.length = 0 clears the array .

Reducing the Array Length

While the most common pattern is assigning to 0, you can reduce the length of the array to remove elements from the end. Reducing the array's length is similar to array splice()

Increasing the Array Length

If you increase the length of the array, you're adding "holes" at the end of the array.

This approach isn't commonly used, because array holes are tricky to work with. However, if you want to add several additional elements to an array, you can use .fill() as follows.

The above fill() approach works, but you should typically use push() instead to use simpler syntax.

More Fundamentals Tutorials

• Check if a Date is Valid in JavaScript
• Encode base64 in JavaScript
• Check if URL Contains a String
• JavaScript Add Month to Date
• JavaScript Add Days to Date
• 3 Patterns to Merge Arrays in JavaScript
• Convert a BigInt to a Number in JavaScript

JavaScript Array Length Property: Getting & Setting

With JavaScript, you're not only limited to retrieving the length of an array, but you can also manipulate the array's data by changing its length programmatically.

This article will teach you how to get and set an array length in JavaScript.

• What is the JavaScript.Array length Property?

length is a property of the JavaScript.Array class and allows you to return or assign the number of elements within a given array.  Array elements could include strings, integers, objects, additional arrays, and more.

The length property is a positive integer up to a maximum of 2 to the 32nd power, or 2 32 , in value.

• Getting Array Length

Here's an example illustrating how to retrieve an array length in JavaScript:

There are four elements, so the resulting output is 4 .

• Setting Array Length

You can also set an array length in JavaScript by altering an array's contents. By setting the length of the array to a smaller value than that of the actual length, you're truncating the excess elements from the end of the array.

Let's assume you have the same four colors as above, but you set the length to a smaller value than that of the total array length:

Out of curiosity, I checked to see what would happen if you set the length of the array larger than its actual length and came up with the following result:

The remaining six elements in the array don't return as null or even as array nodes themselves, just empty elements.

You can also empty an array completely by setting its length to 0:

• Property Attributes Available

There are three properties available for the JavaScript.Array length property:

• Writeable : A value of true indicates the value of the property can be changed, while a value of false indicates that the value cannot be changed.
• Configurable : If this attributes is set to false , attempts to change or delete any of the three property's attributes will fail.
• Enumerable : Setting this attribute to a value of true allows the property to be iterated over during a for or for..in loop.

The JavaScript.Array length property allows you to get an array's length as well as set the length by truncating or appending additional elements as necessary, and is supported by all browsers .

There are additional JavaScript array manipulation functions available that allow you to manipulate data within an array, also affecting its length.

There are no comments yet. Start the conversation!

Add A Comment

Table of contents, more javascript.

JavaScript Array Length

• With Code Example
• August 10, 2023

The JavaScript array is a versatile and fundamental data structure that lies at the heart of modern web development. While many developers are well-acquainted with the array’s power in storing multiple values, there’s a hidden gem within the realm of arrays that deserves its spotlight—the length property. In this blog post, we’re embarking on a journey to uncover the magic of the length property in JavaScript arrays. Buckle up, and let’s dive in!

1: The Basics of Array Length

Understanding the foundational concept of the length property is essential. At its core, this property provides the count of elements contained within an array. By directly accessing the length property, you gain valuable insights into the size of your array in real-time. Let’s illustrate this with a simple example:

2: Dynamic Array Length Manipulation

The beauty of the length property lies in its dynamic nature. Not only can you retrieve the array’s size, but you can also manipulate it to add or remove elements dynamically. This flexibility is a game-changer when working with evolving data. Observe how easily we can add and remove items:

3: Array Length and Sparse Arrays

While arrays usually contain consecutive indices, JavaScript arrays can be “sparse.” In other words, they may have gaps in their indices. The length property takes this into account and accurately reflects the highest index present, even if there are gaps. Consider this intriguing example:

4: Performance Considerations

While the length property is undoubtedly powerful, it’s wise to consider its impact on performance, especially when dealing with large arrays. When truncating an array using the length property, keep in mind that it removes elements from the end. Therefore, it’s efficient for removing elements in LIFO (Last-In-First-Out) fashion. However, for more complex operations, alternative methods might offer better performance.

5: Leveraging Array Length for Iteration

The length property can be a valuable tool for iterating through arrays, enabling concise and efficient loops. By using the length property to define the loop’s boundary, you ensure that every element is considered. Let’s witness this in action:

Conclusion: The length property is more than just a simple numeric value; it’s a window into the dynamic world of JavaScript arrays. Its ability to provide size information, manipulate arrays, and optimize iteration makes it an indispensable asset in any developer’s toolkit. Armed with the insights from this exploration, you’re ready to harness the magic of the length property and wield arrays with newfound confidence. Happy coding!

• Javascript arrays

Related Posts

Exploring the usecontext hook in react.

The useContext hook in React allows you to access the context of a parent component within a child component, without the need for prop drilling.

Understanding State and Lifecycle in React

In React, component state is a mechanism that allows components to manage and maintain their own internal data that can change over time.

Top 7 UI Libraries for React.js

Below are the top 7 UI Libraries/Frameworks that work with React.js which can be used to create your web application’s User Interfaces.

Javascript Web Api

Web browsers provide built-in methods and objects known as JavaScript web APIs (Application Programming Interfaces). These objects and methods interface with different parts of the browser’s functionality and web page manipulation by JavaScript.

Mastering API Calls in React JS with Examples

React JS has redefined the landscape of front-end development with its component-based architecture and reactive nature. To build feature-rich and dynamic web applications, integrating external data sources through API calls is essential.

Understanding Logical Operators in JavaScript

When it comes to building robust and dynamic web applications, mastering the art of conditional logic is essential. JavaScript, as one of the primary languages of web development, offers a suite of logical operators that enable developers to create sophisticated decision-making processes.

• Ngx Charts ( 3 )
• React Hooks ( 5 )
• React Js Course ( 12 )
• Top in React ( 3 )
• Javascript 40
• Web Development 7
• Programming 6
• React Hooks 5
• Data Visualization 3
• Ngx Chart 2
• Software Engineering 2
• Array Manipulation 1
• Asynchronous 1
• Authentication 1
• Bar Chart 1
• Beginner Friendly 1
• Best Practices 1
• Cross Platform 1
• Debugging 1
• Development Considerations 1
• Essential 1
• For Each Loop 1
• Frameworks 1
• Front End 1
• Frontend Development 1
• Javascript Arrays 1
• Javascript Software Architecture 1
• Mobile Development 1
• Ngx Charts 1
• Passport.js 1
• Practical Examples 1
• React Native 1
• Reduce Method 1
• User Interfaces 1

• Skip to main content
• Select language
• Skip to search
• Array.length

Shortening an array

The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

Description

The value of the length property is an integer with a positive sign and a value less than 2 to the 32nd power (2 32 ).

You can set the length property to truncate an array at any time. When you extend an array by changing its length property, the number of actual elements does not increase; for example, if you set length to 3 when it is currently 2, the array still contains only 2 elements. Thus, the length property does not necessarily indicate the number of defined values in the array. See also Relationship between length and numerical properties .

• Writable : If this attribute set to false , the value of the property cannot be changed.
• Configurable : If this attribute set to false , any attempts to delete the property or change its attributes ( Writable , Configurable , or Enumerable ) will fail.
• Enumerable : If this attribute set to true , the property will be iterated over during for or for..in loops.

Iterating over an array

In the following example, the array numbers is iterated through by looking at the length property. The value in each element is then doubled.

The following example shortens the array numbers to a length of 3 if the current length is greater than 3.

Specifications

Browser compatibility, document tags and contributors.

• Standard built-in objects
• Array.prototype
• Array.prototype[@@unscopables]
• Array.from()
• Array.isArray()
• Array.observe()
• Array.prototype.concat()
• Array.prototype.copyWithin()
• Array.prototype.entries()
• Array.prototype.every()
• Array.prototype.fill()
• Array.prototype.filter()
• Array.prototype.find()
• Array.prototype.findIndex()
• Array.prototype.forEach()
• Array.prototype.includes()
• Array.prototype.indexOf()
• Array.prototype.join()
• Array.prototype.keys()
• Array.prototype.lastIndexOf()
• Array.prototype.map()
• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.reduce()
• Array.prototype.reduceRight()
• Array.prototype.reverse()
• Array.prototype.shift()
• Array.prototype.slice()
• Array.prototype.some()
• Array.prototype.sort()
• Array.prototype.splice()
• Array.prototype.toLocaleString()
• Array.prototype.toSource()
• Array.prototype.toString()
• Array.prototype.unshift()
• Array.prototype.values()
• Array.prototype[@@iterator]()
• Array.unobserve()
• get Array[@@species]
• Inheritance:
• Function.arguments
• Function.arity
• Function.caller
• Function.displayName
• Function.length
• Function.name
• Function.prototype
• Function.prototype.apply()
• Function.prototype.bind()
• Function.prototype.call()
• Function.prototype.isGenerator()
• Function.prototype.toSource()
• Function.prototype.toString()
• Object.prototype.__count__
• Object.prototype.__noSuchMethod__
• Object.prototype.__parent__
• Object.prototype.__proto__
• Object.prototype.constructor
• Object.prototype.__defineGetter__()
• Object.prototype.__defineSetter__()
• Object.prototype.__lookupGetter__()
• Object.prototype.__lookupSetter__()
• Object.prototype.hasOwnProperty()
• Object.prototype.isPrototypeOf()
• Object.prototype.propertyIsEnumerable()
• Object.prototype.toLocaleString()
• Object.prototype.toSource()
• Object.prototype.toString()
• Object.prototype.unwatch()
• Object.prototype.valueOf()
• Object.prototype.watch()
• Object.setPrototypeOf()

Popular Tutorials

Popular examples, reference materials, learn python interactively, javascript array methods.

• JavaScript concat()
• JavaScript constructor()
• JavaScript copyWithin()
• JavaScript entries()
• JavaScript every()
• JavaScript fill()
• JavaScript filter()
• JavaScript find()
• JavaScript findIndex()
• JavaScript flat()
• JavaScript flatMap()
• JavaScript forEach()
• JavaScript from()
• JavaScript includes()
• JavaScript indexOf()
• JavaScript isArray()
• JavaScript join()
• JavaScript keys()
• JavaScript lastIndexOf()
• JavaScript length()
• JavaScript map()
• JavaScript of()
• JavaScript pop()
• JavaScript push()
• JavaScript reduce()
• JavaScript reduceRight()
• JavaScript reverse()
• JavaScript shift()
• JavaScript slice()
• JavaScript some()
• JavaScript sort()
• JavaScript splice()
• JavaScript toLocaleString()
• JavaScript toString()
• JavaScript unshift()
• JavaScript values()

JavaScript Tutorials

JavaScript String length

JavaScript Array unshift()

JavaScript Array push()

• Javascript Function.length

JavaScript Array splice()

• JavaScript Array pop()

JavaScript Array length

The length property returns or sets the number of elements in an array .

length Syntax

The syntax to access the length property is:

Here, arr is an array.

Example 1: Finding Number of Elements in an Array

Here, we can see that length property returns the number of items in each array. It returns the integer just greater than the highest index in an Array .

Example 2: Using Array length in for loop

You can also reassign the length property of an Array using the assignment operator = .

Syntax to assign the Array length:

This can be used to truncate or extend a given array.

Example 3: Changing length property of Array

Here, we first truncated the length of Array as 3 (assigned value) is less than 4 (original Array length).

If the assigned value is more than the original Array length, empty items are appended to the end of the Array. We can see this happen in the second example.

Sorry about that.

Related Functions

JavaScript Library

• Sign up Free

Code has been added to clipboard!

array.length

Javascript array length: main tips.

• You can use the JavaScript length property to return the array length.
• The length property sets the length of arrays as well.

Returning and Setting Array Length

The array.length property returns the length of array in JavaScript.

Tip: this property for getting array length in JavaScript can count not defined values.

The JavaScript length property can change the number of elements arrays have.

However, if you simply indicate that the array length shifts from 3 to 4, the property creates an extra non-iterable empty spot .

Follow this example to use JavaScript to set length of arrays:

JavaScript CheatSheets of Functions

Javascript and html, javascript syntax, best-rated moocs to learn programming:.

Related Posts

A javascript cheat sheet: a reference guide of functions.

A JavaScript cheat sheet consisting of the most common JavaScript functions. Learn about each function from its definition in this JavaScript cheat sheet.

Full guide on JavaScript array push. Discover how to use JavaScript add to array and push JavaScript methods from code examples of JavaScript array push.

Using JavaScript Filter to Match Values and Create New Arrays

Learn how to use JavaScript filter() to apply a test function on arrays. JavaScript filter() applies the test function to all values to create a new array.

Related Code Examples

EXCLUSIVE OFFER: GET 25% OFF

JavaScript Array Length: How to Use It Effectively

If you are a web developer, you probably use JavaScript arrays a lot. But do you know how to get the JavaScript array length ? You might think it’s as simple as using the length property, but there’s more to it than that. The length property allows you to determine the number of elements in an array.

In this blog post, we’ll explore:

• JavaScript array length property
• Handling array length check

Dealing with array length 0

• How to handle an array whose length is undefined

The time complexity of array length calculation

• How to handle an array with less than 0

Let’s see each topic in detail.

What is a JavaScript array?

Before going into array length , let’s see what a JavaScript array is.

A single variable in JavaScript can hold a collection of elements, which is known as array . It can hold any data type and is defined using square brackets. The array is one of the non-primitive data types in JavaScript .

In this example, we’ve defined an array  jsArray that holds five elements of different data types.

You can access individual array elements using indexes, like jsArray[0] for the first element, jsArray[1] for the second, and so on. The array length count in JavaScript starts with 1 . However, the JavaScript index starts with 0 .

You can use the  JavaScript indexOf() method to search an array.

Understanding JavaScript array length or size

Using the array length property ( not function ), we can set or get the number of elements in the array. You can access the length property of an array using dot (.) notation, like this:

In the above code example, the length property returns the length of the array. Alternatively, you can calculate the length by the array’s highest index plus 1.

Reduce the array length

If you assign a new value to the length property, it will affect the number of elements in the array. Let’s see an example of how to set array length:

In the example above, we’ve tried to set the length of the array to 3 . Setting the length property to a value smaller than the current length truncates the array to that size. In this example, the actual length is 5 , but we are setting it to 3 . So the last two elements of the array have been removed. The value of the first three elements remains the same.

Increase the array length

When the length is set to a bigger value than the current length, the array is extended by adding empty slots, not actual undefined values

In the above example, the actual array length is 5 . We are increasing to 10 , so the additional slots will be filled with empty ones. Finally, the result is printed to the console using the JavaScript string concatenation .

How to check array length in JavaScript?

Checking the length of an array is an important operation when working with arrays. Using the length property of the array is one of the most common approaches.

Alternate approach to get array length using forEach() loop

The length property will throw exceptions if it is accessed on a type other than a string or an array. So, it is usually preferable to check the data type if you are getting input from another method.

A safe way to check the length of an array is to use the Array.isArray() method. It returns true if the passed-in value is an array; otherwise, it returns false .

If you don’t want to use an array length property to check the length, you can use forEach() or a for loop to iterate through the array elements to find the length of an array. Use this approach only if you can’t use the built-in length property.

In the following example, the forEach() loop is used to find the array length:

Make length property read-only

By default, the array length property in JavaScript is not read-only . Allowing to change the length property leads to unexpected results sometimes. So, how do you prevent it? Simple. You can set that property’s writable attribute to false , as shown in the following example:

How to use length property in real-time use case

In real-time use cases, most of the time,  length property is used before doing the actual operation. For example, you have an input email address and you want to extract the domain name from it.

The @ delimiter can be used in combination with the JavaScript String split() method. The output will be returned as an array. You must verify that the array length is 2 before extracting the domain. If the given email address doesn’t have an @ symbol and we access the array element without validating its length, it will return undefined .

You can split an array of elements into chunks , in that case, you can use the JavaScript array method split() method.

An array with the length 0 is an empty array. There are several reasons why an array might be empty, such as when it is initialized or when all of its elements have been removed. You can check if an array object is empty by comparing its length property to 0 .

Setting the length property to 0 is one of the ways to clear an array in JavaScript .

Empty arrays can be useful in certain situations, such as when you want to create an array that will be populated later.

In the example above, we’ve created an array with a length of 10 , but we haven’t initialized it with any values yet.

Array length undefined

When a JavaScript array length is undefined , it means that the array is empty or uninitialized . To set the length of an array, you can assign a new value to its length property:

In the example above, we’ve set the length of the array to 5 . Since the array only had three elements , the last two elements were undefined .

The time complexity of accessing an array’s length property is O(1) , which means that it takes constant time regardless of the size of the array. This is because the length property is a built-in property of the array object and is always stored as a single value.

To confirm, I did performance benchmark testing using jsPerf . The results are interesting!

I made two number arrays, one with 1000 elements and the other with 10000 . I was able to perform 165,658 array length calculation operations per second on the 10000-element array.

However, I was only able to perform 159,668 array length calculations per second on the 1000-element array, which is 4% slower than huge array length calculations.

Array length is less than 0

An array’s length property can never be less than 0 . If you try to set the length property of an array to a negative value -1 , it will throw an "Invalid array length" error:

In the example above, we tried to set the length of the array to -1 , but it displayed an error as expected.

Array length is 1 but empty

An array with length 1 but no elements is a special case in JavaScript. In this case, the array is considered to be "sparse" , which means that it has a length of 1 but no elements.

The length property of an array typically returns the exact number of elements in the array, but with sparse arrays , the value of the length is higher than the number of items in the length property.

You can create a sparse array like this:

The length property is an important feature of JavaScript arrays that allows us to determine the number of elements in an array. In this blog post, we’ve covered everything you need to know about the JavaScript array length property, from how to access it using the length property.

If you can’t use the built-in length property, using a loop , you can calculate the array length. Now you know how to handle special cases like empty arrays , undefined lengths , and sparse arrays .

Understanding the array length property is essential for working with arrays in JavaScript and will help you write more efficient and effective code.

Related Posts

JavaScript Dictionary: How to Use It Like a Pro

Top 5 JavaScript startsWith() Alternative Methods

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 array methods, basic array methods, javascript array length.

The length property returns the length (size) of an array:

JavaScript Array toString()

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

JavaScript Array at()

ES2022 intoduced the array method at() :

Get the third element of fruits using at():

Get the third element of fruits using []:

The at() method returns an indexed element from an array.

The at() method returns the same as [] .

The at() method is supported in all modern browsers since March 2022:

Many languages allows negative bracket indexing like [-1] to access elements from the end of an object / array / string.

This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.

The at() method was introduced in ES2022 to solve this problem.

JavaScript Array join()

The join() method also joins all array elements into a string.

It behaves just like toString() , but in addition you can specify the separator:

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

Advertisement

JavaScript Array pop()

The pop() method removes the last element from an array:

The pop() method returns the value that was "popped out":

JavaScript Array push()

The push() method adds a new element to an array (at the end):

The push() method returns the new array length:

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.

JavaScript Array shift()

The shift() method removes the first array element and "shifts" all other elements to a lower index.

The shift() method returns the value that was "shifted out":

JavaScript Array unshift()

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

The unshift() method returns the new array length:

Changing Elements

Array elements are accessed using their index number :

Array indexes start with 0:

[0] is the first array element [1] is the second [2] is the third ...

The length property provides an easy way to append a new element to an array:

JavaScript Array delete()

Using delete() leaves undefined holes in the array.

Use pop() or shift() instead.

Merging Arrays (Concatenating)

In programming languages, concatenation means joining strings end-to-end.

Concatenation "snow" and "ball" gives "snowball".

Concatenating arrays means joining arrays end-to-end.

JavaScript Array concat()

The concat() method creates a new array by merging (concatenating) existing arrays:

Example (Merging Two Arrays)

The concat() method does not change the existing arrays. It always returns a new array.

The concat() method can take any number of array arguments.

Example (Merging Three Arrays)

The concat() method can also take strings as arguments:

Example (Merging an Array with Values)

Array copywithin().

The copyWithin() method copies array elements to another position in an array:

Copy to index 2, all elements from index 0:

Copy to index 2, the elements from index 0 to 2:

The copyWithin() method overwrites the existing values.

The copyWithin() method does not add items to the array.

The copyWithin() method does not change the length of the array.

Flattening an Array

Flattening an array is the process of reducing the dimensionality of an array.

Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array.

JavaScript Array flat()

ES2019 Introduced the Array flat() method.

The flat() method creates a new array with sub-array elements concatenated to a specified depth.

Browser Support

JavaScript Array flat() is supported in all modern browsers since January 2020:

Splicing and Slicing Arrays

The splice() method adds new items to an array.

The slice() method slices out a piece of an array.

JavaScript Array splice()

The splice() method can be used to add new items to an array:

The first parameter (2) defines the position where new elements should be added (spliced in).

The second parameter (0) defines how many elements should be removed .

The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added .

The splice() method returns an array with the deleted items:

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:

The first parameter (0) defines the position where new elements should be added (spliced in).

The second parameter (1) defines how many elements should be removed .

The rest of the parameters are omitted. No new elements will be added.

JavaScript Array toSpliced()

ES2023 added the Array toSpliced() method as a safe way to splice an array without altering the original array.

The difference between the new toSpliced() method and the old splice() method is that the new method creates a new array, keeping the original array unchanged, while the old method altered the original array.

JavaScript Array slice()

The slice() method slices out a piece of an array into a new array:

Slice out a part of an array starting from array element 1 ("Orange"):

The slice() method creates a new array.

The slice() method does not remove any elements from the source array.

Slice out a part of an array starting from array element 3 ("Apple"):

The slice() method can take two arguments like slice(1, 3) .

The method then selects elements from the start argument, and up to (but not including) the end argument.

If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array.

Automatic toString()

JavaScript automatically converts an array to a comma separated string when a primitive value is expected.

This is always the case when you try to output an array.

These two examples will produce the same result:

All JavaScript objects have a toString() method.

Searching Arrays

Searching arrays are covered in the next chapter of this tutorial.

Sorting Arrays

Sorting arrays covers the methods used to sort arraysg.

Iterating Arrays

Iterating arrays covers methods that operate on all array elements.

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

Use the correct Array method to remove the last item of the fruits array.

Start the Exercise

COLOR PICKER

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.

Getting to Know the JavaScript Array: A Developer's Overview

JavaScript arrays are essential building blocks for any JS developer. Their power and flexibility can supercharge your code, making data handling easier and more effective.

💡 KEY INSIGHTS

• JavaScript arrays are dynamic and can contain elements of different data types, unlike statically-typed languages.
• Array methods like `map()`, `filter()`, and `reduce()` enable functional programming approaches, encouraging immutability and side-effect free functions.
• JavaScript arrays are objects under the hood, with indices as keys, offering greater flexibility but differing performance characteristics compared to arrays in lower-level languages.
• Using spread syntax (`...`) simplifies array manipulation for tasks like cloning, merging, and extending arrays in a more readable way.

Arrays are an integral part of JavaScript, serving as a flexible tool to store, manipulate, and access data.

They can hold anything from simple numbers and strings to complex objects and functions. Let's explore how this key feature enhances our coding efficiency and broadens the scope of what we can achieve with JavaScript.

Understanding JavaScript Array

Creating javascript arrays, accessing array elements, manipulating javascript arrays, iterating over array elements, javascript array methods, use cases of javascript arrays, troubleshooting common javascript array issues, frequently asked questions.

A JavaScript array is a high-level, list-like object used for storing multiple values in a single variable. Arrays are zero-indexed: the first element is referenced with an index of 0.

Consider the following code example:

Array Length

A notable property of arrays in JavaScript is their length property , which returns the number of elements in an array. It's important to note that because arrays are zero-indexed, the last element of an array is at index length - 1 .

For instance:

Array Data Types

In JavaScript, arrays can store multiple data types , including numbers, strings, objects, and even other arrays. This feature provides us with flexibility when handling data structures.

Here's an example:

In essence, understanding the basic properties and characteristics of JavaScript arrays is a stepping stone towards efficient data manipulation in JavaScript programming.

There are several methods to create a JavaScript array . One of the most straightforward methods is by using square brackets [] .

The Array Constructor

Another way to create an array in JavaScript is by using the Array constructor , new Array() . You can pass elements to the constructor to initialize the array with these elements.

The Array.of Method

JavaScript also provides the Array.of method, used to create a new Array instance from a variable number of arguments. It comes in handy when the number of elements is not known in advance.

Here's how to use it:

To sum up, understanding various methods to create arrays allows developers to choose the most efficient way depending on their specific requirements.

In JavaScript, array elements are accessed using their index, which refers to their position in the array. Remember that arrays are zero-indexed, so the first element is at index 0.

Here's a basic example:

Accessing Out-of-Bounds Elements

Trying to access an element at an index outside the array bounds doesn't throw an error, but instead returns undefined .

Understanding how to correctly access elements is a fundamental skill when working with arrays, and enables you to interact and manipulate data efficiently.

Once a JavaScript array is created, you can manipulate it in several ways. This includes adding, removing, and changing elements.

Adding Elements

Elements can be added to an array using the push method (at the end) or the unshift method (at the beginning).

Removing Elements

You can remove elements using the pop method (from the end) or the shift method (from the beginning).

Let's see this in action:

Changing Elements

Existing array elements can be changed by accessing them directly with their index.

Here's how:

In conclusion, array manipulation is an essential aspect of JavaScript programming that enables dynamic modification of data structures.

Iterating over array elements is a common operation in JavaScript. The for loop is one of the simplest ways to iterate through each element of an array.

Talk is cheap. Show me the code.

Linus Torvalds

Source: goodreads

The forEach Method

The forEach method is another handy way to iterate over an array. It executes a provided function once for each array element.

Consider this example:

The for...of Loop

JavaScript also provides the for...of loop, which creates a loop iterating over iterable objects, including arrays.

In summary, efficient iteration over array elements is crucial to perform operations on each element, making your JavaScript programming more versatile and robust.

JavaScript offers a multitude of array methods that provide powerful and flexible ways to manipulate, transform, and analyze array data.

The map Method

The map method creates a new array with the results of calling a provided function on every element in the array.

The filter Method

The filter method creates a new array with all elements that pass a test provided by a function.

The reduce Method

The reduce method executes a reducer function on each element of the array, resulting in a single output value.

Check this out:

In essence, these methods and many others offer developers efficient ways to handle array data, providing versatility when dealing with different tasks.

JavaScript arrays are employed in numerous scenarios due to their flexible nature.

Data Storage

Arrays are crucial when you need to store multiple items in a single variable. They allow you to keep track of related data, such as a list of user details.

Data Manipulation

Arrays enable data manipulation through various methods, like push() , pop() , shift() , and unshift() . This means that data can be dynamically added, removed, or altered within an array.

Information Sorting

With the sort() method, arrays provide a simple way to order data. This is valuable in scenarios where data must be displayed in a particular order.

Data Analysis

JavaScript arrays combined with loop statements are potent tools for data analysis. They can process and analyze a substantial amount of data efficiently.

Each of these use cases highlights the versatility and practicality of JavaScript arrays, making them indispensable in the world of programming.

Working with JavaScript arrays , developers often encounter common issues that can be a source of bugs. Understanding these issues can help in quick problem resolution.

Out-of-Bounds Access

One typical problem is out-of-bounds access , which happens when you try to access an array element that does not exist.

Array Reference Issues

JavaScript arrays are reference types , which means if you assign one array to another, they will both reference the same underlying data. Modifying one will affect the other.

Consider this:

Using delete on Array Elements

The delete operator removes a property from an object, and while you can use it to remove an array element, it's not recommended as it leaves a hole in the array.

To avoid such issues, use array methods like splice or filter to remove elements. Understanding these common issues can help developers debug problems more efficiently when working with JavaScript arrays.

What is the Length of an Array?

The length property of a JavaScript array returns the number of elements in the array.

How to Check if an Object is an Array?

To check if an object is an array, use the Array.isArray() method.

How to Join Array Elements into a String?

The join() method combines all the elements of an array into a string.

With all these array techniques and methods at your disposal, harnessing the power of JavaScript arrays is within your grasp. Remember, practice makes perfect. So, go forth and code!

Let’s test your knowledge!

JavaScript Arrays Quiz

What will be the output of the following code?

console.log(["apple", "banana", "mango"].length);

Continue Learning With These Javasript Guides

• JavaScript Fetch: From Basics To Advanced Concepts
• The Essentials Of JavaScript Validator For Web Developers
• What Every Developer Should Know About JavaScript Boolean
• How To Effectively Use JavaScript Replace
• JavaScript Set: A Unique Collection Mechanism for Modern Coding

Subscribe to our newsletter

Subscribe to be notified of new content on marketsplash..