Aman Tyagi's collection
JavaScript Array Methods()...2

JavaScript Array Methods()...2

Aman Tyagi's photo
Aman Tyagi
·

7 min read

Methods in this article:

  • .fill(),
  • .filter(),
  • .find(),
  • .findIndex()

Hello and Welcome to article #2 in the series JavaScript Array Methods(), Another post where you're going to learn the basics of some other array methods in JavaScript(syntax, purpose, as well as example snippets),

If you haven't check out the previous article yet, you can take a look at it here

So let's get started with .fill() method:

.fill()

  • Suppose you have to change any element's value or place the same value at the place of all elements in an array how would you do that? JavaScript has a method for this too, take a look below:

  • Syntax

arrayName.fill(fillValue, startIndex, endIndex)
  1. fillValue: the value to be filled in the array at the specified index(s),
  2. startIndex: (optional) the position where to start filling the value, you can omit this parameter for default index- 0
  3. endIndex: (optional) the position where to end value, you can omit this parameter for default index- array.length

Example Snippet

let fillArray= [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
fillArray.fill("ab", 3, 5); 
//  returns [0, 1, 2, "ab", "ab", 5, 6, 7, 8, 9]
  • This method alters the array it's applied on

.filter()

  • It filters the elements from an array on a condition passed as a function and returns a new array containing the filtered values:

  • Syntax

arrayName.filter(function(currentElementValue, currentIndex, arrayObject), thisValue)

  1. function(currentElementValue, currentIndex, arrayObject): This is the condition function passed as a parameter to the filter method:

    • currentElementValue: the value of the element currently in process,
    • currentIndex: (optional)the index of currentElementValue,
    • arrayObject: (optional)the array object this method is applied to or the array object current element belongs to,

  2. thisValue- (optional) A value to be passed to the method as a 'this' value to the function.

    • "undefined" is the default value of thisValue, if you omit this parameter, the value 'undefined' will be passed.

Example Snippet

let numbers= [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.filter(function(num){
return num <= 7;
}); //  returns [0, 1, 2, 3, 4, 5, 6, 7]

.find()

  • Just like .every() method (we learned in the previous article), this method also iterates over all the elements of the array and executes a function for the elements,
  • Then it checks if the function returns 'true' for any of the elements, whenever it encounters the very first 'true' return, it stops the execution of the function for further elements, and returns the value of that element,
  • If the function returns false then the method will return undefined,

  • Just like .empty() it also doesn't execute the function for empty elements

  • Syntax

arrayName.find(function(currentElementValue, currentIndex, arrayObject), thisValue)

  1. function(currentElementValue, currentIndex, arrayObject): This is the condition function passed as a parameter to the find method:

    • currentElementValue: value of the element currently in process,
    • currentIndex: (optional)the index of currentElementValue,
    • arrayObject: (optional)the array object this method is applied to or the array object current element belongs to,

  2. thisValue- (optional) A value to be passed to the method as a 'this' value to the function.

    • "undefined" is the default value of thisValue, if you omit this parameter, the value 'undefined' will be passed.
  • It doesn't change the array it is applied on.

example snippet

let numbers= [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.find(function(num){
return num > 2;
}); //  returns 3

.findIndex()

  • This method is used to find the index of a particular element or any element that pass the specified condition(passed as a function to the method),
  • It returns the index of the very first element that passes the test condition and does not execute the function for further elements,

  • When none of the elements pass the test this method returns -1

  • Syntax

arrayName.findIndex(function(currentElementValue, currentIndex, arrayObject), thisValue)

  1. function(currentElementValue, currentIndex, arrayObject): This is the condition function passed as a parameter to the findIndex method:

    • currentElementValue: value of the element currently in process,
    • currentIndex: (optional)the index of currentElementValue,
    • arrayObject: (optional)the array object this method is applied to or the array object current element belongs to,

  2. thisValue- (optional) A value to be passed to the method as a 'this' value to the function.

    • "undefined" is the default value of thisValue, if you omit this parameter, the value 'undefined' will be passed.
  • It doesn't change the array it is applied on.

example snippet

let numbers= [0, 2, 1, 8, 1, 11, 45, 8, 4, 3];
numbers.findIndex(function(num){
return num > 9;
}); //  returns 5

That's it for now, see you in the next one(coming soon),

till then stay safe stay home stay negative take care

and if you haven't checked out my previous articles, you can check them out here

2Articles1WeekJavaScriptarray methodswebdevelopmentHashnodeCommunity