Basics

const people = ['Jane', 'Pete'];

console.log(people.length); // 2

console.log(people[0]); // 'Jane'
console.log(people[1]); // 'Pete'

console.log(people[5]); // undefined

people[0] = 'Kim';

console.log(people); // ['Kim', 'Pete']

const empty = [];
const single = ['one'];
const many = ['uno', 'dos', 'tres'];

Mixed Types

const things = ['Gold', { species: 'Cat' }, ['Car', 'House']];

console.log(things[0]); // 'Gold'

console.log(things[1]); // { animal: 'Cat' }
console.log(things[1].species); // 'Cat'

console.log(things[2]); // ['Car', 'House']
console.log(things[2][0]); // 'Car'
console.log(things[2][1]); // 'House'

things[2][1] = 'Home';
console.log(things[2][1]); // 'Home'

Detecting Arrays

const items = ['Pencil', 'Notebook', 'Gum'];
console.log(typeof items); // 'object'

const person = { firstName: 'John', lastName: 'Doe' };
console.log(typeof person); // 'object'

console.log(Array.isArray(items)); // true
console.log(Array.isArray(person)); // false

Methods

pop and push

const items = ['first', 'second'];

items.push('third');
items.push('fourth');

console.log(items); // ['first', 'second', 'third', 'fourth']

console.log(items.pop()); // 'fourth'
console.log(items.pop()); // 'third'

console.log(items); // ['first', 'second']

items.pop(); // 'second'
items.pop(); // 'first'

items.pop(); // undefined

shift and unshift

let items = ['economy', 'deal'];

// Push to the start of the array
items.unshift('business');
items.unshift('vip');
console.log(items); // ['vip', 'business', 'economy', 'deal']

// Pops from the start of the array
console.log(items.shift()); // 'vip'
console.log(items.shift()); // 'business'
console.log(items); // ['economy', 'deal']

console.log(items.shift()); // 'economy'
console.log(items.shift()); // 'deal'

console.log(items.shift()); // undefined

Stack in JavaScript

// LIFO - last in first out - stack
const items = [];

items.push('first');
items.push('second');
items.push('third');

console.log(items.pop()); // 'third'
console.log(items.pop()); // 'second'
console.log(items.pop()); // 'first'

Queue in JavaScript

// FIFO - first in first out - queue
let items = [];

// O(1) - constant time
items.push('first');
items.push('second');
items.push('third');

// O(n) - linear time
console.log(items.shift()); // 'first'
console.log(items.shift()); // 'second'
console.log(items.shift()); // 'third'

Destructuring

const minerals = ['Gold', 'Iron', 'Copper'];

const [first, second] = minerals;
console.log(first, second); // 'Gold', 'Iron'

const [alpha, , gamma] = minerals;
console.log(alpha, gamma); // 'Gold', 'Copper'

const [uno, ...resto] = minerals;
console.log(uno, resto); // 'Gold', ['Iron', 'Copper']
// [...resto, tail] = minerals; // ERROR: rest must be the last element

let [un, duex, trios, quatre] = minerals;
console.log(quatre); // undefined

[un, duex, trios, quatre = 'Silver'] = minerals;
console.log(quatre); // 'Silver'

Spread

let whiteMinerals = ['Silver', 'Platinum'];

let moreMinerals = ['Gold', 'Copper', ...whiteMinerals];
console.log(moreMinerals); // [ 'Gold', 'Copper', 'Silver', 'Platinum' ]

moreMinerals = ['Gold', ...whiteMinerals, 'Copper'];
console.log(moreMinerals); // [ 'Gold', 'Silver', 'Platinum', 'Copper' ]

let yellowMinerals = ['Gold', 'Copper'];
let mostMinerals = ['Iron', ...whiteMinerals, ...yellowMinerals];
console.log(mostMinerals); // [ 'Iron', 'Silver', 'Platinum', 'Gold', 'Copper' ]

Iteration

forEach

let products = [
  { name: 'Apple', price: 100 },
  { name: 'Orange', price: 80 },
  { name: 'Banana', price: 150 },
  { name: 'Melon', price: 200 },
  { name: 'Saffron', price: 2000 },
];

// log all the prices
products.forEach((product) => {
  console.log(product.price); // 100, 80, 150, 200, 2000
});

// log as an indexed list
products.forEach((product, index) => {
  console.log(index + ': ' + product.name);
});

map

const people = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Thomas', lastName: 'Calls' },
  { firstName: 'JavaScript', lastName: 'Professional' },
];

const peopleWithFullName = people.map((person) => {
  return {
    ...person,
    fullName: `${person.firstName} ${person.lastName}`,
  };
});

peopleWithFullName.forEach((person) => console.log(person.fullName));

filter

const numbers = [1773, 19, 50, 14, 59];

// get the evens and the odds
//p
const evens = numbers.filter((item) => item % 2 === 0);
const odds = numbers.filter((item) => item % 2 !== 0);

console.log(evens); // [50, 14]
console.log(odds); // [1773, 19, 59]

Searching JavaScript Arrays

find

const people = [
  { name: 'Percy', born: 1961 },
  { name: 'Wally', born: 1987 },
  { name: 'Harry', born: 1994 },
];

// Find Wally
const wally = people.find((person) => person.name === 'Wally');
console.log(wally); // { name: 'Wally', born: 1987 }

// Find Jenny
const jenny = people.find((person) => person.name === 'Jenny');
console.log(jenny); // undefined

findIndex

const maybeNumbers = [0, 3, undefined, 5, 6];

maybeNumbers.find((x) => x === undefined); // undefined
//p
maybeNumbers.find((x) => x === 4); // undefined

const undefinedIndex = maybeNumbers.findIndex((x) => x === undefined);
console.log(undefinedIndex); // 2

const fourIndex = maybeNumbers.findIndex((x) => x === 4);
console.log(fourIndex); // -1

const valueBeforeUndefined = maybeNumbers[undefinedIndex - 1];
console.log(valueBeforeUndefined); // 3

Array Sub Selection

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

// Everything starting at index 2
console.log(animals.slice(2)); // [ 'camel', 'duck', 'elephant' ]

// Everything starting at index 2, but before index 4
console.log(animals.slice(2, 4)); // [ 'camel', 'duck' ]

// Everything before index 2
console.log(animals.slice(0, 2)); // [ 'ant', 'bison' ]

// Everything
console.log(animals.slice()); // [ 'ant', 'bison', 'camel', 'duck', 'elephant' ]

Boolean Reduction

let products = [
  { name: 'Apple', price: 50 },
  { name: 'Banana', price: 150 },
  { name: 'Melon', price: 200 },
  { name: 'Saffron', price: 2000 },
];

const isExpensive = (product) => product.price > 1000;

const isSomeProductExpensive = products.some(isExpensive);
console.log(isSomeProductExpensive); // true

const isEveryProductExpensive = products.every(isExpensive);
console.log(isEveryProductExpensive); // false

const isSomeProductCheap = products.some((product) => product.price < 100); // true
const isEveryProductCheap = products.every((product) => product.price < 100); // false

Array reduce

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((accumulator, current) => accumulator + current, 0);

console.log(result); // 15

result = arr.reduce((sum, current) => sum + current, 0);

const { evenCount, oddCount } = arr.reduce(
  (counts, current) => {
    if (current % 2 === 0) {
      return { ...counts, evenCount: counts.evenCount + 1 };
    } else {
      return { ...counts, oddCount: counts.oddCount + 1 };
    }
  },
  { evenCount: 0, oddCount: 0 },
);

console.log(evenCount, oddCount); // 2 3

Reversing Arrays

const simple = ['alpha', 'beta', 'gamma'];

const simpleReverse = simple.reverse();

console.log(simpleReverse); // ['gamma', 'beta', 'alpha']

console.log(simple); // ['gamma', 'beta', 'alpha']

const better = ['alpha', 'beta', 'gamma'];

const reversedCopy = [...better].reverse();

console.log(reversedCopy); // ['gamma', 'beta', 'alpha']
console.log(better); // ['alpha', 'beta', 'gamma']

Sorting Arrays

let array = ['hello', 'fam'];
array.sort();
console.log(array); // ['fam', 'hello']

array = [1, 3, 22];
array.sort();
console.log(array); // [1, 22, 3]
array = ['1', '3', '22'];
console.log(array.sort()); // ['1', '22', '3']

array = [1, 3, 22];
array.sort((a, b) => a - b);
console.log(array); // [1, 3, 22]
array.sort((b, a) => a - b);
console.log(array); // [22, 3, 1]

Empty Arrays

let items = Array(5);
console.log(items.length); // 5
console.log(items); // [ , , , , ]

items.forEach((x) => console.log(x));
// ❌

let oneToFive = items.map((_, index) => index + 1); // ❌
console.log(oneToFive); // [ , , , , ]

items = [...Array(5)];
console.log(items.length); // 5
console.log(items); // [ undefined, undefined, undefined, undefined, undefined ]

items.forEach((x) => console.log(x));
// ✅ undefined, undefined, undefined, undefined, undefined

oneToFive = items.map((_, index) => index + 1); // ✅
console.log(oneToFive); // [ 1, 2, 3, 4, 5 ]

items = [...Array(5)]; // ✅
console.log(items); // [ undefined, undefined, undefined, undefined, undefined ]

items = [...Array(5)].map((_) => 0); // [ 0, 0, 0, 0, 0 ]

items = Array(5).fill(0); // ✅
console.log(items); // [ 0, 0, 0, 0, 0 ]

Array Equality

function areArraysEqual(a, b) {
  return a.length === b.length && a.every((_, i) => a[i] === b[i]);
}

const itemsA = ['Car', 'TV', 'Remote'];
const itemsB = ['Car', 'TV', 'Remote'];

console.log(itemsA === itemsB); // false

console.log(areArraysEqual(itemsA, itemsB)); // true

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

JavaScript Arrays Masterclass

Subscription Required

Basics

Mixed Types

Detecting Arrays

Methods

pop and push

shift and unshift

Stack in JavaScript

Queue in JavaScript

Destructuring

Spread

Iteration

forEach

map

filter

Searching JavaScript Arrays

find

findIndex

Array Sub Selection

Boolean Reduction

Array reduce

Reversing Arrays

Sorting Arrays

Empty Arrays

Array Equality

Transcript

Professional Modern JavaScript