Creating Arrays and Fetching Elements in Javascript.

Arrays are special form of objects that allows the storage of several data in a specific variable. In other words, arrays are fundamental data structure used to store an ordered collection of items under a single variable name. They provide a powerful and versatile way to manage multiple values.

There are basically 2 ways of creating arrays in Javascript.

1. The Array Constructor: Here, we use the new Array() syntax to create an array. However, it is less commonly used. An example is as follows:

let tech = new Array("Javascript", "Java", "C++");

2. Array Literal: This is the most common way to create arrays. Here, we use square brackets [] with a comma-separated list of elements inside it. Example:

let numbers = [1, 2, 3, 4, 5];
let tech = ["Javascript", "Java", "C++"];

Another example,

let values = [5,7,8];

console.log(values);


//[5,7,8]

It is also possible to perform many functions using arrays. For instance, let’s look for the length of the above ;

let values = [5,7,8];

console.log(values.length);

//3

The length is 3 because there are 3 values in the above.

We can assign values for later purpose to an array by using the ‘push’ element .

let values = [];

values.push(5);

console.log(values);

//5

We can also assign multiple values for later using this ;

let values = [];

values.push(5);
values.push(7);


console.log(values);

//5,7

What if we want to fetch one particular value from an array of values?

If we know the exact index of the value we want to fetch, it’s best to use the Bracket Notion approach. It’s important to note that arrays are zero-indexed, so the first element has an index of 0, the second element has an index of 1, and others follow in the same format.

In the below example, we are fetching the second value;

let values = [5,7,8];

console.log(values[1]);

//7

Different Types of Data in Array

Arrays in Javascript are very flexible and can store elements with different data types within the same array.

For Strings,

let names = ['Aisha', 'Amina', 'Aliya', 'Azeemah'];

console.log(names);


//[‘Aisha’, 'Amina’, 'Aliya’, 'Azeemah’]

We can also add values to the above by:

let names = ['Aisha', 'Amina', 'Aliya', 'Azeemah'];
names[4] = 'Asmaa';

console.log(names);



//[‘Aisha’, 'Amina’, 'Aliya’, 'Azeemah’, 'Asmaa']

We could have an array containing different types of data eg. numbers, booleans, strings and even objects.

let data = ['Aisha', 7, {tech: 'JS'},
function(){console.log("Hello World");}
];

console.log(data);
data[3]();


//['Aisha', 7, {tech: 'JS'}, [Function(anonymous)] ]
//Hello World

Array Methods in Javascript.

There are different built-in methods for working with arrays in Javascript.

We already mentioned the ‘push’ element earlier.

1.Push method — The ‘Push’ element mostly returns a data . It adds up the value(s) at the end of an array.

let data = [5,7,8,9];
console.log(data.push(2));

console.log(data);

//5
//[5,7,8,9,2]

N.b: The first in the output is the length of values in the array. There are 5 values all in total, hence the output.

2. POP method - Removes the last value from an array and returns that value.

let data = [5,7,8,9];
console.log(data.pop());

console.log(data);


//9
//[5,7,8]

3. The Shift method: Shifts all the values. It removes data from the first value from an array and returns that value.

let data = [5,7,8,9];
console.log(data.shift());

console.log(data);


//5
//[7,8,9]

4. The unshift method : adds new value(s) to the beginning and returns all the values. It moves all the elements to the right hand side.

let data = [5,7,8,9];
console.log(data.unshift(2));

console.log(data);


//5
//[2,5,7,8,9]

5. The splice method: this is mostly used in between values. For instance, let’s remove two elements in the below;

let data = [5,7,8,9,4];
console.log(data.splice(2));

console.log(data);


//[8,9,4]
//[5,7]

We can also remove one element;

let data = [5,7,8,9,4];
console.log(data.splice(2,1));

console.log(data);

//[8]
//[5,7,9,4]

Removing two elements;

let data = [5,7,8,9,4];
console.log(data.splice(2,2));

console.log(data);





//[8,9]
//[5,7,4]

Note: console.log(data.splice(2,2));

The first value is the index value and the second value is the number of values we want to remove (delete count).

See you in the next lesson!