Javascript Array Manipulation

by Ridwan Fadilah on Apr 29, 2020 Javascript Array Manipulation

Learning about the Javascript array manipulation, understanding by examples and usages

What is an array in programming? The array is a data type consisting of a collection of elements (value ??or variable), and each element has an index. Simply, the array is a variable that more powerful. Why? because arrays can hold more than one value. The array can contain string, integer, boolean, and function in one variable.

see the following syntax:

 

   var myArray = ['string', 2, false, myFunction];

    or

    var myArray = [];
    myArray = ['string', 2, false, myFunction];

We can have an array in the array. It's called the multidimensional array. Here's the syntaxis:

    var myArray = ['string', 2, false, myFunction, [1,2,3]];


Creating an Array

We have several ways to create an array in javascript. The same as an example before, we can directly give a value or variable into an array. Here's the first way to create an array in javascript.

Example:

    var myArray = ['a', 2, true];

we can use the console to see the result:

      console.log(myArray);

here's the full code:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var myArray = ['a', 2, true];
            console.log(myArray);
        </script>
    </body>

    </html>

here's the result:

Javascript Array Manipulation - Example 1

But the console displays this as an object in javascript.

The number shown is as an index (index 0 - 2). The index is referring to the value that we have. The index always starts at 0 (zero).
If we want to the console only displaying one value, we can use the index to do it.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var myArray = ['a', 2, true];
            console.log(myArray[3]);
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 2


This is a second way to create an array.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var myArray = [];
            myArray[0] = ['index 0'];
            myArray[1] = ['index 1'];
            myArray[2] = ['index 2'];

            console.log(myArray);
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 3

Important to note, if we want to use this way, the index must be sequential. If it not sequent, the value will become undefined or empty.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var myArray = [];
            myArray[0] = ['index 0'];
            myArray[1] = ['index 1'];
            myArray[2] = ['index 2'];
            myArray[5] = ['index 5'];

            console.log(myArray);
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 4


Removing Array Items

If we want to remove an item of the array in javascript, the index is needed.

Note: This is not the right way. I'll show you in the next example.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var myArray = ['a', 2, true];
                myArray[1] = undefined;

            console.log(myArray);
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 5


Displaying Array

We'll try to display the array in the right way. First, we'll use javascript looping and display the element of the array by one.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var myArray = ['index 0', 'index 1', 'index 2'];

            for (var i = 0; i < myArray.length; i++) {
                console.log(myArray[i]);
            }
        </script>
    </body>

    </html>

Now the array is shown in the right way. Not shown as an object like the example before:

Javascript Array Manipulation - Example 6


The Method in Javascript Array

You can use a method in the array. The javascript has some methods that can be used in an array.
First, we'll try to use the "join" method to join all the elements of an array, to make it as a string.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var arr = ['Tea', 'Coffee', 'Milk'];
            console.log(arr.join());
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 7

You can change the separators of the string if you don't want to use the commas (","):

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var arr = ['Tea', 'Coffee', 'Milk'];
            console.log(arr.join(' - '));
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 8

That's the example of the "join" method. Now, let's try the "push" & "pop" method. The "push" method is used to append an element that will be placed in the last of an array. To use it, we can use the simple way.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var arr = ['Tea', 'Coffee', 'Milk'];
            arr.push('Boba');

            console.log(arr.join(' - '));
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 9

With the "push" method, you can append some elements like this:

    arr.push('Boba', 'Yogurt', 'Lemon');


The "pop" method is the opposite of the "push" method. The "pop" will remove the last element from an array.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var arr = ['Tea', 'Coffee', 'Milk'];
            arr.pop();

            console.log(arr.join(' - '));
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 10


Now, we'll try to use the "shift" and "unshift" method. 

The "shift" and "unshift" method is the same as "pop" and "push" but it works with the first element in an array.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var arr = ['Tea', 'Coffee', 'Milk'];
            arr.unshift('Lemon');

            console.log(arr.join(' - '));
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 11


The "shift" will remove the first element.

Example:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Javascript Array</title>
    </head>

    <body>
        <script>
            var arr = ['Tea', 'Coffee', 'Milk'];
            arr.shift();

            console.log(arr.join(' - '));
        </script>
    </body>

    </html>

result:

Javascript Array Manipulation - Example 12

The "shift" and "pop" completely eliminate the array element. It's not like the example before that using the "undefined" to removing an element.

That's the basic usage example of the array in javascript. You can find the full source code of these examples on our GitHub.

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thanks!

Loading…