Arrays of data are a foundational aspect of programming computers with JavaScript (and many other languages!), and understanding how to use them effectively is a core skill. 


Most JavaScript developers are familiar with the `for` loop. One of the most common uses of the `for` loop is to iterate through the items in an array. In this lesson, we will learn how to replace the `for` loop with the Array's `forEach` method - and shorten your code in the process.

The Array forEach method

Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how `slice` fits into a workflow that contains other array methods such as `map` & `reduce`.

Create a Shallow Copy of an Array with Slice

indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a *whitelist* array.

Check if a Value is in an Array with indexOf

The join() method joins all elements of an array into a string. In this lesson we first look at why `join` is often a better option than regular string concatenation. Then we move onto an example which shows a simple way of storing lines of text in an array and outputting them with a new line separator and we finish by looking at ways to chain multiple array methods together.

Combine Values of an Array into a String with Join

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's `map` method to easily perform this operation with less code than a loop would require.

The Array map method

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's `filter` method to easily perform this operation with less code than a loop would require.

The Array filter method

Both `map` and `filter` do not modify the array. Instead they return a new array of the results. Because both `map` and `filter` return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using `forEach`. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

Chaining the Array map and filter methods

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as `forEach`

Use Concat to Add Values to an Array

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within. 

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function `concatAll` which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

Create an Array concatAll method

Refactoring is a great opportunity to learn and we have an existing Javascript function that is *lengthy, hard to understand, and overcomplicated*. We'll take a look at putting some of **Javascript's built in Array.prototype methods** to use to help us clean this up and learn by example through refactoring.

By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.

In this lesson we touch on just a few of the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) methods:

- [Array.prototype.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- [Array.prototype.some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some).

Refactoring: Array.prototype by example [filter, some, forEach]

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

Reduce an Array into a Single Object

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.

Transform an Array into a Single Value using Reduce

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use [Array.prototype.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) to:

- Sum an array of numbers
- Reduce an array of objects to a sum of a given property
- Group an array of objects by key or a set of given criteria
- Count the number of objects in an array by key or a given set of criteria

Array.prototype.reduce in JavaScript by example

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

Use Reduce to Filter and Map over Large Datasets

In this lesson, we will be looking at two common mistakes programmers make when working with `reduce.` We will see why we always need to pass in an initial value for our accumulator as well as return the accumulator.

Avoid Common Mistakes when Working with Reduce

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

Learn to Flatten and Flatmap Arrays with Reduce

Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an accumulator along with no knowledge about its context. Learn how to reduce an array of numbers into its mathematical mean in a single reduce step by using the optional `index` and `array` reducer arguments.

Use the Optional Reduce Arguments

`Array.from()` lets you convert an "iterable" object (AKA an _array-like_ object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like `Array.filter()` and `Array.forEach()` on them.

Converting an array-like object into an Array with Array.from()

Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only `sort` in action, but also how it can be chained together with other array methods such as `map` and `join`.

...learn javascript arrays in depth

Instructor

Course content (19 lessons)

Instructor