An introduction to JavaScript Arrays

A gentle introduction to Arrays, a key building block of JavaScript

⭐️ 👀 2023 WEB DEVELOPMENT BOOTCAMP starting in days! Join the waiting list to reserve your spot in my 10-weeks cohort course and learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much much more! 👀 ⭐️

An array is a collection of elements.

Arrays in JavaScript are not a type on their own.

Arrays are objects.

We can initialize an empty array in these 2 different ways:

const a = []
const a = Array()

The first is using the array literal syntax. The second uses the Array built-in function.

You can pre-fill the array using this syntax:

const a = [1, 2, 3]
const a = Array.of(1, 2, 3)

An array can hold any value, even value of different types:

const a = [1, 'Flavio', ['a', 'b']]

Since we can add an array into an array, we can create multi-dimensional arrays, which have very useful applications (e.g. a matrix):

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

matrix[0][0] //1
matrix[2][0] //7

You can access any element of the array by referencing its index, which starts from zero:

a[0] //1
a[1] //2
a[2] //3

You can initialize a new array with a set of values using this syntax, which first initializes an array of 12 elements, and fills each element with the 0 number:

Array(12).fill(0)

You can get the number of elements in the array by checking its length property:

const a = [1, 2, 3]
a.length //3

Note that you can set the length of the array. If you assign a bigger number than the arrays current capacity, nothing happens. If you assign a smaller number, the array is cut at that position:

const a = [1, 2, 3]
a //[ 1, 2, 3 ]
a.length = 2
a //[ 1, 2 ]

How to add an item to an array

We can add an element at the end of an array using the push() method:

a.push(4)

We can add an element at the beginning of an array using the unshift() method:

a.unshift(0)
a.unshift(-2, -1)

How to remove an item from an array

We can remove an item from the end of an array using the pop() method:

a.pop()

We can remove an item from the beginning of an array using the shift() method:

a.shift()

How to join two or more arrays

You can join multiple arrays by using concat():

const a = [1, 2]
const b = [3, 4]
const c = a.concat(b) //[1,2,3,4]
a //[1,2]
b //[3,4]

You can also use the spread operator (...) in this way:

const a = [1, 2]
const b = [3, 4]
const c = [...a, ...b]
c //[1,2,3,4]

How to find a specific item in the array

You can use the find() method of an array:

a.find((element, index, array) => {
  //return true or false
})

Returns the first item that returns true. Returns undefined if the element is not found.

A commonly used syntax is:

a.find(x => x.id === my_id)

The above line will return the first element in the array that has id === my_id.

findIndex() works similarly to find(), but returns the index of the first item that returns true, and if not found, it returns -1:

a.findIndex((element, index, array) => {
  //return true or false
})

Another method is includes():

a.includes(value)

Returns true if a contains value.

a.includes(value, i)

Returns true if a contains value after the position i.

One more thing! ⚠️ ✋

At the end of January I will organize the Web Development Bootcamp.

It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.

It's not "just a course". It's a big event I organize once a year.

We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more! 

At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.

Because once you got the fundamentals, you only learn by working on real, exciting projects.

To find out more, visit bootcamp.dev