JavaScript Arrays

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
const anotherSalad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑')

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
 
salad[0] // '🍅'
salad[2] // '🥦'
salad[5] // '🥕'
 
// Last element via length
const len = salad.length
salad[len - 1] // '🥑'
salad[len - 3] // '🌽'

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
 
for (let i = 0; i < salad.length; i++) {
  console.log(`Element at index ${i} is ${salad[i]}`)
}

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
 
salad.push('🥜') // add at end — mutates
salad.unshift('🥜') // add at front — mutates

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
salad.pop() // removes last — returns '🥑'
console.log(salad) // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
const saladCopy = salad.slice()
 
console.log(saladCopy) // same values
salad === saladCopy // false — different reference

Array.isArray(['🍅', '🍄', '🥦']) // true
Array.isArray('🍅') // false
Array.isArray({ tomato: '🍅' }) // false
Array.isArray([]) // true

let [tomato, mushroom, carrot] = ['🍅', '🍄', '🥕']
console.log(tomato, mushroom, carrot) // 🍅 🍄 🥕
 
// Equivalent without destructuring
let vegetables = ['🍅', '🍄', '🥕']
let tomato2 = vegetables[0]
let mushroom2 = vegetables[1]
let carrot2 = vegetables[2]

let [tomato, mushroom = '🍄'] = ['🍅']
console.log(tomato) // '🍅'
console.log(mushroom) // '🍄' — default applied

let [tomato, , carrot] = ['🍅', '🍄', '🥕']
console.log(tomato) // '🍅'
console.log(carrot) // '🥕'

let fruits = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']]
 
const veg = fruits[4] // ['🍅', '🍄', '🥕']
const carrot = veg[2] // '🥕'
fruits[4][2] // '🥕'
 
let [, , , , [, , carrot2]] = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']]

const [tomato, mushroom, ...rest] = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
 
console.log(tomato) // '🍅'
console.log(mushroom) // '🍄'
console.log(rest) // ['🥦', '🥒', '🌽', '🥕', '🥑']

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']
const saladCloned = [...salad]
salad === saladCloned // false
 
// Merge arrays
const emotion = ['🙂', '😔']
const veggies = ['🥦', '🥒', '🌽', '🥕']
const emotionalVeggies = [...emotion, ...veggies]
// ['🙂', '😔', '🥦', '🥒', '🌽', '🥕']

let first = '😔'
let second = '🙂'
;[first, second] = [second, first]
 
console.log(first) // '🙂'
console.log(second) // '😔'

const arr1 = [11, 21, 73]
const arr2 = new Array(7) // 7 empty slots
 
console.log(arr1.length) // 3
console.log(arr2.length) // 7
 
// Resize — adds empty slots or truncates
const arr = [11, 32]
arr.length = 5 // [11, 32, empty × 3]
arr.length = 0 // fastest way to empty (when writable)

arr2.length = 2 ** 32 // RangeError — max length 2³² − 1
new Array(-10) // RangeError — invalid length
 
// Non-writable length
const ages = [21, 12, 73, 41, 67]
Object.defineProperty(ages, 'length', { writable: false })
ages[5] = 6 // silently fails (strict: throws in some contexts)
ages.push(5) // TypeError — cannot change length

const first = [1, 2, 3]
const second = [4, 5, 6]
const merged = first.concat(second)
 
console.log(merged) // [1, 2, 3, 4, 5, 6]
console.log(first) // [1, 2, 3] — unchanged

const emotions = ['🙂', '😍', '🙄', '😟']
 
emotions.join() // "🙂,😍,🙄,😟" — default comma
emotions.join('<=>') // "🙂<=>😍<=>🙄<=>😟"
;[].join() // ""

const colors = ['red', 'blue', 'green']
colors.fill('pink') // ['pink', 'pink', 'pink']
 
const colors2 = ['red', 'blue', 'green']
colors2.fill('pink', 1, 3) // ['red', 'pink', 'pink']

const names = ['tom', 'alex', 'bob', 'john']
 
names.includes('tom') // true
names.includes('july') // false
 
names.indexOf('alex') // 1
names.indexOf('rob') // -1
 
const dupes = ['tom', 'alex', 'bob', 'tom']
dupes.indexOf('tom') // 0 — first match
dupes.lastIndexOf('tom') // 3 — last match

const names = ['tom', 'alex', 'bob']
names.reverse() // ['bob', 'alex', 'tom']
 
let artists = ['John White Abbott', 'Leonardo da Vinci', 'Charles Aubry', 'Anna Atkins', 'Barent Avercamp']
 
let sorted = artists.sort() // mutates AND returns same reference
console.log(artists === sorted) // true
 
// Descending compare function
artists.sort((a, b) => (a === b ? 0 : a > b ? -1 : 1))
 
// Numbers — default sort is lexicographic!
let ages = [2, 1000, 10, 3, 23, 12, 30, 21]
ages.sort() // [10, 1000, 12, 2, 21, 23, 3, 30] — wrong!
ages.sort((a, b) => a - b) // [2, 3, 10, 12, 21, 23, 30, 1000]

const names = ['tom', 'alex', 'bob']
 
names.splice(1, 0, 'zack') // insert at index 1
// ['tom', 'zack', 'alex', 'bob']
 
const names2 = ['tom', 'alex', 'bob']
const deleted = names2.splice(2, 1, 'zack') // replace index 2
console.log(deleted) // ['bob']
console.log(names2) // ['tom', 'alex', 'zack']

const junkFoodILove = ['🥖', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🍿']
 
junkFoodILove.at(0) // 🥖
junkFoodILove.at(3) // 🍕
junkFoodILove.at(-1) // 🍿
junkFoodILove.at(-5) // 🍕
junkFoodILove.at(10) // undefined

const arr1 = [0, 1, 2, [3, 4]]
arr1.flat() // [0, 1, 2, 3, 4]
 
const arr2 = [0, 1, [2, [3, [4, 5]]]]
arr2.flat() // [0, 1, 2, [3, [4, 5]]]
arr2.flat(2) // deeper flatten
arr2.flat(Infinity) // fully flat

const array = [1, 2, 3, 4, 5, 6, 7]
array.copyWithin(0, 3, 6) // copy indices 3–5 to start
// [4, 5, 6, 4, 5, 6, 7]
 
const array2 = [1, 2, 3, 4, 5, 6, 7]
array2.copyWithin(0, 4)

// toSorted — non-mutating sort
const months = ['Mar', 'Jan', 'Feb', 'Dec']
const sortedMonths = months.toSorted()
console.log(sortedMonths) // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months) // unchanged
 
// toReversed
const items = [1, 2, 3]
const reversedItems = items.toReversed() // [3, 2, 1]
console.log(items) // [1, 2, 3] — unchanged
 
// toSpliced
const months2 = ['Jan', 'Mar', 'Apr', 'May']
const withFeb = months2.toSpliced(1, 0, 'Feb')
 
// with — replace at index (supports negative index)
const numbers = [1, 2, 3, 4, 5]
const newArray = numbers.with(2, 6)
console.log(numbers) // [1, 2, 3, 4, 5] — unchanged
console.log(newArray) // [1, 2, 6, 4, 5]
 
const anotherArray = numbers.with(-2, 8)
anotherArray.at(-2) // 8

const a = new Array(2, 3, 4) // [2, 3, 4]
const b = [4, 5, 6]
const c = Array.of(2, false, 'test', { name: 'Alex' })
// Array.of(7) → [7]  vs  new Array(7) → 7 empty slots

const arrayLike = {
  0: 'A',
  1: 'B',
  2: 'C',
  length: 3,
}
 
arrayLike[1] // 'B'
 
Array.from(arrayLike) // ['A', 'B', 'C']
 
// Other array-likes: NodeList, arguments
document.getElementsByTagName('li')
 
function checkArgs() {
  console.log(arguments.length)
}

const collection = Array.from(document.getElementsByTagName('li'))
 
// With map function
Array.from({ length: 5 }, (_, i) => i + 1) // [1, 2, 3, 4, 5]
Array.from('Hello') // ['H', 'e', 'l', 'l', 'o']

Array.fromAsync({
  length: 3,
  0: Promise.resolve(''),
  1: Promise.resolve('Google'),
  2: Promise.resolve('Apple'),
}).then((array) => console.log(array))
// ['', 'Google', 'Apple']

const customers = [
  {
    id: 1,
    f_name: 'Abby',
    l_name: 'Thomas',
    gender: 'M',
    married: true,
    age: 32,
    expense: 500,
    purchased: ['Shampoo', 'Toys', 'Book'],
  },
  {
    id: 2,
    f_name: 'Jerry',
    l_name: 'Tom',
    gender: 'M',
    married: true,
    age: 64,
    expense: 100,
    purchased: ['Stick', 'Blade'],
  },
  {
    id: 3,
    f_name: 'Dianna',
    l_name: 'Cherry',
    gender: 'F',
    married: true,
    age: 22,
    expense: 1500,
    purchased: ['Lipstik', 'Nail Polish', 'Bag', 'Book'],
  },
  {
    id: 4,
    f_name: 'Dev',
    l_name: 'Currian',
    gender: 'M',
    married: true,
    age: 82,
    expense: 90,
    purchased: ['Book'],
  },
  {
    id: 5,
    f_name: 'Maria',
    l_name: 'Gomes',
    gender: 'F',
    married: false,
    age: 7,
    expense: 300,
    purchased: ['Toys'],
  },
]

const seniorCustomers = customers.filter((customer) => customer.age >= 60)
console.log('[filter] Senior Customers =', seniorCustomers)

const customersWithFullName = customers.map((customer) => {
  let title = ''
  if (customer.gender === 'M') title = 'Mr.'
  else if (customer.gender === 'F' && customer.married) title = 'Mrs.'
  else title = 'Miss'
 
  return {
    ...customer,
    full_name: `${title} ${customer.f_name} ${customer.l_name}`,
  }
})
console.log('[map] Customers With Full Name =', customersWithFullName)

// Average age of customers who purchased 'Book'
let count = 0
const total = customers.reduce((accumulator, customer) => {
  if (customer.purchased.includes('Book')) {
    accumulator += customer.age
    count += 1
  }
  return accumulator
}, 0)
 
console.log('[reduce] Customer Avg age Purchased Book:', Math.floor(total / count))

const hasYoungCustomer = customers.some((customer) => customer.age < 10)
console.log('[some] Has Young Customer (Age < 10):', hasYoungCustomer)
 
const isThereWindowShopper = customers.every((customer) => customer.purchased.length === 0)
console.log('[every] Everyone a window shopper?', isThereWindowShopper)

const foundYoungCustomer = customers.find((customer) => customer.age < 10)
console.log('[find] Found Young Customer:', foundYoungCustomer)
 
const index = customers.findIndex((customer) => customer.age < 10)
 
const lastFoundYoungCustomer = customers.findLast((customer) => customer.age < 10)
console.log('[findLast] Last Found Young Customer:', lastFoundYoungCustomer)
 
const lastIndex = customers.findLastIndex((customer) => customer.age < 10)

const numbers = [10, 20, 30]
 
for (const [index, value] of numbers.entries()) {
  console.log(index, value)
}
 
for (const value of numbers.values()) {
  console.log(value)
}

const arr1 = [1, 2, 3, 4]
 
arr1.map((item) => item * 2) // [2, 4, 6, 8]
arr1.flatMap((item) => item * 2) // same for flat scalars
 
arr1.map((item) => [item * 2]) // [[2], [4], [6], [8]]
arr1.flatMap((item) => [item * 2]) // [2, 4, 6, 8] — flattened
 
arr1.map((item) => [[item * 2]]) // nested
arr1.flatMap((item) => [[item * 2]]) // [[2], [4], [6], [8]] — one level flat

const number = [100, 40, 15]
 
number.reduceRight((accumulator, current) => accumulator - current)
// 15 - 40 - 100 = -125

// Step-by-step
const marriedCustomers = customers.filter((customer) => customer.married)
const expenseMapped = marriedCustomers.map((c) => c.expense)
const totalExpenseMarriedCustomer = expenseMapped.reduce((accum, expense) => accum + expense, 0)
console.log('Total Expense of Married Customers in INR:', totalExpenseMarriedCustomer)
 
// Chained — same result, cleaner
const total = customers
  .filter((customer) => customer.married)
  .map((married) => married.expense)
  .reduce((accum, expense) => accum + expense, 0)
 
console.log('Orchestrated total expense in INR:', total)

const arr = new Array('apple', 'banana', 'cherry', 'date', 'elderberry')
console.log(arr.length) // 5

const arr = new Array(3)
console.log(arr.length) // 3
console.log(0 in arr) // false — slot is empty, not undefined

const arr = [10, 20, 30, 40, 50, 60]
const fourth = arr[arr.length - 3] // index 3 → 40
console.log(fourth) // 40

const arr = [10, 20, 30, 40, 50, 60]
 
for (let i = 0; i < arr.length; i++) {
  if (i % 2 !== 0) {
    console.log(arr[i]) // 20, 40, 60
  }
}

const arr = ['b', 'c']
arr.unshift('a') // front
arr.push('d') // end
console.log(arr) // ['a', 'b', 'c', 'd']

const arr = ['a', 'b', 'c', 'd']
arr.shift() // removes 'a'
arr.pop() // removes 'd'
console.log(arr) // ['b', 'c']

const foods = ['pizza', 'pasta', 'burger', 'sushi', 'tacos', 'ramen', 'curry', 'salad', 'steak', 'dosa']
const [, , , , , sixthFood] = foods
console.log(sixthFood) // 'ramen'

const foods = ['pizza', 'pasta', 'burger', 'sushi', 'tacos', 'ramen', 'curry', 'salad', 'steak', 'dosa']
const [first, second, ...lastEight] = foods
console.log(lastEight)
// ['burger', 'sushi', 'tacos', 'ramen', 'curry', 'salad', 'steak', 'dosa']

const original = [1, 2, 3, 4]
const clone = [...original]
// or: original.slice()
// or: Array.from(original)
 
console.log(clone) // [1, 2, 3, 4]
console.log(clone === original) // false

const arr = [1, 2, 3, 4, 5]
arr.length = 0
console.log(arr) // []

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 5) {
    arr.length = 6
    break
  }
}
 
console.log(arr) // [1, 2, 3, 4, 5, 6]

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.splice(0)
console.log(arr) // []

const arr = [1, 2, 3, 4, 5]
arr.length = 0 // preferred

const result = [].concat([])
console.log(result) // []
console.log(result.length) // 0

const words = ['javascript', 'typescript', 'python']
 
const query = 'script'
const hasPartialMatch = words.some((word) => word.includes(query))
console.log(hasPartialMatch) // true — 'javascript' contains 'script'

const arr = [1, 2, 3, 4, 5]
 
const copy = arr.slice(1, 3) // [2, 3] — arr unchanged
const removed = arr.splice(1, 2, 'a', 'b') // removes [2,3], inserts 'a','b'
// arr is now [1, 'a', 'b', 4, 5]

const codes = ['b2', 'a10', 'a2', 'b1']
 
const ascending = codes.toSorted((a, b) => a.localeCompare(b, undefined, { numeric: true }))
const descending = codes.toSorted((a, b) => b.localeCompare(a, undefined, { numeric: true }))
 
console.log(ascending) // ['a2', 'a10', 'b1', 'b2']
console.log(descending) // ['b2', 'b1', 'a10', 'a2']
console.log(codes) // unchanged — ['b2', 'a10', 'a2', 'b1']

// Dense
const dense = [1, 2, 3, 4, 5]
 
// Sparse
const sparse = [1, , 3] // hole at index 1
const sparse2 = new Array(5) // 5 empty slots
 
console.log(1 in sparse) // false
console.log(sparse.length) // 3

// Initialize a score board with zeros
const scores = new Array(5).fill(0) // [0, 0, 0, 0, 0]
 
// Reset only part of an array
const buffer = [1, 2, 3, 4, 5]
buffer.fill(-1, 2, 4) // [1, 2, -1, -1, 5]
 
// Create a 3×3 grid (same reference — use map for unique inner arrays)
const grid = Array.from({ length: 3 }, () => new Array(3).fill(0))

const arr = ['hello', 'world']
 
arr.join() // "hello,world"
arr.join(' ') // "hello world"
arr.join(' - ') // "hello - world"
arr.toString() // "hello,world"
String(arr) // "hello,world"

const employees = [
  { id: 1, name: 'Alice', departmentId: 1, salary: 5000 },
  { id: 2, name: 'Bob', departmentId: 2, salary: 7000 },
  { id: 3, name: 'Charlie', departmentId: 3, salary: 4500 },
  { id: 4, name: 'Diana', departmentId: 1, salary: 5500 },
  { id: 5, name: 'Edward', departmentId: 2, salary: 8000 },
  { id: 6, name: 'Fiona', departmentId: 4, salary: 6000 },
  { id: 7, name: 'George', departmentId: 3, salary: 5200 },
  { id: 8, name: 'Helen', departmentId: 4, salary: 7200 },
  { id: 9, name: 'Ian', departmentId: 2, salary: 4800 },
  { id: 10, name: 'Jane', departmentId: 1, salary: 5100 },
]
 
const departments = [
  { id: 1, name: 'HR' },
  { id: 2, name: 'Engineering' },
  { id: 3, name: 'Marketing' },
  { id: 4, name: 'Sales' },
]
 
const getDeptName = (departmentId) => departments.find((d) => d.id === departmentId)?.name ?? 'Unknown'
 
const getDeptIdByName = (name) => departments.find((d) => d.name === name)?.id

const engineeringId = getDeptIdByName('Engineering') // 2
 
const engineeringEmployees = employees.filter((emp) => emp.departmentId === engineeringId)
// Bob, Edward, Ian

const formatted = employees.map((emp) => `${emp.name} (${getDeptName(emp.departmentId)})`)
// ['Alice (HR)', 'Bob (Engineering)', ...]

const highestSalary = employees.reduce((max, emp) => (emp.salary > max ? emp.salary : max), 0)
// 8000
 
// Alternative
const highest = Math.max(...employees.map((e) => e.salary))

const salesId = getDeptIdByName('Sales')
 
const hasSalesEmployee = employees.some((emp) => emp.departmentId === salesId)
// true — Fiona, Helen

function filterByMinSalary(minSalary) {
  return employees.filter((emp) => emp.salary > minSalary)
}
 
const above6000 = filterByMinSalary(6000)
// Bob, Edward, Fiona, Helen

const names = employees.map((emp) => emp.name)
// ['Alice', 'Bob', 'Charlie', ...]

const totalSalary = employees.reduce((sum, emp) => sum + emp.salary, 0)
// 58400

const hasLowEarner = employees.some((emp) => emp.salary < 5000)
// true — Charlie (4500), Ian (4800)

const employee = employees.find((emp) => emp.salary === 5100)
// { id: 10, name: 'Jane', ... }

const hrId = getDeptIdByName('HR')
 
const lastInHR = employees.findLast((emp) => emp.departmentId === hrId)
// Jane (id: 10)

const marketingId = getDeptIdByName('Marketing')
 
const firstInMarketing = employees.find((emp) => emp.departmentId === marketingId)
// Charlie (id: 3)

const allAbove4000 = employees.every((emp) => emp.salary > 4000)
// true

const salesId = getDeptIdByName('Sales')
 
const firstInSales = employees.find((emp) => emp.departmentId === salesId)
// Fiona (id: 6)

const validDeptIds = new Set(departments.map((d) => d.id))
 
const allValid = employees.every((emp) => validDeptIds.has(emp.departmentId))
// true

employees.forEach((emp) => {
  console.log(`${emp.name} — ${getDeptName(emp.departmentId)}`)
})

const allNames = employees.map((emp) => emp.name)

const withRaise = employees.map((emp) => ({
  ...emp,
  salary: emp.salary * 1.1,
}))

const employeesWithSkills = [
  { name: 'Alice', skills: ['Excel', 'Management'] },
  { name: 'Bob', skills: ['JavaScript', 'React'] },
  { name: 'Charlie', skills: ['SEO', 'Analytics'] },
]
 
const allSkills = employeesWithSkills.flatMap((emp) => emp.skills)
// ['Excel', 'Management', 'JavaScript', 'React', 'SEO', 'Analytics']

const engineeringId = getDeptIdByName('Engineering')
 
const engineeringTotal = employees
  .filter((emp) => emp.departmentId === engineeringId)
  .reduce((sum, emp) => sum + emp.salary, 0)
// 19800 (Bob 7000 + Edward 8000 + Ian 4800)

const deptGroups = Object.groupBy(employees, (e) => e.departmentId)
 
const hasDeptAllAbove5000 = Object.values(deptGroups).some(
  (group) => group.length > 0 && group.every((emp) => emp.salary > 5000),
)
// true — Engineering (all > 5000), Sales (6000, 7200)

const employeesWithProjects = [
  { id: 1, name: 'Alice', projects: ['Project A', 'Project B'] },
  { id: 2, name: 'Bob', projects: ['Project B', 'Project C'] },
  { id: 3, name: 'Charlie', projects: ['Project A'] },
]
 
const uniqueProjectCount = new Set(employeesWithProjects.flatMap((emp) => emp.projects)).size
// 3 — A, B, C

const withDept = employees.map((emp) => ({
  name: emp.name,
  departmentName: getDeptName(emp.departmentId),
}))

const highEarners = employees.filter((emp) => emp.salary > 6000).map((emp) => emp.name)
// ['Bob', 'Edward', 'Helen']

for (const emp of employees) {
  console.log(emp.name)
}

for (const emp of employees) {
  if (emp.salary > 5000) {
    console.log(emp.name)
  }
}

for (const { name, salary } of employees) {
  console.log(name, salary)
}

for (const emp of employees) {
  const dept = departments.find((d) => d.id === emp.departmentId)
  console.log(`${emp.name} works in ${dept?.name ?? 'Unknown'}`)
}

for (const [index, emp] of employees.entries()) {
  console.log(index, emp.name)
}

const arrayLike = { 0: 'First', 1: 'Second', length: 2 }
 
console.log(arrayLike[1]) // 'Second'

function collectArgs() {
  const argsArray = Array.from(arguments)
  console.log(Array.isArray(argsArray)) // true
  return argsArray
}
 
collectArgs(1, 2, 3) // [1, 2, 3]
 
// Modern alternative — prefer rest parameters
function collectArgsModern(...args) {
  return args
}

const divs = document.querySelectorAll('div')
const divsArray = Array.from(divs)
// or: const divsArray = [...divs];
 
divsArray.forEach((div) => div.classList.add('highlight'))

const arr1 = [1, 2]
const arr2 = [3, 4]
 
const merged = [...arr1, ...arr2] // [1, 2, 3, 4]
// or: arr1.concat(arr2)           // [1, 2, 3, 4]

const fiveAs = Array.from({ length: 5 }, () => 'A')
console.log(fiveAs) // ['A', 'A', 'A', 'A', 'A']

const chars = Array.from('Hello')
console.log(chars) // ['H', 'e', 'l', 'l', 'o']