There are plenty of resources on the internet to help you learn JavaScript for free, and one free resource to learn to code JavaScript is Code Shock's YouTube channel. The article includes examples so you can see how arrays work in action, fast, simple, with no fuss. Just code and results!

What is an array?

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name that maintains order, and has methods for performing common array operations. The most used methods are demonstrated.

Declare and Initialize Array

Use the number of elements in the Array() and what you want the elements to be initialized with in the fill() method.

const array = Array(6).fill('')
// output 
(6) [ '*', '*', '*', '*', '*', '*' ]

const array = Array(4).fill(0)
// output int
(4) [ 0, 0, 0, 0 ]

const array = Array(2).fill(null)
// output null
(2) [ null, null ]

const array = Array(3).fill('javascript')
// output string
(3) [ 'javascript', 'javascript', 'javascript' ]

Sort an Array of Strings

To sort alphabetically, ascending or descending.

const flowersArray = ['rose', 'lily', 'tulip', 'poppy', 'sunflower']

flowersArray.sort()
// output ascending
(5) [ 'lily', 'poppy', 'rose', 'sunflower', 'tulip' ]

flowersArray.sort().reverse()
// out descending - reserved alphabetical
(5) [ 'tulip', 'sunflower', 'rose', 'poppy', 'lily' ]

Sort an Array of Numbers

const array = [50,23,1,56,19,2,11,44,9]

array.sort((a,b)=> a-b)
// output
(9) [1,  2,  9, 11, 19, 23, 44, 50, 56]

array.sort((a,b)=> b-a)
// output
(9) [56, 50, 44, 23, 19, 11,  9,  2,  1]

Find sum, min, and max values with Reduce() method in an Array

const array  = [4,7,2,8,5,4,3,2,9]

// sum in array 
array.reduce((a,b) => a+b)
// output 
44

// max in array 
array.reduce((a,b) => a>b?a:b)
// output
9

// min value in array 
array.reduce((a,b) => a<b?a:b)
// output
2

Remove duplicate values with filter() and Set() methods in an Array

const array = [50,23,1,11,23,44,9,1]
// duplicates 23, 1

array.filter((item,idx,arr) => arr.indexOf(item) === idx)
// output using filter()
(6) [ 50, 23, 1, 11, 44, 9 ]

const dupsRemoved = [...new Set(array)]
// output using Set()
(6) [ 50, 23, 1, 11, 44, 9 ]

Use forEach() method to loop an Array

const array  = [50,23,1,11,23,44,9,1]

array.forEach((item, idx) => {
  console.log(`postion ${idx} = ${item}`)
})
// output 
postion 0 = 50
postion 1 = 23
postion 2 = 1
postion 3 = 11
postion 4 = 23
postion 5 = 44
postion 6 = 9
postion 7 = 1

Use includes() method on Array

The includes() method will return a boolean based on whether the array includes the argument.

const array  = [50,23,1,11,23,44,9,1]

array.includes(100)
// output of numbers
false

array.includes(23)
// output of numbers ~~ GOTCHA: only returns if element is in the array, not index or if duplicates
true

const flowersArray = ['rose', 'lily', 'tulip', 'poppy', 'sunflower']

flowersArray.includes('sunflower')
// output of string
true

flowersArray.includes('snapdragon')
// output of string
false

Use map() method to transform the Array

Transform all the values in an array and returns a NEW array, so your original array will remain intact.

const flowersArray = ['rose', 'lily', 'tulip', 'poppy', 'sunflower']


const flowers = flowersArray.map(flower => `${flower}.img`)
// output
[ 'rose.img', 'lily.img', 'tulip.img', 'poppy.img', 'sunflower.img' ]

Use findIndex() to find the index of an element in the Array

const array  = [6,50,23,1,11,23,44,9,1]

console.log(array.findIndex(item => item > 20))
// output index
1
Everything is going on in the head.
Photo by DODJI DJIBOM / Unsplash

If you want to dive deeper into arrays in JavaScript on your own, you can head over to the Mozilla Developer Network. They have a great article that covers everything you need to know about arrays in JavaScript.

Start coding now at Codecademy!

Once you have a basic understanding of arrays, you can start using them in your own projects. Arrays can be really helpful for storing, and looping data. They are also a great way to keep your code organized and easy to read.