# 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
 
        Copied!

1
2
3
4

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
 
        Copied!

1
2
3
4
5
6
7
8

# 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
 
        Copied!

1
2
3
4
5
6
7
8
9

# 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
 
        Copied!

1
2
3
4

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
 
        Copied!

1
2
3
4
5

# 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 },
*/
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 },
*/
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 },
*/
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 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());
 
        Copied!

# 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
 
        Copied!

1
2
3
4
5
6
7
8
9

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);
// '✋', '✌', '✌'
 
        Copied!

1
2
3
4
5
6
7
8
9

# 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>
 
        Copied!

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;

 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 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>
 
        Copied!

1
2
3
4

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;
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 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>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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);
});
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 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>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
    }
});

 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Higher order functions

# References

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