Arrays

• An array will be used to combine several related items into one variable
• These items kan we of anny kind like strings, numbers, objects, ...
• Similar to other variables, arrays don't need to be declared and can be initialized immediately e.g: let students = []
• Use an index (between square brackets [] and started from 0) to read/overwrite an array element, as in students[1] = 'John Doe';
• An array can be initialized at once by putting the element values (separated by commas) between square brackets [], as in let teachers = [ 'Michaël Cloots', 'Maartje Eyskens', 'Jan Janssen', 'Patrick Verhaert' ];
• You can loop over all elements of an array using a forEach() structure
• The property length can be used to get the number of elements in an array

REMARKS

• Unlike most other programming languages, JavaScript does not support associative arrays
• It's common practice to use a plural noun as array variable name (as an array usually contains multiple elements)

Frequently used properties

property	description
length (opens new window)	the length of a array

Frequently used methodes

• Some array methodes with online examples:

methode	description
toString() (opens new window)	convert array to a comma separated sting
concat() (opens new window)	joins two or more arrays
push() (opens new window)	add a new element to the end of an array
unshift() (opens new window)	add a new element at the beginning of an array
shift() (opens new window)	remove the first element from an array
pop() (opens new window)	remove the last element from an array
splice() (opens new window)	remove, replace or add elements to an array
slice() (opens new window)	returns a shallow copy of a portion of an array into a new array
find() (opens new window)	returns the first found element in an array
indexOf() (opens new window)	returns the index of the first found element in an array
lastIndexOf() (opens new window)	returns the index of the last found element in an array
findIndex() (opens new window)	returns the index of the first found element tha pass a test
every() (opens new window)	returns true if every element in an array pass a test
some() (opens new window)	returns true if one or more elements in an array includes a value
includes() (opens new window)	returns true if one or more elements in an array pass a test
fill() (opens new window)	fill one or more elements in an array with a static value
from() (opens new window)	creates an array from an object literal
reduce() (opens new window)	reduce the values of an array to a single value (going left-to-right)
reduceRight() (opens new window)	reduce the values of an array to a single value (going right-to-left)

• Some advanced but very useful methodes (aka higher-order functions) with extra examples:

methode	description
sort() (opens new window)	sort the order of the elements from lowest to highest
reverse() (opens new window)	sort the order of the elements from highest to lowest
map() (opens new window)	creates a new array populated with the transformed values inside the callback function
filter() (opens new window)	creates a new array populated with the items that pass the test inside the callback function

Sorting arrays

• The sort() method, without compare function, sorts an array alphabetically
• Without comparing function, every element in the array is converted to a sting, and the sorted according to each character's UTF-16 code value (opens new window)

const a1 = 'A';
const a2 = 'a';
const zero = '0';
console.log(a1.charCodeAt(), a2.charCodeAt(), zero.charCodeAt()); // 65, 97, 48

• With a comparing function (parameters typical called a and b) the sort order is:
  • compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other
  • compareFunction(a, b) returns a negative number, sort a before b
  • compareFunction(a, b) returns a positive number, sort b before a
• Tip: this is also known as a three-way comparison (opens new window) function

Array of strings (case-sensitive)

const names = ['John', 'bob', 'Ziggy', 'Adam', 'David'];

console.log(names.sort());
// Adam, David, John, Ziggy, bob
// Z (code 90) comes before b (code 98)

console.log(names.reverse());
// bob, Ziggy, John, David, Adam

Array of strings (case-insensitive)

const names = ['John', 'bob', 'Ziggy', 'Adam', 'David'];

const namesSorted = names.sort((a, b) => {
    if (a.toLowerCase() < b.toLowerCase()) return -1;
    if (a.toLowerCase() > b.toLowerCase()) return 1;
    return 0;
});
console.log(namesSorted);
// Adam, bob, David, John, Ziggy

const names = ['John', 'bob', 'Ziggy', 'Adam', 'David'];

const namesSorted = names.sort((a, b) => {
    if (a.toLowerCase() < b.toLowerCase()) return 1;
    if (a.toLowerCase() > b.toLowerCase()) return -1;
    return 0;
});
console.log(namesSorted);
// Ziggy, John, David, bob, Adam

Array of numbers

• Because numbers are also converted to strings, sort() without a compare function does not give the desired result

const numbers = [50, 1, 6.6, 8.3, 6, 30];

console.log(numbers.sort());
// 1, 30, 50, 6, 6.6, 8.3

• Inside the compare function numbers are not converted

const numbers = [50, 1, 6.6, 8.3, 6, 30];

const numbersSorted = numbers.sort((a, b) => a - b);
console.log(numbersSorted);
// 1, 6, 6.6, 8.3, 30, 50

const numbers = [50, 1, 6.6, 8.3, 6, 30];

const numbersSorted = numbers.sort((a, b) => b - a);
console.log(numbersSorted);
// 50, 30, 8.3, 6.6, 6, 1

Array of objects

const scores = [
    { name: 'John', JavaScript: 15, PHP: 12 },
    { name: 'Adam', JavaScript: 10, PHP: 17 },
    { name: 'David', JavaScript: 8, PHP: 6 },
    { name: 'Ziggy', JavaScript: 14, PHP: 8 },
];

const sortedScores = scores.sort((a, b) => a.JavaScript - b.JavaScript);
console.log(sortedScores);
/*
{ name: 'David', JavaScript: 8, PHP: 6 },
{ name: 'Adam', JavaScript: 10, PHP: 17 },
{ name: 'Ziggy', JavaScript: 14, PHP: 8 },
{ name: 'John', JavaScript: 15, PHP: 12 },
*/

const scores = [
    { name: 'John', JavaScript: 15, PHP: 12 },
    { name: 'Adam', JavaScript: 10, PHP: 17 },
    { name: 'David', JavaScript: 8, PHP: 6 },
    { name: 'Ziggy', JavaScript: 14, PHP: 8 },
];

const sortedScores = scores.sort((a, b) => b.PHP - a.PHP);
console.log(sortedScores);
/*
{ name: 'Adam', JavaScript: 10, PHP: 17 },
{ name: 'John', JavaScript: 15, PHP: 12 },
{ name: 'Ziggy', JavaScript: 14, PHP: 8 },
{ name: 'David', JavaScript: 8, PHP: 6 },
*/

const scores = [
    { name: 'John', JavaScript: 15, PHP: 12 },
    { name: 'Adam', JavaScript: 10, PHP: 17 },
    { name: 'david', JavaScript: 8, PHP: 6 },
    { name: 'Ziggy', JavaScript: 14, PHP: 8 },
];

const sortJavaScript = scores.sort((a, b) => {
    if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
    if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
    return 0;
});
console.log(sortJavaScript);
/*
{ name: 'Adam', JavaScript: 10, PHP: 17 },
{ name: 'david', JavaScript: 8, PHP: 6 },
{ name: 'John', JavaScript: 15, PHP: 12 },
{ name: 'Ziggy', JavaScript: 14, PHP: 8 },
*/

Shuffle array

• You can use the three-way comparison to shuffles (randomly reorders) elements of the array
• a and b can be omitted inside the comparing function

yourArray.sort(() => 0.5 - Math.random());

Copy (clone) array by value

• By default, arrays are copied by reference, not by value
• This means that when you set array2 = array1 both arrays point exactly to the same location in memory
• When, for example, adding an element to array1 the new value is also available in array2

const numbers1 = [4, 50, 12, 66];
const numbers2 = numbers1;
numbers1.push(1000);

console.log(numbers1);
// 4, 50, 12, 66, 1000

console.log(numbers2);
// 4, 50, 12, 66, 1000

• Use one of these methodes to clone an array (copy an array by value)
  • old way: const array2 = array1.slice()
  • ES6 way: const array2 = [...array1] (spread operator (opens new window))

const hands1 = ['✋', '✌', '✌'];
const hands2 = [...hands1];

hands1.push('🤞');
console.log(hands1);
// '✋', '✌', '✌', '🤞'

console.log(hands2);
// '✋', '✌', '✌'

Transform with map()

• The map() method creates a new array will take every returned value from the callback function and creates a new array using those values
• The callback function passed to the map() method accepts 3 arguments: element, index, and the array itself
• Inside the callback function you can 'transform' every individual element (change a value, add extra key/values or remove a key/value)
• Open es6/arrays/map.html and es6/arrays/map.js

<div id="score"></div>

const scores = [
    { name: 'John', score: 15 },
    { name: 'Adam', score: 10 },
    { name: 'David', score: 8 },
    { name: 'Ziggy', score: 14 },
];

// sort array by score and transform each item
const transformedArray = scores
    .sort((a, b) => b.score - a.score)
    .map((item, index) => {
        return {
            id: index + 1,
            name: item.name.toUpperCase(),
            score: `${item.score * 5}%`,
            pass: item.score >= 10,
        };
    });

// log transformed array
console.table(transformedArray);

let output = '';
// loop over each item inside the transformed array
transformedArray.forEach((item) => {
    output += `<div class="${item.pass ? 'border-green' : 'border-red'}">
                <b>${item.id} - ${item.name}</b>: score ${item.score}
              </div>`;
});
document.getElementById('score').innerHTML = output;

Filter()

• The filter() method creates a new array will take every value that pass the test inside the callback function
• The callback function passed to the filter() method accepts 3 arguments: element, index, and the array itself
• Open es6/arrays/filter.html and es6/arrays/filter.js

<h4>Pass</h4>
<div id="pass"></div>
<h4>Fail</h4>
<div id="fail"></div>

const scores = [
    { name: 'John', score: 15 },
    { name: 'Adam', score: 5 },
    { name: 'David', score: 8 },
    { name: 'Ziggy', score: 14 },
];

// sort scores[] by score
scores.sort((a, b) => b.score - a.score);

// filter scores >= 10
const passedArray = scores.filter((item) => item.score >= 10);
// filter scores < 10
const failedArray = scores.filter((item) => item.score < 10);

// log passedArray[] and failedArray[]
console.table(passedArray);
console.table(failedArray);

// loop over passedArray[]
let output = '';
passedArray.forEach((item) => {
    output += `<div class="border-green"><b>${item.name}</b>: score ${item.score * 5}%</div>`;
});
document.getElementById('pass').innerHTML = output;

// loop over failedArray[]
output = '';
failedArray.forEach((item) => {
    output += `<div class="border-red"><b>${item.name}</b>: score ${item.score * 5}%</div>`;
});
document.getElementById('fail').innerHTML = output;

Examples

Bingo

• Bingo (opens new window) is a game of probability in which players mark off numbers between 1 and 75 on cards as the numbers are drawn randomly by a caller
• The winner being the first person to mark off all their numbers
• Open es6/arrays/bingo.html and es6/arrays/bingo.js

• Every click on button#dropBall, picked a random number between 1 and 75 is picked from an array and append to div#bingo

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <style>
            #bingo div {
                display: inline-block;
                width: 50px;
                height: 50px;
                line-height: 50px;
                margin: 0.25rem;
                text-align: center;
                border: 10px solid #863637;
                background-color: wheat;
                box-shadow: inset 0 0 0.4em 0 rgba(0, 0, 0, 0.3);
                border-radius: 50%;
                font-size: 1.5rem;
                font-weight: bold;
                color: #863637;
            }
        </style>
    </head>
    <body>
        ...
        <p><button type="button" id="dropCoin" class="tertiary">drop next coin</button></p>
        <div id="bingo" class="border-gray"></div>
        ...
    </body>
</html>

• Line 6 to 7: fill the array numbers[] with numbers from 1 to 75
• Line 10: shuffle the array numbers[] so the numbers are in a random order
• Line 15 to 20: when clicking the button, the first item af the array is appended to div#bingo and removed from the array
• Line 22: disable the button if the is empty

const numbers = [];
let output = '';

// fill numbers[] with numbers from 1 to 75
for (let i = 0; i < 75; i++) {
    numbers.push(i + 1);
}

// shuffle numbers[]
numbers.sort(() => 0.5 - Math.random());
console.log(numbers);

// add event listener to #dropBalldropCoin
document.getElementById('dropCoin').addEventListener('click', (e) => {
    // get first number from numbers[] ...
    output += `<div>${numbers[0]}</div>`;
    // ... and remove this number from numbers[]
    numbers.shift();
    // update #bingo
    document.getElementById('bingo').innerHTML = output;
    // disable button if numbers[] is empty
    if (numbers.length === 0) e.target.setAttribute('disabled', true);
});

Change circle background

• In this example, we use the keyboard to change the color of div#circle
• You can find the code for every key on your keyboard on https://keycode.info/ (opens new window) (look at event.code)
• Open es6/arrays/circleBackground.html and es6/arrays/circleBackground.js

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <style>
            #circle {
                width: 300px;
                height: 300px;
                line-height: 300px;
                font-size: 2rem;
                text-align: center;
                background-color: lightgray;
                border: 1px solid gray;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        ...
        <div class="border-gray">
            <p>Press a key (r, g, b, y, p or o) to change the color of this circle.</p>
        </div>
        <div id="circle">lightgray</div>
        ...
    </body>
</html>

const circle = document.getElementById('circle');
const keys = [
    { code: 'KeyR', color: 'indianred' },
    { code: 'KeyG', color: 'palegreen' },
    { code: 'KeyB', color: 'lightblue' },
    { code: 'KeyY', color: 'lightyellow' },
    { code: 'KeyP', color: 'mediumpurple' },
    { code: 'KeyO', color: 'orange' },
];

// add event listener on keydown
window.addEventListener('keydown', (e) => {
    // e.code returns the code of the key pressed
    const keyHitCode = e.code;
    console.log('keyHitCode', keyHitCode);
    const keyHit = keys.find((key) => key.code === keyHitCode);
    // if the keycode is in keys[], change the background color
    if (keyHit) {
        circle.style.backgroundColor = keyHit.color;
        circle.innerText = keyHit.color;
    }
});

Higher order functions

• link1 (opens new window)
• link2 (opens new window)

References

• Array class@Mozilla (opens new window)
• Array class@W3Schools (opens new window)