DEV Community

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

Posted on • Edited 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)