JavaScript Array Mastery: Tips, Tricks & Best Practices

Take your JavaScript skills to the next level in this course! You'll master JavaScript arrays and learn some very useful tips and tricks.

If you already understand the basics of JavaScript, it's time to take your skills to the next level. In this course, you'll explore the ins and outs of programming with arrays in JavaScript. Arrays are incredibly useful because they allow us to store and manipulate a collection of values within a single object. Join Jeremy McPeak as he teaches you how to iterate, process, sort, search, copy, and manipulate arrays.

Here's what we'll cover in this course:

1 Introduction

1.1 Introduction 00:00

2 Array Basics

2.1 Creating Arrays 01:04
You probably already know how to create arrays, add items to, and remove items from them. But let's go over that just in case.

2.2 Using the for and while Loops 07:56
The basic for and while loops have been what we typically use to process arrays. We'll briefly go over them.

2.3 Iterating With forEach() and for...of 20:10
Like most other languages, JavaScript is updated and improved. We'll look at some of the more recent additions to the language to iterate and process arrays.

2.4 Sorting Arrays 26:04
Sometimes we need to sort arrays, and JavaScript gives us a rather robust mechansim for doing that.

3 Searching Arrays

3.1 Finding an Element's Index 31:50
JavaScript arrays have several methods we can use to find the index of a given element. We'll look at those options in this lesson.

3.2 Finding Elements 38:11
The find() method lets us find elements within an array based upon certain criteria. You'll learn how to use the find() method in this lessson.

3.3 Testing if Elements Exist 42:00

4 Converting Arrays

4.1 Merging Arrays 45:46
Sometimes you need to combine multiple arrays into a single array. You'll learn the two ways to do that in this lesson.

4.2 Copying Arrays 49:22
JavaScript has the ability to copy arrays with the slice() method. Let's take a look.

4.3 Converting to String 52:24
You can convert an array into a string using the join() method. It's useful, especially if you're generating HTML.

4.4 Transforming Arrays 54:34
The map() method lets us transform the data within an array into another format. It's awesome!

4.5 Filtering Arrays 58:41
You can use the filter() method to created a filtered array. We'll look at how to use it, as well as including it with map() and join().

5 Conclusion

5.1 Conclusion 1:01:45
By now, you've had a thorough overview of how to iterate, sort, search, copy, and manipulate arrays. They play a key part in data manipulation and processing.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[envatotuts]

JavaScript beginner? Watch the beginner's course, Learn Modern JavaScript Fundamentals in 7 Hours!, first:

[_TJProductions]

100% the most informative and super easy to understand video on Arrays. Thanks!

[mushroommagic]

Thank you so much! I finally understand arrays and their scope.

[jimbob.]

Thanks so much for this video, really helped me understand methods better!

[TheBlueDude]

Amazing video, hope more people see this. Thank you.

[tav]

great video thanks for the easy to follow style

[HRUstudent]

Ur VS code is very clean can u mention me how i clean my vs code like u

[hakimmazlan]

why got a bug in shopping list if do increment in while loop body?

[DesiVillagerEurope]

@ 25:58 how is it possible index . Index starts from zéro. It is shown 1 . Is it position

[afriend]

Does anyone know how to style array indexes individually? I've used the following but I'm missing how to style individually. Thanks! =).

const arrey6 = [" blue", " red", " green", " yellow"];
-- styles whole array.

And:

const arrey6 = [" blue", " red", " green", " yellow"];

-- styles one index.

[jorgemora]

how you run the code to show in the browsers console without any html file?

[axtion-]

@ beginning, What year was the system OS made?😂😂😂

[world_of_facts]

Why I am getting Li as text in document