03 Array Functions

Array Functions

Core functions to operate on Arrays (API)

Array = Core entity of Javascript

Array Functions: Quick Recap

  • filter()
  • find()
  • some()
  • every()
  • map()
  • flatMap()
  • reduce()

Extension Libraries

  • Prototype
  • jQuery
  • Underscore.js
  • Do it yourself utility
    • no longer necessary - really ! => go native

(Native) Array Functions

  • No fishy/magic transformations of callbacks
  • No fishy/magic extra behaviour during iterations
  • Performance
  • ECMAScript (Standard) is evolving quickly

filter()


                array.filter(fn(currentValue, index?, array?), thisArg?)

callback - the function used for testing
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
thisArg? - the element this is bound to

Exercises [1]

Wrap-Up: filter()

  • Returns a new array
  • Very little code to write
  • Very simple to use

find()


                array.find(fn(currentValue, index?, array?), thisArg?)

callback - the function used for testing
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
thisArg? - the element this is bound to

Exercises [2]

Wrap-Up: find()

  • Returns the first match (only)
  • Iteration aborts after the first match
  • Very little code to write
  • Very simple to use

some()


                array.some(fn(currentValue, index?, array?), thisArg?)

callback - the function used for testing
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
thisArg? - the element this is bound to

Exercises [3]

Wrap-Up: some()

  • Strange naming for match-any
  • Iteration aborts after the first match
  • Very little code to write
  • Very simple to use

every()


                array.every(fn(currentValue, index?, array?), thisArg?)

callback - the function used for testing
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
thisArg? - the element this is bound to

Exercises [4]

Wrap-Up: every()

  • Strange naming for match-all
  • Very little code to write
  • Very simple to use

map()


                array.map(fn(currentValue, index?, array?), thisArg?)

callback - the function used for testing
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
thisArg? - the element this is bound to

Exercises [5]

Wrap-Up: map()

  • Very little code to write
  • Very simple to use

flatMap()


                array.flatMap(fn(currentValue, index?, array?), thisArg?)

callback - the function used for testing
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
thisArg? - the element this is bound to

Exercises [6]

Wrap-Up: flatMap()

  • Supported in modern browsers
  • Combination of flat() and map()
  • Only for very special use-cases
  • Very little code to write
  • Very simple to use

reduce()


                array.reduce(
                    fn(accumulator, currentValue, index?, array?),
                    initialValue?)

callback - the function used for testing
accumulator - the result of the reducer
currentValue - the element under test
index? - the index of the element under test
array? - the array being tested
initialValue? - the value to start the reduction with

Exercises [7-9, 10 optional]

Wrap-Up: reduce()

  • Very versatile and powerful
  • Use Cases: collect, aggregate, tally, group, pipeline
  • Very little code to write
  • Not so simple anymore

Array Functions: Wrap-Up

  • Very powerful
  • Very little code to write
  • Very simple to write tests for
  • Very simple to use

Array Functions: Continued ...

  • reduceRight(...)
  • findIndex(...)
  • sort(...)
  • copyWithin(...)
  • splice(...)
  • slice(...)
  • fill(...)
  • ...

Array Functions: More ...

Check out and get familiar with the full Array API !

There is more coming soon => ES.Next

Can I use this?

Questions?