JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Arrays of data is one of the first things we learn about as programmers. Collections of information are a fundamental building block of most programming languages.

JavaScript is no exception. In this series, we will explore JavaScript (es6) array methods. We will slice, join, map, and reduce our way to better understanding of the powerful array methods that modern JavaScript delivers.

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

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

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

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

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`.

Sort an Array Alphabetically or Numerically 

Array filter creates a new array with all elements that pass the test implemented by the provided function. In this lesson we discuss how only a truthy or falsey value is required as the return value to the function, which in turns allows us to be creative in how we perform the filter. We end the lesson by looking at an example showing how chaining multiple array methods together can lead to very nice, declarative code.

Filter an Array with Truthy Values

`some` returns a `boolean` value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple `yes` or `no` answer. In this lesson we look at 2 practical use-cases for `some`. The first shows how it can be used with a ternary operator to switch a `class` on an element & the second shows how `some` can be used in an `if` conditional.

Use Some as a Ternary Operator or Conditional

Array push is used to add elements to the end of an Array. In this lesson we'll see how the `push` method accepts multiple arguments, can be used to merge two arrays, and how it can be used to represent user input.

Add Elements onto an Array with Push

Map is one of the most useful array methods. It creates a new array with the exact same number of items as the source and can be used to modify values, change their type, add fields to objects, simplify objects etc. In this lesson we focus on practical use-cases for map & see it in conjunction with other array methods.

Modify Values in an Array with Map

The `every` method returns true or false based on whether or not every item in the array passes the condition you provide in a callback function. In this lesson we look at some practical examples for simple validation, inferring state from data and for re-using the logic in our callbacks with array filters. 

Validate Data with the Every() Method

Array reduce is used to accumulate a new value by applying a function that you provide to each item in your source array. Reduce behaves differently based on whether or not you provide an initial value - we cover this in depth in this lesson and provide some practical use cases.

Understand JavaScript Arrays

Shane Osbourne

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use