View on GitHub

Matt's homepage

Bookmark this to keep an eye on new things I am learning.

Arrays

Return Home

Define and initialise

// the square brackets indicate an array. Nothing inside means empty array
let newArray = []; 
console.log(`Empty array is ${newArray.length} elements long`);  // returns 0
let populatedArray = [1,2,3,"a","b","C"];  // Assigns array to variable
console.log(`Populated array is ${populatedArray.length} elements long`);  // returns // array[n] - returns an array value at a given position (The first position in an array is 0)

^ back to top ^

Using arrays

Return element at position

Array are 0 based and elements can be address discretely. array[position]

var myArray = [1,2,3,4,5];   // define a variable and initialise it with an array
console.log('4th element is', myArray[3]);   // 4

^ back to top ^

Serealise/Deserialise arrays

Used for sending or receiving data from restful APIs

// Serialise - object to string
let fruits = ["Banana", "Orange", "Apple", "Mango", "Advocado"];
let serialFruit = JSON.stringify(fruits);
console.log(`String: 
${serialFruit}`);

// De-Serialise - Turn into an object
let deSerialFruit = JSON.parse(serialFruit);
console.log('Object:');
console.log(deSerialFruit);

^ back to top ^

Array functions

Array length

You can get the length of an array, including strings. (Strings are actually an array of characters)

const myConst = "Hello there world"
console.log(myConst.length);  // prints 18
const myArray = [0,1,2,3];
console.log(myArray.length); // prints 4

^ back to top ^

Includes

Reurns a boolean if a given string is present in another

const myConst = "Hello world";
console.log(myConst.includes("world"));   // returns true

^ back to top ^

Split

Splits a string into an array of word, delimetered by a given string

const myConst = "Hello world";
console.log(myConst.split(" "));   // prints ["Hello", "world"]

^ back to top ^

Join

Array to string with join()

// array.join(delimeter) - Moves the elements in a array into a delimetered string
let petArray = ['Dog', 'Cat', 'Bird'];
console.log(petArray.join());   // prints a string "Dog,Cat,Bird"

^ back to top ^

Array Push

Push adds a new array element at the end of an array

let newArray = [];
newArray.push("hello");  
console.log(newArray.length);  // returns 1

^ back to top ^

Array Pop

Removes and returns the last value in an array

let newArray = [1,2,3];
let popValue = newArray.pop();  // newArray = [1,2] and popValue = 3
console.log(popValue);  // prints 3

^ back to top ^

Array Reverse

Reverses the items in an array

console.log(populatedArray.reverse()); // prints [ 'C', 'b', 'a', 3, 2, 1 ]

^ back to top ^

Flatten an Array

Elevate arrays within arrays to the top level. array.flat(depth)

const a = [1,2,[1,2],3,4];
console.log('As is',a);    
console.log('Flattened', a.flat(1));

^ back to top ^

Array Sort

array.sort() - sorts an array

No parameters

With no parameters for the sort function, each array element is converted to a string, then compared alphbetically. This is fine for text elements, but no good for numerics.

// sorting numbers - does not work as you expect
let numbersArray = [155,21,3,4,5,15,1,2, 15];
console.log(numbersArray.sort());  // Returns [1, 15, 15, 155, 2, 21,  3, 4, 5 ]

// sorting string - works as expected
let fruits = ["Banana", "Orange", "Apple", "Mango", "Advocado"];
console.log(fruits.sort());  // Returns [ 'Advocado', 'Apple', 'Banana', 'Mango', 'Orange' ]

^ back to top ^

Sorting with a function

Sorting, using a function takes two values, a and b (the first value, and second value to compare).

// sort numbers function
function compareNum(a, b) {
    if ( a < b ) {
        return -1;
    }
    else if ( a > b ) {
        return 1;
    }
    // a and b must be equal
    return 0;
}
// sort our numbers array using our new compareNum function
console.log(numbersArray.sort(compareNum));  // prints as expected [1, 2, 3, 4, 5, 15, 15, 21, 155]

^ back to top ^

Is Array

Return true if is an array.

Dont use TypeOf(array) to test for arrays as this would return an Object.

let petArray = ['Dog', 'Cat', 'Bird'];
console.log(Array.isArray(petArray));  // returns true

^ back to top ^

Empty an array

let petArray = ['Dog', 'Cat', 'Bird'];
petArray.length = 0;
console.log(petArray);  // returns []

^ back to top ^

Concatenate arrays

Merge arrays together

let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr1.concat(arr2); // merges arr2 into arr1 [ 1, 2, 3, 4, 5, 6 ]

^ back to top ^

Itterating arrays

Methods which move through all the elements in an array

Filter

Itterate array using a filter to return a new array subset

// Retruns a new array of items which match certain criteria.
let sampleArray = ["cat", "dog", "cat", "dog", "cat", "dog", "dog", "dog"];
// returns a new array of only cats
const catArray = sampleArray.filter((item) => { return item == "cat" });

^ back to top ^

Map

Itterate array with map, to mutate all or some elements into a new array

// returns an array of all birds
let sampleArray = ["cat", "dog", "cat", "dog", "cat", "dog", "dog", "dog"];
const birdArray = sampleArray.map((item) => { return "bird" });  

// returns an array of birds and cats (replaces dog with bird, using ternary oper)
const catBirdArray = sampleArray.map((item) => (item=="cat") ? "cat" : "bird" );

^ back to top ^

For-Each

For each - itterates by element in array

let fruits = ["Banana", "Orange", "Apple", "Mango", "Advocado"];

fruits.forEach(f => {
    console.log(f);
});

^ back to top ^

Entries itterator

Entries returns an iterator object with key/value pairs from an array position/value

const cars = ["Commodore", "Civic", "G-Wagon", "Supra"];

// Create an Iterator
const list = cars.entries();

// List the Entries
for (let x of list) {
  console.log(x);
};

^ back to top ^

Keys itterator

Keys returns an iterator object with key of an array

// Create an Iterator
const keyList = cars.keys();

// List the Entries
for (let x of keyList) {
  console.log(x, cars[x]);
};

^ back to top ^

Every

Executes a function for each array element - returns true if all elements are true, else false

const ages = [32, 33, 16, 40];

// Create a Test Function
function checkAge(age) {
  return age > 18;
}

// Are all ages over 18?
console.log(ages);
console.log('All over 18?', ages.every(checkAge));

^ back to top ^

Reduce

Reduce executes a reducer function for all array elements to return a single value

const numbers = [15.5, 2.3, 1.1, 4.7];
// calls the reducer fuction with the initial value of 0
console.log('Total is:', numbers.reduce(getSum, 0));

// reducer function - takes an initialValue (total) and the current value
function getSum(total, currentValue) {
  console.log(total, currentValue)
  return total + Math.round(currentValue);
}

^ back to top ^

For-of

Itterates over values of an array

const colours = ["purple nurple", "toejam teal", "bum brown"];
for (const col of colours) {
    console.log(col);
}
console.log('for-of done');

^ back to top ^

Not arrays, but similar

Map Object

The Map object holds in-memory key-value pairs. (Not to be confused with array.map())

let mm = new Map()

// can add any value type (key,value)
mm.set("matt",1);
mm.set("lance", "potato");
mm.set("joe",{safeWord: 'pineapple', fruit: 'apple', implement: 'pen'})

// check for a key with 'has'
console.log('item present:', mm.has("lance"));  // returns true

// iiterable
mm.forEach(m => console.log('item value in map:', m));

// get size
console.log('size:', mm.size);

// get value
console.log('value of lance:', mm.get("lance"));

// delete key
mm.delete("lance");
console.log('lance key present:', mm.has("lance"));   // false

^ back to top ^

Set

Only contains unique values.

let st = new Set();

st.add('apple');
st.add(5);
st.add('pen');
st.add('pen'); // not added as duplicate
console.log(st);

st.delete('apple'); // delete entry from set
console.log(st);

st.clear(); // clears entire set
console.log(st);

st.add('pen');
console.log(st.has('pen')); // item is preset

console.log(st.size); // get the size of the set

^ back to top ^