JavaScript is a versatile language that can be used for a variety of purposes. It can be used for front-end development, back-end development, or full-stack development. In JavaScript, arrays are one of the most important aspects of any JavaScript application. Arrays are used to store a collection of data, and they can be easily accessed and manipulated.

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. We show the most used methods.

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, minimum, and maximum 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

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.

Once you have a basic understanding of the code of the JavaScript language, you can move on to more advanced tutorials. For example, on the Mozilla Developer Network, you can learn how to use JavaScript to create interactive websites and applications.