DEV Community

Cover image for (Javascript) My learning journey: Arrays
Eric The Coder
Eric The Coder

Posted on • Updated on

(Javascript) My learning journey: Arrays

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.

Array methods

const letters = ['a', 'b', 'c', 'd', 'e']
const names = ['Mike', 'Paul', 'John']

// slice at position (start, end before)
console.log(letters.slice(2)) // ['c', 'd', 'e']
console.log(letters.slice(2, 4)) // ['c', 'd']

// last element
console.log(letters.slice(-1)) // ['e']

// copy array
const newLetters = letters.splice()
const newLetters = [...letters]

// splice = same as slice but mutate original array
console.log(letters.splice(-1)) // ['e']
console.log(letters) // ['a', 'b', 'c', 'd']

// reverse and mutate original array
console.log(letters.reverse()) // ['d', 'c', 'b', 'a']

// Concat
const newLetters = letters.concat(['f', 'g'])
const newLetters = [...letters, 'f', 'g']

// ForEach loop
letters.forEach(function(letter) {
  console.log(letter)
})

letters.forEach(letter => console.log(letter))

// ForEach with index loop
letters.forEach((letter, index) => console.log(`${index+1}. ${letter}`))
Enter fullscreen mode Exit fullscreen mode

Array Map

Returns a new array containing the results of mutated array original elements.

const numbers = [1, 2, 3, 4]
const doubleNumbers = numbers.map(function(number) {
  return number * 2
})
// or with arrow function
const doubleNumbers = numbers.map(number => number * 2)

console.log(doubleNumbers) // [2, 3, 6, 8]

// map with index
const doubleNumbers = numbers.map((number, index) => number * index)
console.log(doubleNumbers) // [0, 2, 6, 12]

Enter fullscreen mode Exit fullscreen mode

Array Filter

Returns a new array containing the elements that pass a specified test criteria

const numbers = [1, 2, 3, 4]
const bigNumbers = numbers.filter(function(number) {
  return number > 2
})
// or with arrow function
const bigNumbers = numbers.filter(number => number > 2)
console.log(bigNumbers) // [3, 4]

// first two only
const bigNumbers = numbers.filter((number, index) => index < 2)
Enter fullscreen mode Exit fullscreen mode

Array Reduce

Reduce an array to one single value.

const numbers = [1, 2, 3, 4]
// Get total with a reduce accumulator starting at 0
const total = numbers.reduce(function(acc, number) {
  return acc + number
}, 0) 
console.log(total) // 10

// Get maximum with a reduce 
const max = numbers.reduce(function(acc, number) {
  if (acc > number)
    return acc
  else
    return number
}, numbers[0]) 
console.log(max) // 4
Enter fullscreen mode Exit fullscreen mode

Find method

Find elements base specific criteria

const numbers = [1, 2, 3, 4]
const firstBig = numbers.find(number => number > 2)
console.log(firstBig) // 3

// Find object
const friends = [
  {name: 'Mike', age: 45},
  {name: 'Paul', age: 42},
  {name: 'John', age: 35},
  {name: 'Peter', age: 37},
]
const mike = friends.find(friend => friend.name === 'Mike')
console.log(mike) // {name: 'Mike', age: 45}

// Find index
const delPosition = friends.findIndex(friend => friend.name === 'Mike')
// remove found friend object
friends.splice(delPosition, 1)
console.log(friends) // 
Enter fullscreen mode Exit fullscreen mode

Some and Every

Check if some (or every) element meet a specific criteria

const friends = [
  {name: 'Mike', age: 45},
  {name: 'Paul', age: 42},
  {name: 'John', age: 35},
  {name: 'Peter', age: 37},
]
const someAreOld = friends.some(friend => friend.age > 45)
console.log(someAreOld) // false

const allYoung = friends.every(friend => friend.age <= 45)
console.log(allYoung) // true
Enter fullscreen mode Exit fullscreen mode

Sorting Array

const names = ['Mike', 'John', 'Peter']
// sort will also mutate the original array
console.log(names.sort()) // ['John', 'Mike', 'Peter']

// .sort will text sort by default
// use callback to change default sort behavior
const numbers = [1, 2, 15, 10, 12]
// return < 0 a b (keep order)
// return > 0 b a (switch order)
numbers.sort((a, b) => {
  if (a > b) return 1
  if (b > a) return -1
})
console.log(numbers) // [1, 2, 10, 12, 15]

// Sort array of object (students: id, name, year)
const studentsByYear = students.sort((a, b) => a.year > b.year ? 1 : -1)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)