Is it possible to utilize the logical OR operator with Strings as function arguments in JavaScript? It seems that the function may not evaluate the second string

When checking the backend using Vuex to conditionally render error messages, I utilize the getByTitle function below:

const getByTitle = (memberTitle) => {
  return state.errors.find(e => e.meta.memberTitle === memberTitle)
       ?.content.error.title;   
}

For this particular component, I need to pass 2 strings as arguments, as there are 2 options to consider.

getNumber() {
  return this.getErrorByMemberId('B2Bvr' || 'Cvr' || undefined);
},

However, when the correct value in the backend is 'Cvr', the error message does not display because 'B2Bvr' comes first in the parameter sequence. By rearranging the arguments to prioritize 'Cvr' (as seen in the snippet below), the error message displays correctly.

getNumber() {
  return this.getErrorByMemberId('Cvr' || 'B2Bvr' || undefined);
},

Why does it prioritize the first argument over the second? And what is the proper way to use Logical OR operators within parameters?

javascriptfunctionvue.jsparametersarguments

Answer №1

The function stops processing at the first truthy argument it encounters, disregarding any subsequent arguments. For example, if you were to pass undefined (a falsy value) as the first argument, it would move on to the next argument.

To achieve your desired outcome, you can send all possible arguments as an array and utilize Array.includes() within your function:

getNumber() {
  return this.getErrorByMemberId(['Cvr', 'B2Bvr', undefined]);
},

const getByTitle = (memberTitleArray) => {
  return state.errors.find(e => memberTitleArray.includes(e.meta.memberTitle))
       ?.content.error.title;   
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to incorporate a user-controlled autoscroll feature into this Carousel?

I am in the process of creating a "slideshow" using text boxes that can be scrolled with arrow buttons. My goal is to have the slideshow automatically scroll only until the user interacts by clicking one of the arrow buttons. Below is the state logic re ...

javascriptreactjsweb

Using Javascript to trigger a setTimeout function after the user's mouse leaves

There is a div that pops up when the user's mouse exits the webpage, containing a survey pertaining to my website. I want to avoid prompting users to take the survey if they move their cursor out of the page within the first few minutes of browsing. ...

javascriptjqueryhtmlcss

The error encountered is: `Exception: startDate.getTime is not a valid function

const [currentDate, setCurrentDate] = useState(new Date()); const fetchDataFromAPI = () => { let timeStamp = Number(currentDate.getTime()); axios.get( `https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=BTC,USD,EUR& ...

javascriptreactjs

Implementing theme in Monaco editor without initializing an instance

I recently developed a web application incorporating Monaco Editor. To enhance user experience, I also integrated Monaco for syntax highlighting in static code blocks. Following guidance from this source, I successfully implemented syntax highlighting wit ...

javascripttypescriptmonaco-editor

The error message "TypeError: Unable to access property of undefined when using web sockets"

Exploring Isomorphic framework for React and integrating Pusher for websockets communication. I'm encountering difficulty accessing the state within the componentDidMount() function. class TopbarNotification extends Component { state = { vis ...

javascriptreactjsecmascript-6pusherisomorphic-javascript

"Enhancing user experience with dynamic input fields through Ajax auto-fill functionality

I have a unique invoice form that allows users to add multiple parts at their discretion. As the user inputs a part number, an AJAX script automatically populates the description and price fields. The script functions properly for the initial input fields ...

javascriptjqueryajax

Learn how to dynamically switch the background image of a webpage using a button in AngularJS

Hey there, I'm currently working on incorporating interactive buttons into my website to give users the ability to customize the background. I've been experimenting with Angular to achieve this feature. So far, I've managed to change the ba ...

javascripthtmlcssangularjs

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

javascriptangularjshtml

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

htmljquerycssvue.js

Angular's Material Design Autocomplete feature with remote data sourcing and how its performance compares to the most effective methods

In my current project, I am utilizing an Angular material autocomplete feature that fetches data via AJAX. I am facing a dilemma trying to determine the most efficient approach. Below is a snippet of my code: $scope.loadOrganizations = function () { ...

javascriptangularjsajaxautocompleteangular-material

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

javascripttypescriptecharts

Invoking a function within a functional component from a React element

Let's imagine a scenario where we have a Child component that is a functional component and contains a function called a(): export default function child({ ... }) { ... function a() { ... } ... } Now, let's introduce a parent ...

javascriptreactjscomponentsreact-componentreact-functional-component

Steps for embedding a custom function in a switch statement

I am attempting to run a switch statement based on the argument provided to the function below. I have been trying to call different functions depending on the argument passed. However, I encountered an Uncaught ReferenceError in the beginning of the .js f ...

javascriptjqueryswitch-statementaddclass

Why is my Laravel Vue CRUD not automatically updating the posts section with new data?

Hey there, I've been working on a project using Laravel 5.6 with Vue.js for CRUD functionality. I'm trying to display the posts I've just added in the posts section without having to reload the entire page. However, my current code is only s ...

javascriptphplaravelvue.js

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

javascripthtmljquery

Is there a way to use grease/tampermonkey to automatically redirect the current definition from Dictionary.com to Thesaurus.com?

Is there a way to use Greasemonkey or Tampermonkey to automatically open the definition on Dictionary.com at Thesaurus.com, and vice versa, when clicking specific links? (Shown in red) My initial thought is to retrieve the word being searched from the URL ...

javascriptgreasemonkeytampermonkey

Issue with CSS files in Jest"errors"

I'm currently facing an issue while trying to pass my initial Jest Test in React with Typescript. The error message I am encountering is as follows: ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.App ...

javascriptreactjstypescriptjestjs

Creating seamless transitions between pages using hyperlinks

On the homepage, there are cards that list various policies with a "details" button above them. Clicking on this button should take me to the specific details page for that policy. However, each product can only have one type assigned to it. For instance: ...

javascriptreactjsreact-native

Having trouble with my TinyMCE Editor not loading content data in the Edit.vue component of my Vue 3 project with Vite

I am currently working on a Vue 3 project using Vite and incorporating Editor.vue components with TinyMCE. The code snippet for my Editor.vue component is shown below: My Editor.vue code: <template> <div class="mb-6"> < ...

javascriptvue.jstinymcevite

Tips for modifying Colleda file vertices in A-Frame

Is it possible to update the color of a model in colleda using the code below, but how do we handle the dimensions of the vertices and update the model? For example, can we store the dimensions in a separate file (e.g. .js) and then access them in A-Fram ...

javascriptthree.jsaframe