Unit 2: JavaScript Data Structures
Arrays, Maps, and Sets are important data structures in JavaScript. In this unit, you will learn how to create and manipulate Arrays. You will also iterate over the arrays to search for specific elements. Additionally, we will introduce Maps and Sets and compare and contrast them with Arrays.
Completing this unit should take you approximately 2 hours.
Upon successful completion of this unit, you will be able to:
- explain how arrays are created, read, and written;
- identify array methods for manipulating arrays;
- apply appropriate decision logic to add/delete array elements;
- model best coding practices for searching and iterating arrays;
- identify maps and sets; and
- compare maps and sets and construct objects.
2.1: Array Introduction
An Array is an object that stores multiple values as an ordered data collection. We can apply methods to arrays and treat them much in the same way we treat other types of values. What makes arrays unique because their contained items are indexed (given a numerically ordered place value), allowing for individual, selective, or collective access and modification. We will explore this feature's usefulness, efficiency, and power.
An array is a way to store a collection of multiple items under a single variable name. This section introduces how to create, delete and access array elements. Think about the following as you read the article:
- How are array elements accessed?
- What methods are used to access the elements of an array?
- How would you convert a string into an array?
In JavaScript, arrays can be created in various ways. This section provides examples of using Array literal notation and constructors with single and multiple parameters. Another way to create an array is by using the
split()method to convert a string into an ordered list. This method can be particularly useful when taking input from users as strings. This section also provides some examples of common array operations in JavaScript.When creating an array in JavaScript, you want to be able to create it easily and then use it to help make your coding less complicated. This video shows how to create and do basic array manipulations with your created array. It is a look ahead to some of the other methods and concepts we will cover in this section.
Now you will practice creating a Guest List using JavaScript arrays. We recommend following along with the video on your editor. This exercise does not count toward your grade. It is just for practice!
2.2: Using Array Methods
Now that you know how to create an Array, you will learn about its structure and built-in methods that can help make your code more efficient. It would be best to watch several videos and practice with JavaScript code.
One method to iterate through an array in JavaScript is
forEach(). This method goes through each element of the array one at a time and can be useful when applying operations to specific elements within the array.In JavaScript, the
indexOf()method returns the first index at which a specified element can be found in an array. If it does not exist in the array, -1 is returned instead. Similarly,lastIndexOf()returns the last index where an element appears or -1 if it doesn't exist within the array. These methods are incredibly useful when searching for elements and are commonly used in various coding instances.The
sort()method for arrays in JavaScript will sort the elements of an array in place and return the reference to the sorted array. The sort defaults to ascending. Sorting arrays makes finding the minimum and maximum of data sets easy. Thereverse()method can change the ascending sort into a descending one. This video shows how to sort an array of numbers and characters.When an array is "destructured," the contents are unpacked. Think of your closet and shoes; you only want red ones. You would need to search your collection of those shoes, so you would need to "unpack" them. You can think of destructuring arrays in that same type of idea. In this video, you will learn how to do this in JavaScript.
Adding or deleting items from arrays in JavaScript is a common procedure, so we focus on the
push()andpop()methods. Thepop()method removes the LAST element of the array and returns it. It does change the size of the array. Thepush()method adds one or more elements to the end of the array and will return the new length of the array. Watch this video and follow along with your favorite editor.You may develop a useful algorithm as you work with arrays in JavaScript. However, before writing your algorithm, it's important to know about the many built-in methods already available in the language. This video guides you through some of the most commonly used methods and provides examples for each one.
In JavaScript, arrays do not need to be declared with the maximum amount of data that will be entered. Instead, you can declare an array and add data as needed. For instance, this example creates an array for grades and allows users to enter values. It also demonstrates how while and for loops can be used to access arrays and manipulate data. We recommend following along with the video on your editor. This exercise does not count toward your grade. It is just for practice!
2.3: Introduction to Maps and Sets
Maps and Sets are ways to store your data in an ordered collection. They can store multiple values, but the difference is that one uses a key and only stores unique values. The articles in the section explain the difference between the two and examine examples of using both.
Watch this video to learn about Sets. Set objects in JavaScript are a collection of values, much like an array. The difference in using a Set is that sets only store unique values. This property can help solve certain problems without you having to write your code to make an array not have a duplicate. Basic Set operations are important to understand (
add,delete,get,find).JavaScript objects hold structured data
{ key: "value" }. A limitation of this type of storage is that the keys have to be strings or symbols. Maps help with this limitation by allowing a key to be any type. Maps are iterable structures with certain commands that help use them efficiently. Try the examples in the video and please remember to open your Developer console.In these examples, you will learn how to create and iterate over a Set and some basic Set operations. You should put these examples into your editor, run them, change some things, and try rerunning them.
Map objects are collections of key-value pairs where each key in the Map can only occur once and is unique within the Map's collection. A Map object is iterated by key-value pairs, meaning that a for...of loop returns a 2-member array of [
key,value] for each iteration. Iteration occurs in insertion order, which corresponds to the order in which each key-value pair was first inserted into the map using theset()method (that is, if there was not already a key with the same value present whenset()was called). Try the examples at the end of the section. These exercises do not count toward your grade. It is just for practice!
Unit 2 Assessment
- Receive a grade
Take this assessment to see how well you understood this unit.
- This assessment does not count towards your grade. It is just for practice!
- You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
- You can take this assessment as many times as you want, whenever you want.