CSS Examples and Javascript arrays

1. CSS Examples and Javascript arrays

2. Today • Awesome CSS • Arrays

3. Awesome CSS!

4. Arrays • Javascript arrays are heterogeneous containers • Javascript arrays may be sparse (please don't do this) • They are initialized either by: • An array literal, e.g. [3, 1, 9] • A call to the Array() function • Accessing array elements can be done using square brackets

5. Array functions • arr.push() – Adds one or many elements to the end of the array • arr.pop() – Remove and return the last element from the array • arr1.concat(arr2) – Returns a new array containing all elements from arr1 followed by all elements from arr2 • arr.indexOf(elem) – Returns first index where element can be found, or -1 otherwise • arr.reverse() – Reverse array in place • arr.sort() – Sort array in place • …based on converting all values to strings and sorting those.

6. Higher-order array functions • Javascript arrays have functions that take functions as parameters and use them to do stuff with the array • Simplest example: forEach • arr.forEach(func) – Execute the provided function for each element in the array • Returns undefined as the result • Let's see some examples…

7. Arrow functions • It's really annoying to have that whole "function(e) { return" stuff for these really simple functions • Arrow function syntax was designed to make short functions easier to write • Let's look at the simplest example…

8. Filter • arr.filter(func) – Return a new array with all elements from the original array where func(arr) returns true • Seems like you could filter something and then use forEach…

9. Map • arr.map(func) – Return a new array where each element of the array is the result of calling func(element)