Everything in JavaScript is an object, so here is an array and an object. And like other objects, JavaScript array objects have many properties and methods. In today’s episode we will discuss the Properties and Methods of JavaScript array Object.

How do I know how many elements are in an array in JavaScript?

To find out how many elements are in an array in JavaScript, you need to use the length property of the JavaScript array object. Let’s look at an example:

How do I know which is the last element of an array in JavaScript?

You can use JavaScript’s length property to find out what is the last element of an array in JavaScript. Notice the following example:

How to customize or display the values ​​of an array in JavaScript.

In JavaScript, we can use the JavaScript for loop and length property to display the values ​​of an array as we like or customize. Notice in the example below

How do I display the values ​​of an array in JavaScript as a string?

To display the values ​​of an array as a string in JavaScript, you need to use the to String () Method or join () Method. In this case, the to String () method displays the values ​​of the default array with a comma (,), while in the join () method you can use your own separator if you want. So let’s look at an example:

<!DOCTYPE html>

<html>

<body>

<p id=”demo1″></p>

<p id=”demo2″></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = “<b>toString() Method Result:</b> “+fruits.toString();

document.getElementById(“demo2”).innerHTML = “<b>join() Method Result:</b> “+fruits.join(“*”);

</script>

</body>

</html>

How to add or remove new elements to an array in JavaScript?

JavaScript uses push, pop, shift, unshift and splice methods to add or remove an element to an array. Let’s take a look at:

JavaScript push () Method

In JavaScript, the push () method is used to add a value to the end of an array.

<!DOCTYPE html>

<html>

<body>

<button onclick=”pushValue()”>Add value to the end</button>

<p id=”demo”></p>

<p id=”demo1″></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = “<b>Current Array Before Push:</b> “+ fruits;

function pushValue() {

  fruits.push(“Kiwi”);

  document.getElementById(“demo1”).innerHTML = “<b>Current Array After Push:</b> “+fruits;

}

</script>

</body>

</html>

Note: The push () method displays the current length of the array after adding a new value to the array as the return value.

JavaScript pop () Method

JavaScript uses the pop () method to remove or delete a value from the end of an array.

<!DOCTYPE html>

<html>

<body>

<button onclick=”popValue()”>Romve value from end</button>

<p id=”demo”></p>

<p id=”demo1″></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = “<b>Current Array Before POP:</b> “+ fruits;

function popValue() {

  fruits.pop();

  document.getElementById(“demo1”).innerHTML = “<b>Current Array After Pop:</b> “+fruits;

}

</script>

</body>

</html>

Note: The pop () method returns the value that has been removed from the array as the return value.

JavaScript shift method

In JavaScript, the shift () method is used to remove or delete a value from the beginning of an array.

<!DOCTYPE html>

<html>

<body>

<button onclick=”shiftValue()”>Romve value from Start</button>

<p id=”demo”></p>

<p id=”demo1″></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = “<b>Current Array Before Shift:</b> “+ fruits;

function shiftValue() {

  fruits.shift();

  document.getElementById(“demo1”).innerHTML = “<b>Current Array After Shift:</b> “+fruits;

}

</script>

</body>

</html>

Note: The shift () method returns the value that has been removed from the array as the return value.

JavaScript unshift Method

In JavaScript, the unshift () method is used to add a value at the beginning of an array.

<!DOCTYPE html>

<html>

<body>

<button onclick=”unShiftValue()”>Add value to Start</button>

<p id=”demo”></p>

<p id=”demo1″></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = “<b>Current Array Before Unshift:</b> “+ fruits;

function unShiftValue() {

  fruits.unshift(“Guava”,”Pineapple”);

  document.getElementById(“demo1”).innerHTML = “<b>Current Array After Unshift:</b> “+fruits;

}

</script>

</body>

</html>

Note: The unshift () method displays the current length of the array after adding a new value to the array as the return value.

JavaScript Array splice () Method

In JavaScript, the splice () method is used to add a value at the beginning, end and even in the middle of an array.

However, you can remove any element of the array with the splice () method.

<!DOCTYPE html>

<html>

<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo1″></p>

<p id=”demo2″></p>

<p id=”demo3″></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo1”).innerHTML = “Original Array:<br> ” + fruits;

function myFunction() {

  var removed = fruits.splice(2, 2, “Lemon”, “Kiwi”);

  document.getElementById(“demo2”).innerHTML = “New Array:<br>” + fruits;

  document.getElementById(“demo3”).innerHTML = “Removed Items:<br> ” + removed;

}

</script>

</body>

</html>

How to merge two or more arrays in JavaScript?

The concat () method is used to merge two or more arrays in JavaScript. Let’s see:

Let us see an example of merging with three arrays:

How to create a new array in JavaScript by cutting out a specific part of an array?

To create a new array by cutting out a specific part of an array in JavaScript, you need to use the slice () method.

However, if you want, you can use the slice () method to create a new array with the rest by omitting some elements.

How to sort array elements alphabetically in JavaScript?

To sort array elements alphabetically in JavaScript, you need to use the sort () method. Let’s look at an example:

How to sort array elements in JavaScript in reverse order?

In JavaScript, you can use the reverse () method to sort array elements in reverse order.

How to sort the elements of Numerical array in JavaScript?

To sort the elements of a numerical array in JavaScript, you need to use the following technique, let’s see.

However, if you want to sort the elements of the numerical array in descending order in JavaScript, you just have to change the previous technique a little, let’s see.

<!DOCTYPE html>

<html>

<body>

<button onclick=”myFunction()”>Sort it</button>

<p id=”demo”></p>

<p id=”output”></p>

<script>

var points = [40, 100, 1, 5, 25, 10];

document.getElementById(“demo”).innerHTML = “<b>Original Array:</b> “+points; 

function myFunction() {

  points.sort(function(a, b){return b-a});

  document.getElementById(“output”).innerHTML = “<b>Sorted Array: </b>”+points;

}

</script>

</body>

</html>

How to Iterate every Item of an Array in JavaScript?

We need to use the JavaScript Iterator Method to Iterate each Item of an Array in JavaScript. Let us know about each Iterator Method one by one:

What is the function of forEach Iterator Method in JavaScript?

The function of the ForEach Iterator Method in JavaScript is to iterate into every element of an array. And so you can work with any array key and values ​​with the forEach () method if you want. So let’s look at an example:

What is the function of map () Iterator Method in JavaScript?

The function of the map () Iterator Method in JavaScript is to iterate on every element of an array and to create the opportunity to perform any operation on each element. And this is done through a callback function. So let’s look at an example:

What is the function of filter Iterator Method in JavaScript?

The function of the filter () Iterator Method in JavaScript is to iterate on every element of an array and to create the opportunity to perform any filtering operation on each element. And this is done through a callback function. So let’s look at an example:

What is the function of reduce () Iterator Method in JavaScript?

The function of the reduce () Iterator Method in JavaScript is to iterate into every element of an array and create the opportunity to convert all the elements into one value. And this is done through a callback function. So let’s look at an example:

But you can send an initial value if you want.

What is the function of reduce Right () Iterator Method in JavaScript?

In JavaScript, the work of reduce Right () Iterator Method and reduce () Method is the same. The difference is that it works from the left-side, and reduce Right works from the right-side. So let’s look at an example:

What is the function of every () Iterator Method in JavaScript?

The function of every () Iterator Method in JavaScript is to check whether each element of the array has passed a certain test. So let’s look at an example:

What is the function of some () Iterator Method in JavaScript?

Some () Iterator Method in JavaScript is much like every Method. The difference is that all the elements of every Method array have to pass a certain test, but the work of some Method is that some elements of the array can only pass a certain test. So let’s look at an example:

How to find the position of a specific array element in JavaScript?

To find the position of a specific array element in JavaScript you need to use the index Of () method. Let’s see:

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

var fruits = [“Apple”, “Orange”, “Pineapple”, “Mango”];

var a = fruits.indexOf(“Orange”);

document.getElementById(“demo”).innerHTML = “Orange is found in position ” + a;

</script>

</body>

</html>

However, index Of Method array index search from the beginning. The problem is, if you have more than one identical value in your array, it will display the index of whoever gets it from the beginning. In this case, if you want to search the index from the end of the array, you need to use the last Index Of () method. Let’s look at an example:

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

var fruits = [“Apple”, “Orange”, “Apple”, “Mango”];

var a = fruits.lastIndexOf(“Apple”);

document.getElementById(“demo”).innerHTML = “Apple is found in position ” + (a + 1);

</script>

</body>

</html>

How to find the first array element in JavaScript based on a specific condition?

To find the first array element in JavaScript based on a specific condition, you need to use the find () Method. Let’s see:

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

var numbers = [4, 9, 16, 25, 29];

var first = numbers.find(myFunction);

document.getElementById(“demo”).innerHTML = “First number over 18 is ” + first;

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

However, the find () method only returns the value. And if you want to get index, then you have to use find Index () Method. Let’s look at an example:

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

var numbers = [4, 9, 16, 25, 29];

var first = numbers.findIndex(myFunction);

document.getElementById(“demo”).innerHTML = “First number over 18 has index ” + first;

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here