class: center, middle  --- class: center, middle # ["JavaScript", "Arrays"].join(" ") --- # Overview 1. Array Basics 2. Array Methods 3. Practical Uses 4. Resources --- # Array Basics - Arrays are objects ```javascript // declaring an array using array literal syntax var arr = [1, 2, 3]; // checking its type typeof arr; // "object" // can also be declared using global Array() var myArray = new Array(1, 2, 3); ``` --- # Array Basics - Elements in an array are properties on the object with keys that correspond to their index - Indexes are zero-based; 0 is first element, 1 is second, etc. ```javascript var arr = [".js", ".css", ".html"]; // access values by index via bracket notation arr[0]; // ".js" arr[1]; // ".css" arr[2]; // ".html" // reassign value in array by index arr[2] = ".cshtml"; // [".js", ".css", ".cshtml"] ``` --- # Array Basics - Arrays have a length property, which returns number of elements ```javascript arr.length; // 3 // easily assign value to end of array using length property arr[arr.length] = ".ts"; // [".js", ".css", ".cshtml", ".ts"] // clear array by setting length to 0 arr.length = 0; arr; // [] ``` - Arrays can hold any data type, and can be mixed ```javascript var anyArr = [0, "One", true, x => x + 1, [], {}, undefined, NaN, Infinity]; ``` - Keep in mind that objects as elements are references to the objects in memory, not the objects themselves --- # Array Methods - Arrays have a large collection of methods available to them - These methods are what make arrays so versatile --- # Array Methods ```javascript var arr = [1, 2, 3]; // add one or more elements to end of array - returns array length arr.push(4); // 4 arr; // [1, 2, 3, 4] // remove element from end of array and return it arr.pop(); // 4 arr; // [1, 2, 3] // add one or more elements to front of array - returns array length arr.unshift(0); // 4 arr; // [0, 1, 2, 3] // remove element from front of array and return it arr.shift(); // 0 arr; // [1, 2, 3] ``` --- # Array Methods ```javascript var arr = ["A", "B", "C"]; // create a full/partial copy of an array - does not modify original arr.slice(0); // ["A", "B", "C"] arr.slice(1, 2); // ["B"] // combine arrays - also returns copy of array arr.concat(["D", "E"]); // ["A", "B", "C", "D", "E"] // remove elements from an array and returns them as an array - modifies original arr.splice(1, 1); // ["B"] arr; // ["A", "C", "D", "E"] // remove elements, then add new ones into it as well var arr = ["A", "R", "T"]; arr.splice(2, 1, "R"); // ["T"] arr; // ["A", "R", "R"]; ``` --- # Array Methods ```javascript var arr = [1, 2, 3]; // transform an array - returns new array var newArr = arr.map(el => el + 1); // [2, 3, 4] // filter an array - returns new array var nextArr = arr.filter(el => el > 1); // [2, 3] // accumulate values of an array var accArr = arr.reduce((a, b) => a + b); // 6 ``` --- # Practical Uses - Accessing Arguments ```javascript // ES5 function sumAll() { // Create an array of all arguments passed in using // arguments exotic object: var args = Array.prototype.slice.call(arguments); // Return accumulated value return args.reduce(function(a, b){ return a + b; }); } ``` ```javascript // ES6 - Same result as above, cleaner and more succinct const sumAll = (...args) => args.reduce((a, b) => a + b); ``` *An arguments exotic object is an exotic object whose array index properties map to the formal parameters bindings of an invocation of its associated ECMAScript function.* *ECMAScript Specification Section 9.4.4* --- # Practical Uses - Transformations ```javascript var listItems = ['Subaru', 'Mazda', 'Saturn']; // Inside React component (
{listItems.map((item, index) =>
{item}
)}
) //
//
Subaru
//
Mazda
//
Saturn
//
``` --- # Practical Uses - Working with database record sets ```javascript var recordSet = [ { ID: 111, ClientID: 'CL00111', Priority: 1}, { ID: 232, ClientID: 'CL00232', Priority: 0}, { ID: 533, ClientID: 'CL00533', Priority: 3}, { ID: 567, ClientID: 'CL00567', Priority: 1}, { ID: 876, ClientID: 'CL00876', Priority: 2} ]; var highPriority = recordSet.filter(record => { return record.Priority >= 2; }); // [{ ID: 533, ClientID: 'CL00533', Priority: 3}, // { ID: 876, ClientID: 'CL00876', Priority: 2}] ``` --- # Resources [MDN - JavaScript Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) [ECMAScipt Specification - Arguments Exotic Object](http://www.ecma-international.org/ecma-262/6.0/#sec-arguments-exotic-objects) [JavaScript Array Explorer by Sarah Drasner](https://sdras.github.io/array-explorer/) --- class: center, middle fin