DEV Community

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

Posted on • Edited on

4 1

(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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series