JavaScript Part-8: JavaScript array Properties and Methods

JavaScript Part-8: JavaScript array Properties and Methods
Image

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:

Image

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:

Image

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

Image

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>

Image

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>

Image

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>

Image

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>

Image

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>

Image

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.

Image
Image

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>

Image

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:

Image

Let us see an example of merging with three arrays:

Image

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.

Image

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

Image

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:

Image

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.

Image

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.

Image

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>

Image

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:

Image

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:

Image

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:

Image

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.

Image

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:

Image

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:

Image

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:

Image

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>

Image

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>

Image

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>

Image

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>

Image

Leave a Reply

Your email address will not be published. Required fields are marked *