JavaScript Arrays Are Actually Cool (I Promise)

okay so my teacher told me to write a blog about array methods and i kept putting it off for like two weeks but HERE WE GO. im gonna try to explain this stuff in a way that actually makes sense because when i first read the docs i wanted to close my laptop and go outside forever

also if you have the same brain as me just open your browser console right now and type along. seriously do it. reading without doing = i forget everything in 4 minutes

---

first things first – what even is an array

its just a list. thats it.

js

let fruits = ["apple", "banana", "mango"]

thats an array. okay moving on

---

1. push() and pop()

push adds something to the END of your array. pop removes from the END.

i remember it like this – push = you're pushing something onto a pile. pop = the thing on top pops off. idk it works for me

js

let fruits = ["apple", "banana"]

fruits.push("mango")
// now fruits = ["apple", "banana", "mango"]

fruits.pop()
// now fruits = ["apple", "banana"]
// mango is just gone. bye mango

try it in your console rn. its satisfying i swear

---

2. shift() and unshift()

okay these do the same thing as push/pop BUT from the FRONT of the array

shift() removes the first item unshift() adds to the front

the names are confusing to me honestly. i just memorized that "shift" sounds like something getting kicked out

js

let fruits = ["apple", "banana", "mango"]

fruits.shift()
// fruits = ["banana", "mango"]
// apple got removed from the front

fruits.unshift("strawberry")
// fruits = ["strawberry", "banana", "mango"]
// strawberry is now first

before: ["apple", "banana", "mango"] after shift: ["banana", "mango"] after unshift("strawberry"): ["strawberry", "banana", "mango"]

---

3. map() – okay this one is actually really cool

so map() goes through every single item in your array and does something to it. and it gives you back a NEW array with the changed stuff

the old array stays the same!! thats important

okay so say you have numbers and you want to double all of them. OLD way with a for loop:

js

let numbers = [1, 2, 3, 4]
let doubled = []

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2)
}
// doubled = [2, 4, 6, 8]

like... that works but thats a lot of typing and i always mess up the i < numbers.length part

NOW with map():

js

let numbers = [1, 2, 3, 4]
let doubled = numbers.map(function(num) {
  return num * 2
})
// doubled = [2, 4, 6, 8]

before: [1, 2, 3, 4] after map: [2, 4, 6, 8]

so much cleaner. map just feels like you're telling javascript "hey go do this thing to every item" and it just... does it. love that

---

4. filter() – my personal favorite

filter() goes through your array and only KEEPS the things that pass your test

like imagine you have a list of numbers and you only want the ones bigger than 10

old for loop way:

js

let numbers = [3, 15, 8, 22, 5, 18]
let bigNumbers = []

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    bigNumbers.push(numbers[i])
  }
}
// bigNumbers = [15, 22, 18]

with filter():

js

let numbers = [3, 15, 8, 22, 5, 18]
let bigNumbers = numbers.filter(function(num) {
  return num > 10
})
// bigNumbers = [15, 22, 18]

before: [3, 15, 8, 22, 5, 18] after filter: [15, 22, 18]

the way i think about it – filter is like a bouncer. only the numbers that pass the rule get in

---

5. reduce() – okay dont panic

i'm gonna be honest reduce confused me for a long time and i still have to think about it slowly

basically reduce() squishes your whole array down into ONE single value. like one number, one string, whatever

the most common example is adding up all numbers in an array

js

let numbers = [1, 2, 3, 4, 5]

let total = numbers.reduce(function(sum, num) {
  return sum + num
}, 0)

// total = 15

the 0 at the end is where it starts counting from. so it goes:

• 0 + 1 = 1

• 1 + 2 = 3

• 3 + 3 = 6

• 6 + 4 = 10

• 10 + 5 = 15

just think of sum as a bucket that keeps collecting numbers. thats how it clicked for me

dont stress too much about reduce right now. just know it exists and it adds stuff up (it can do more but baby steps)

---

6. forEach() – the simple one

forEach just does something FOR EACH item. it doesnt return a new array, it just runs some code on each thing

js

let fruits = ["apple", "banana", "mango"]

fruits.forEach(function(fruit) {
  console.log("I have a " + fruit)
})

// I have a apple
// I have a banana
// I have a mango

its like map() but you're not trying to make a new array. you just want to DO something with each item. like printing it or something

---

the assignment (yes i did it)

js

// step 1 - make an array of numbers
let numbers = [2, 5, 8, 11, 14, 3, 20]

// step 2 - double each number with map
let doubled = numbers.map(function(num) {
  return num * 2
})
// doubled = [4, 10, 16, 22, 28, 6, 40]

// step 3 - get numbers greater than 10 with filter
let bigOnes = doubled.filter(function(num) {
  return num > 10
})
// bigOnes = [16, 22, 28, 40]

// step 4 - add them all up with reduce
let total = bigOnes.reduce(function(sum, num) {
  return sum + num
}, 0)
// total = 106

---

okay thats it

honestly arrays are not that scary once you just play around with them. i spent way too long being scared to touch them

the big things i want you to remember:

• push/pop = end of array

• shift/unshift = front of array

• map = transform everything, get new array

• filter = keep only what passes the test

• reduce = collapse everything into one value

• forEach = just loop and do stuff

open your console. type random arrays. break things. thats genuinely the best way to learn this stuff and i say that as someone who has tried every other way first

okay im done. took me 3 hours and one (1) snack break but we got there