JavaScript Tutorial : Array and Array Methods

JavaScript Array

Array is like a drawer containing different things. You can open the drawer and pick things, count what is inside the drawer and even add to the contents there. That is basically what an array is all about.

It is a data structure composed of collection of elements which can be strings, numbers, or variables. These elements are assigned a key or what is known as array index. The elements are those items or data stored in the array. Array is useful in storing large data. Suppose you want to store details of hive users. Instead of assigning a variable for all the users which will enter hundreds of thousands variables, you can just store them in a single array. The names can then be accessed using the indexnumber.

Creating an array

You can create an array in JavaScript as seen below

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
console.log(blockchains);

jiqc4j0ui6qg8oikvofd
pejsxecd2bdqwejm6loh
You can see how it looks like in the console. That is an array with values Hive, Ethereum, Eos, and Steem

Accessing Array elements

You can access the Array elements by using the indexnumber and the index of the first element of an array is 0.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
console.log(blockchains);
console.log(blockchains[1]);

This will return Ethereum in the search console. Hive will have the index 0, Ethereum index 1, Eos index 2, and Steem index 3.
You can also add to the elements of the array by using
array is 0.
t3nquzkvkyv7hh63fp5s
ltaekvi7vgovhjlyqi5m

Adding Array elements


var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem']; blockchain[4] = 2; blockchain[5] =’Bitcoin’ console.log(blockchains); console.log(blockchains[5]);

iyqhaeszi87yjbwfvhyu
gzm30dgwaryji96vn5nc
The above code simply shows we are adding the number 2 to represent the array index 4 and bitcoin to represent array index 5. That is a simple way of adding elements to arrays.

Array Length

You can know the number of elements in an array by using the Array.length code.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
blockchain[4] = 2;
blockchain[5] =’Bitcoin’
console.log(blockchains);
console.log(‘The number of elements in the array is ’ + blockchains.length);

oooh4oepn5ezuoium3on
zfgrufkcvugakdicvyhd
This will tell us the number of elements and it starts counting from 1 not zero like the Array index. This mean the number of elements will be 6.

Array Methods

We will look at some of the Array methods that can be applied to Arrays

Concat

This joins two or more arrays together and then return a copy of the combined arrays

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
var founders = ['CZ', 'Dan', 'Lee', 'Larsen'];
var aggregation = blockchains.concat(coins, founders);

console.log(aggregation)

z4fl4ruubrs5qto4klbu
tylw4unbgtsur1vdjsq8
You can see the result above. The arrays elements have been joined together.

copyWithin

This copies array elements within an array into a specified position.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
blockchains.copyWithin(0,1,2)

console.log(blockchains)

p0j0ocn44klst7ft5c3z
il62uefbdapis684wpbz
The copyWithin(0,1,2) simply represents the parameters
* target the index position you want to copy to
* the index position to start copying from
* the index position to stop the copying
This mean I want the target position to be index 0 and I will start copying from index position 1 and stop at 2. That is why you see that Ethereum has overwritten Hive.

Fill

The fill method will fill the Array elements with a static value specified as shown below

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

blockchains.fill('Graphene');
coins.fill('ETH', 0, 2);
console.log(blockchains);
console.log(coins);

sm2y5ps2ttfrzmsduvnd
r3mbrktfwo4wdjndy8qi
fill() takes in 3 parameters
* The static value that will fill the array
* The start index to start filling the array
* The end index to stop filling the Array

Filter

ei0vrr7kgbd0ddcxk02w
This returns an array of all the elements that matches the Hive.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

function checkSimilarity(same){
return same =='Hive';
}
var check = blockchains.filter(checkSimilarity)
console.log(check);

h5ma03zr89qi6zrvonya

Find

Find returns the value of the Array element that matches the value Hive as specified in the checkSimilarity function.
pv0gnamkvkospgyglc9f
ucokyslhkrhzliz3gk0t

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

function checkSimilarity(same){
return same =='Hive';
}
var check = blockchains.find(checkSimilarity)
console.log(check);

findIndex

um3wcptvcwqbvypkgrnn
h8yqogfopotlijl5er7m
This returns the index of the element in an array that matches ‘’Hive’’. This is important when you need to find the index of a particular element in an array. You can use this method for it.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

function checkSimilarity(same){
return same =='Hive';
}
var check = blockchains.findIndex(checkSimilarity)
console.log(check);

forEach

The forEach assigns a function for each array elements. It runs through the array elements and run the function for each of them.
Below is a code that finds the sum of all the numbers in an array. You initialize the sum variable and assign value of 0. The add() function is simply saying add 0 to the element, then assign the result to the variable sum.
When we now say price.forEach(add);, this means 0+20 will run and assign 20 to the sum variable, then 20+30 will run and assign 50 to the sum variable, then 50+50 will run and assign 100 to the sum variable, then 100_60 will run and assign 160 to the sum variable then finally 160+110 will run and assign 270 to the sum variable which is displayed in our console.
njesadcquotnff7krpuh
wpo695l6qfvdalnxiw2b
You can modify the function to whatever to the array elements via the forEach method.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
var sum = 0;
var price = [20, 30, 50, 60, 110];

price.forEach(add);
function add(element){

sum += element;

}

console.log(sum);

From

The from() method creates an array from a string as shown below. The string I am a programmer will be turned into an array of length 17 elements.
m6zrl8leeq6s95bo8vvj
q1xohgzfbuv61bfgn3sp

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

var myString = Array.from("I am a programmer");

console.log(myString);

Join

n82ewoddqjdiahdkpciq

This converts elements of an array into a string. It is like the opposite of from().
boagtbhequuxhooda4du

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

var toString = coins.join()

console.log(toString);

Includes

The includes() method check if an array contains a specified element. It will return true if the element is present and false if it is absent.
iqhmvw052egbtcdlot0q
rbkmdmgcy07rru5cynhv

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

var check = (blockchain.includes(‘Eos’));
var checkagain = (blockchain.includes(‘BCH’));

console.log(check);
console.log(checkagain);

Map

vdqcxldyst4gdyloqyaa
eko8siuiyqlak2kgbhch
Map creates a new array with the results of whatever function applied to the original array elements.
Below returns an array with the cuberoot of the numbers arrays. You can see that the original numbers arrays is not modified, instead, the result is assigned and displayed by the new array cubeRoot.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
var numbers = [8, 27, 64, 125, 216]
var cubeRoot = numbers.map(Math.cbrt);

console.log(numbers);
console.log(cubeRoot);

Other Array methods will be looked into in the next part
References
Ref 1 | Ref 2

1 Trackback / Pingback

  1. JavaScript Tutorial : Array and Array Methods 2 [Video] - Nairatag Programming

Leave a Comment