Would it be frowned upon in JavaScript to use "if (somestring in {'oneoption':false, 'secondoption':false})"?

Is the use of this construct considered a bad practice in JavaScript and could it lead to unexpected behavior?

if (e.target.name in {name: '', number: ''}) {
  // do something
}

This code checks if the 'name' attribute of an HTML node exists in the keys of the "object" and proceeds if it does. It's a basic check to see if the clicked element is one we need. How does it compare performance-wise to something like this?

if(['name','number'].some(a=>a==e.target.name)) {
  // do something
}

What is the optimal way to perform these checks both in terms of typing and performance?

Answer №1

A potential issue arises when using the in operator because it checks the entire prototype chain, leading to unexpected positives.

"constructor" in {name: '', number: ''} // true  !!

To maintain constant performance, consider using a set. However, for smaller cases, Array#includes is often more readable.

new Set(['name', 'number']).has(e.target.name);
['name', 'number'].includes(e.target.name);

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

Is it possible to execute JavaScript within an Android application?

Is there a way to utilize the javascript provided by a website on an Android device to extract and analyze the emitted information? Here is the javascript code: <script type="text/javascript" src="http://pulllist.comixology.com/js/pulllist/5b467b28e73 ...

Standing alone, an argument can never be fully validated without

Recently, while delving into the valuable resource titled Effective TypeScript by Dan Vanderkam, I stumbled across an intriguing scenario that left me puzzled. Within a code snippet presented in the book, there was a line - shape; that seemed perplexing ...

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

Retrieve data from a specific page on a URL using AJAX

window.onload= function(){ var page = window.location.hash; if(window.location.hash != ""){ page = page.replace('#page:', ''); getdata('src/'.page); } } Once the window has loaded, I want to check ...

Can you explain how differential inheritance works in JavaScript?

This response to a question about the Object.create() method in JavaScript on SO discusses the concept of differential inheritance. The explanation given is as follows: This particular technique enables you to easily establish differential inheritance, ...

Adjust the href attribute of a link dynamically using the value input from a text field immediately

Is there a way to dynamically change the href attribute of a link when a user types in an input field? And is it possible to detect when a user pastes content into the input field as well? Would appreciate any suggestions on how to accomplish this using j ...

What is the best way to retrieve a document element in React when utilizing an external script?

In my React project, I have successfully implemented a chat button using an external script. However, I encountered an issue where I needed to hide the chat button on specific pages. Since I couldn't access the button's element using a ref, I res ...

What are the reasons behind PostgreSQL's poor performance on Windows?

Our application was initially running on MySql, but we soon realized that MySql lacked the GIS capabilities that PostGIS offers (note: mysql only supports minimum-bounding rectangle GIS search). Therefore, we transitioned to PostgreSQL. However, we notice ...

The error message "system.js:4 Uncaught (in promise) error" popped up unexpectedly as I was working on my ES

I'm dipping my toes into ES6 development using Plunker. I've loaded Traceur and SystemJS, but I'm encountering the following errors: GET https://traceur-compiler.googlecode.com/git/bin/traceur.js 404 () VM490 system.js:4 GET https://run.pln ...

The file type stored in Firebase storage is identified as 'octet-stream' rather than the expected 'png/jpg' format

I am experiencing an issue with uploading images to Firebase storage. After uploading them, I notice that they are labeled as application/octet-stream instead of the expected types like image/jpeg or image/png. Below is the code snippet I am using: <in ...

Dealing with images on my live React application

For managing static images in my react app, I have integrated cloudinary as a CDN service. Can anyone suggest a seamless way to switch between using local image folders during development and switching to the CDN URL for production efficiently? ...

Uncover the valuable information within a string using regex in JavaScript

I am looking for a solution to extract key values from a string that looks like this: <!-- Name:Peter Smith --><!-- Age:23 --> My goal is to create a standard function that can extract any value needed. The function call would be something lik ...

REACT performance impacted by slow array filtering

I have a custom listbox feature, where a div holds a vertical list of other div elements. There is also an input field for searching within the list. While it works fine with small data sets, it becomes extremely slow with large amounts of data. In additi ...

The action of JQuery is modifying the value of the checkbox, but it is not visually showing as checked

I am working on a list that contains checkboxes and text, similar to an email inbox. My goal is to be able to check or uncheck the checkbox anytime I click anywhere on the list item (row). To achieve this functionality, I have used the following code withi ...

Unleashing the Potential: Integrating a Scanner Device with

Currently, I'm facing the challenge of integrating a Scanner device with my Angular application. On one of the pages dedicated to scanning, users are able to view an alert indicating the connection status of the Scanner as well as any scanned document ...

Webpack loaders or plugins: understanding the distinction

Can you explain the distinction between loaders and plugins in webpack? I found on the documentation for plugins that it states: Plugins are used to incorporate extra functionalities usually related to bundles within webpack. While I understand that b ...

Trying to utilize RegEx for my project, but feeling stuck on how to solve my problem

^\d{1,12}$|(?=^.{1,15}$)^\d+\.\d{1,2}$ This is the current regular expression I am using. I need to adjust the maximum limit to 100,000,000,000 with an option for two decimal places. Additionally, I would like users to be able to inpu ...

Troubarked by problems NodeJS faces when trying to establish a connection with CosmosDB using a connection

Having trouble with my code that fails when I try to create a new instance of the CosmosClient. The option to create a CosmosClient using a connection string should be straightforward. The environment variable holds the necessary connection string in this ...

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

The concept of "Object Reference Pattern" in the world

Currently, I am working with a single object: var callback = { onValueChange: function () { }, onTabPressed: function () { }, onFocus: function () { } }; In my webpage, I have various editors such as textEditor and numericEditor, and I bind t ...