Here in this blog, I will tell you the uses cases of all five array methods and also when and where it should be used.

Array.includes

Includes is checking that if the given item is present in the array or not.

if item exist then it return true otherwise false.'

We can't use the comparison operator in the includes like greater than or less than. It is only used to test the direct values. Here is an example.

var numbers = [1, 2, 3, 4, 5];
var isNumberExist = numbers.includes(1);
console.log(isNumberExist); //true

var isNumberExist = numbers.includes(7);
console.log(isNumberExist); //false

In the above example, I am checking that if the 1 is present in the numbers array or not. in that case, it's returning true. in the same way, when I am checking for the 7, it's returning false.

Array.some

This Array method returns a callback.

This method is used to check if any of the array items is satisfying the condition, then it will return the true otherwise, it will return the false.

Let me explain the same with an example.

var numbers = [1, 2, 3, 4, 5];
var isNumberExist = numbers.some((item) => item <= 7);
console.log(isNumberExist); //true

var isNumberExist = numbers.some((item) => item >= 7);
console.log(isNumberExist); //false

In the above example, you can see that the first statement, var isNumberExist = numbers.some((item) => item <= 7); is checking that if any of the items is less than or equal to 7 is present in the array. In that case, it's returning true.

and the second statement, var isNumberExist = numbers.some((item) => item >= 7); is checking that if any of the array item is greater than or equal to 7 is present in the array or not. in that case its returning false.

Array.every

This Array method is also returning a callback.

Array.every method is just the opposite of the Array.some. It is checking that if all the items of the array is satisfying the given condition.

Explaining this with the help of an example.

var numbers = [1, 2, 3, 4, 5];
var isNumberExist = numbers.every((item) => item <= 7);
console.log(isNumberExist); //true

var isNumberExist = numbers.every((item) => item >= 3);
console.log(isNumberExist); //false

In this example, the first statement numbers.every((item) => item <= 7); is checking that all the items of the array is less than 7. So in this case it is true. All the items of the array is less than or equal to 7.

The second statement numbers.every((item) => item >= 3); is checking that if items of the array is greater than or equal to 3. so in that case only 3, 4 and 5 are greater than or equal to 3. SO it will return false.

Array.filter

This Array method will also return a callback.

Array.filter is used to filter the array on the basis of a condition. if condition satisfied then it will return an array with the matching items.

Let's understand with the code.

var numbers = [1, 2, 3, 4, 5];
var isNumberExist = numbers.filter((item) => item < 7);
console.log(isNumberExist); //[1, 2, 3, 4, 5]

var isNumberExist = numbers.filter((item) => item > 3);
console.log(isNumberExist); //[4, 5]

In the above example, the first filter statement numbers.filter((item) => item < 7);is checking that if the array has numbers which are less than 7. so in that case, all the items of the array is less than 7. so it will return an array [1, 2, 3, 4, 5].

The second statement numbers.filter((item) => item > 3); is checking that, if items of the array is less than 3, if satisfied then it will return that matched items in the form of an array. so in this case it will return the [4, 5] because only 4 and 5 are greater than 3.

Array.find

The objective of this array method is to find an item within the array, but there is a catch in that. It will not return all the matched item and it will also not return true or false.

It will return the first matched item only.

For example:

var numbers = [1, 2, 3, 4, 5];
var isNumberExist = numbers.find((item) => item < 7);
console.log(isNumberExist); //1

var isNumberExist = numbers.find((item) => item > 3);
console.log(isNumberExist); //4

In the above case, the first statement numbers.find((item) => item < 7); will return the 1 because the first matched item is 1. the second statement numbers.find((item) => item > 3); will return the 4, because the first matched item is 4 from the array which is greater than 3.

I hope now you will have some high-level idea about these array methods. If I missed anything please add that in the comments. Thanks for reading the article. :)

It called, when the entire page load including imges, css, DOM etc.

  window.onload = function(){
         console.log("Application Loaded")
  }

It is common for all of us front end developers that, sometime images are huge in size and taking time to load on the application in that case our UI shows distorted. see the screen shot.

In the above example, i used window.onload. that's why its showing loading message below the image because the images are not fully loaded.

So this winodw.onload event can solve that issue. using this event we can show a loading message or block the screen or show placeholder images till the image or file not completely loaded.

In the above image, you can see the message, "Application Loaded", it means all the resources are completely loaded now.

The complete code is here:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            function onloaded(){
                var status = document.getElementById('status');
                var loader = document.getElementById('loader')
                status.innerText = "Application Loaded";
                loader.style.display='none'
            }
            window.onload = onloaded;
        </script>
        <title>Window Onload | KMT</title>
    </head>
    <body>
       <div style="text-align: center;">
            <img src="https://images.pexels.com/photos/7974362/pexels-photo-7974362.jpeg" width="300px" height="400px"/>
            <img src="https://images.pexels.com/photos/2377915/pexels-photo-2377915.jpeg" width="300px" height="400px"/>
            <img src="https://images.pexels.com/photos/3626589/pexels-photo-3626589.jpeg" width="300px" height="400px"/>
            <h1 class="display-6" id="status">Loading in progress...</h1>
        </div>
    </body>
</html>

Download code from Git repo.

Demo

First you have to add a html5 video tag to your index.html

<video id="video"></video>

In your camera.js file add the following code snippet. First check if you browser is supporting navigator.mediaDevices.

if(navigator && navigator.mediaDevices){
    //Your browser is supporting camera API.
}else{
    console.log("camera API is not supported by your browser")
}

In the next step, we will add the camera API code.

if(navigator && navigator.mediaDevices){
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
       //use the stream to you code
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

as you can see that in the above code there is a parameter options. Its a configuration object which we will to pass to restrict or allow some of its feature. For example, to allow the audio:

{ audio: true }

to access the front camera:

{ video: { facingMode: "user" } }

to access the back camera:

{ video: { facingMode: { exact: "environment" } } }

for more information about configuration, visit this doc . We are almost done with the configuration, Now will assign stream to the video tag.

if(navigator && navigator.mediaDevices){
    const options = { audio: false, video: { facingMode: "user", width: 200, height: 200  } }
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
        var video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

So, We are almost done till now, now we will add a button to capture the image from the video and display it on canvas. This is our final camera.js file

var video, canvas, ctx;
if(navigator && navigator.mediaDevices){
    const options = { audio: false, video: { facingMode: "user", width: 300, height: 300  } }
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
        video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

function clickPhoto() {
   ctx.drawImage(video, 0,0, canvas.width, canvas.height);
 }

Here is our final index.html file.

<body>
     <div style="text-align: center;">                                                   
          <video id="video" style="text-align: center; border-radius: 20px;"></video>
        </div>
        <div  style="text-align: center;">
            <button type="button" class="btn btn-warning" onclick="clickPhoto();">Take Photo</button>
         </div>
         <div style="text-align: center;">
            <canvas id="myCanvas" width="300" height="300" style="text-align: center; border-radius: 20px;"></canvas>
        </div>
</body>

Download the final codebase repo.

See the demo here.

If you like the blog, please share it. Happy coding... :)

Joins array elements using provided separator and returns a string.

var numbers = [1, 2, 3, 4, 5];
var result = numbers.join(',');
console.log(result);
// Output: "1,2,3,4,5"

Reverse

Reverse the order of elements in the array.

var numbers = [1, 2, 3, 4, 5];
var result = numbers.reverse();
console.log(result);
// Output:  [5, 4, 3, 2, 1]

Sort

It Sorts array elements using default sorting.

var numbers = [2, 3, 1, 5, 4];
var result = numbers.sort();
console.log(result);
// Output:  [1, 2, 3, 4, 5]

Concat

Creates and return a new array that contains the concatenation of arrays on which it is invoked.

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var result = arr1.concat(arr2)
console.log(result, arr1);
// Output:  [1, 2, 3, 4, 5, 6], [1, 2, 3]

Slice

Returns a slice(subarray) of the array. but it will not affect the existing array

var arr1 = [1, 2, 3, 4, 5];
var result = arr1.slice(0,2)
console.log(result, arr1);
// Output:  [1, 2], [1, 2, 3, 4, 5]

splice

General purpose method for insertion and removal. It will affect the existing array.

var arr1 = [1, 2, 3, 4, 5];
var result = arr1.splice(0,2)
console.log(result, arr1);
// Output:  [1, 2], [3, 4, 5]

push

Append One more element to the array

var arr1 = [1, 2, 3, 4, 5];
var result = arr1.push(6)
console.log(arr1);
// Output:  [1, 2, 3, 4, 5, 6]

pop

Deletes the last element of the array and returns the element.

var arr1 = [1, 2, 3, 4, 5];
var result = arr1.pop()
console.log(result, arr1);
// Output:  5, [1, 2, 3, 4]

shift

Removes and return first element of array.

var arr1 = [1, 2, 3, 4, 5];
var result = arr1.shift()
console.log(result, arr1);
// Output:  1, [2, 3, 4, 5]

unshift

Add one more element to the beginning of the array, and will return the current length of the array.

var arr1 = [1, 2, 3, 4, 5];
var result = arr1.unshift(7)
console.log(result, arr1);
// Output:  6, [7, 1, 2, 3, 4, 5]

indexOf

* Return the index of a specified element(start from 0) otherwise return -1

var arr1 = [1,2,3,4,5];
var result = arr1.indexOf(4)
console.log(result);
// Output:  3
var result = arr1.indexOf(7)
console.log(result);
// Output:  -1