If the item is discovered, return it; otherwise, assign it as undefined

Question

If the item is discovered, return it; otherwise, assign it as undefined

Here is the code snippet I am currently using:

var snap = this.snaps.find((snap) => {
    if(pos > snap.min && snap.max > pos){
        return snap;
    }
})
if(snap !== undefined){
    this.scrollTo = snap.down ? snap.max : snap.min;
}else{
    this.scrollTo = undefined
}

My goal is to achieve the same functionality without using an if-else statement. I attempted the following code:

this.scrollTo = this.snaps.find((snap) => {
    if(pos > snap.min && snap.max > pos){
        return snap.down ? snap.max : snap.min;;
    }
})

Unfortunately, this alternative approach did not work as expected.

javascript

Answer 1

Answer №1

When using this.snaps.find as Array.prototype.find, the boolean value of the return from the function is what matters most. The return snap; statement in that function essentially has the same effect as return true;. In this scenario, it's more efficient to just return the boolean value of the condition instead of resorting to an if statement. An arrow function without curly braces can be used to directly return the result of an expression without explicitly stating return, which allows you to simplify your find call like so:

var snap = this.snaps.find( snap => pos > snap.min && snap.max > pos );

To eliminate the need for additional if/else statements, you can utilize a logical operator like &&. The && operator returns its first operand if falsy (such as undefined), otherwise returning the second operand:

this.scrollTo = snap && (snap.down ? snap.max : snap.min);

Answer 2

When using this.snaps.find as Array.prototype.find, the boolean value of the return from the function is what matters most. The return snap; statement in that function essentially has the same effect as return true;. In this scenario, it's more efficient to just return the boolean value of the condition instead of resorting to an if statement. An arrow function without curly braces can be used to directly return the result of an expression without explicitly stating return, which allows you to simplify your find call like so:

var snap = this.snaps.find( snap => pos > snap.min && snap.max > pos );

To eliminate the need for additional if/else statements, you can utilize a logical operator like &&. The && operator returns its first operand if falsy (such as undefined), otherwise returning the second operand:

this.scrollTo = snap && (snap.down ? snap.max : snap.min);

If the item is discovered, return it; otherwise, assign it as undefined

Answer №1

Similar questions

What specific flag should be included in Chrome settings to prevent displaying c:/fakepath?

What is the best way to reset a dropdown list value in angular?

Display a dynamic array within an Angular2 view

Making requests using Axios in a web application created with Express, Node, and EJS

Program for sending and receiving messages

I'm having trouble understanding why this code is causing confusion for the user's selection during a specific part of the execution. I can't seem

Adding elements to an array using JavaScript

Manipulating variables across various methods in TypeScript

The jQuery focusout event is triggered on a form element, even if a child element is clicked within the form

Unable to sign out user from the server side using Next.js and Supabase

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

Establishing the module exports for the NextJS configuration file

What is the distinction between selecting and entering a date input value?

Can you explain the purpose of the `Sizzle.tokenize` function?

Issues with Jquery Autocomplete feature when using an Input Box fetched through Ajax requests

In search of a hover functionality similar to what can be found on Stack Overflow

Rotate Text in HTML <thead> Tag

What sets 'babel-plugin-module-resolver' apart from 'tsconfig-paths'?

What could be causing the state of a child component to continuously reset?

What is the best approach for extracting functions from express routes for unit testing?