Mark As Completed Discussion

In this lesson, we will discuss the concept of arrays, with a focus on the following key points,

  1. What are arrays, and how are they implemented?
  2. Working with array operations in JavaScript.

For the Python version of this lesson, please click here.

Arrays are a crucial concept in programming. It is a means to store and manage data in programs. Rather than having separate variables for multiple objects, arrays allow for the storage of a collection of data. They enable programmers to store and manipulate multiple data values during the execution of the program.

Arrays are a data structure that can store a collection of values. Depending on how they are implemented, these arrays can have items of single or multiple data types. This makes it easier to group similar elements in a program.

A data structure is a specialized format for organizing and storing a collection of data during programming.

The initialization of arrays is different in different programming languages, but the representation of arrays is the same in all of them. The items stored in an array are known as array elements. The position of each element in the array is the index. This index starts from 0 (not 1!) and allows us to find specific elements in the array. The length of an array is the number of elements the array can store or has stored in the array.

Arrays

Understanding this representation is very helpful especially while performing array operations that we will see in the next section. For now, let's see how arrays are implemented in JavaScript.

Arrays in JavaScript

In JavaScript, arrays can store multiple elements. Each element in the array is separated by a comma (,). Elements of different data types can also be stored in a single JavaScript array, but this is a little tricky. Nonetheless, it is possible, and this allows JavaScript arrays to store a string, number, or even another array within a single array!

Now let's consider an example. Suppose we have a list of names to store in the list. The list will be initialized by giving it a name (like variables) and specifying all elements in the list separated by a comma.

JAVASCRIPT
1var name = ["Alice", "Mona", "Bob", "Barbara"]

Are you sure you're getting this? Click the correct answer from the options.

Which of the following would generate an error?

Click the option that best answers the question.

  • lst = []
  • lst = [3]
  • lst = ['lily','rose','sunflower']
  • None of the above

Operations on Arrays

Array operations manipulate the array in a program. Adding, removing, searching, or printing elements in an array are the basic operations that make working with arrays much easier and helpful.

Let's discuss these array operations in detail.

Array Operations in JavaScript

In the previous lesson, we discussed that string operations are defined by string methods. Similar is the case for JavaScript arrays. Their operations are also defined using array methods.

The most basic operation of arrays is to add new elements to arrays. Elements can be added to an array using the .push() method, where the element to be added is enclosed in the parenthesis. The element will always be inserted at the end of the list. An example code is given below.

JAVASCRIPT
1var fruits = ["apple", "orange", "grapes"];
2fruits.push("strawberry");
3
4console.log(fruits); // prints ["apple", "orange", "grapes", "strawberry"]
Array Operations in JavaScript

To remove elements from a list, JavaScript has two methods. .pop() directly removes the last element from the array. .splice() removes the elements in the array by specifying the index of the element to be removed and the count of elements to be removed. For example,

JAVASCRIPT
1var fruits = ["apple", "orange", "grapes", "strawberry"];
2fruits.pop();
3console.log(fruits); // prints ["apple", "orange", "grapes"]
4
5fruits.splice(1, 1); // removes element at index 1, once
6console.log(fruits); // prints ["apple", "grapes"]
Array Operations in JavaScript

For the length of the array, JavaScript does not have a built-in method. Instead, the length of the array is accessed by an array property length.

JAVASCRIPT
1var fruits = ["apple", "orange", "grapes"]
2console.log(fruits.length); // 3

A summary of the list methods discussed for JavaScript is listed in the table below.

MethodUsage
push()Insert a new element at the end of array
pop()Removing the last element from the array
splice()Remove the element and number of elements in an array using the index of element

A comprehensive list of all JavaScript array methods is available here.

Are you sure you're getting this? Fill in the missing part by typing it in.

What will be the output of the following code in JavaScript?

JAVASCRIPT
1var cars = []
2cars.push("Ford")
3cars.push("BMW")
4cars.push("Mustang")
5
6cars.splice(2, 1)

Write the missing line below.

Are you sure you're getting this? Is this statement true or false?

The output of the following code will be 3.

JAVASCRIPT
1var numbers = [3, 2, 5, 7, 3, 6]
2console.log(numbers[3])

Press true if you believe the statement is correct, or false otherwise.

Summary

In this lesson, we discussed arrays and operations that can be performed on arrays. These array operations allow us to modify and access different properties of arrays during the execution of the program. In further lessons, we will see how these list methods are used in conjunction with other programming elements to generate meaningful programs and applications.

One Pager Cheat Sheet

  • We will learn about arrays, their implementation, and array operations in JavaScript in this lesson.
  • Arrays are a data structure containing array elements with a specific index and length that allow for easier organization and storage of a collection of data in programming.
  • Arrays in JavaScript allow multiple elements of different data types, such as strings, numbers, and other arrays, to be stored in a single array, initialized by giving it a name and specifying all elements separated by a comma.
  • Arrays in JavaScript can store different data types, including strings, numbers, and other arrays, as long as the syntax is correct.
  • Array operations such as adding, removing, searching, and printing can help make programming with arrays much easier.
  • We can add and remove elements from a JavaScript array using the .push(), .pop(), and .splice() methods, and access the array length using the length property.
  • The code will add 3 elements to an empty array cars using .push() and then remove one element from the 3rd index with .splice(), leaving the resultant array as ["Ford", "BMW"].
  • The output of the code will be 7, the third element in the numbers array accessed by its index.
  • We learned to manipulate and access array properties with various array operations that can be used in programming tasks.