Adding items to a Set object in Javascript

Why are the outputs of these two code snippets different when adding objects to a set affects reference comparison?

let list = [ {a:1,b:1},{a:2,b:3},{a:3,b:1} ]

let set = new Set(list);

let newList = [{a:1,b:2},{a:3,b:1}];
set.add(...newList)

let newFilteredList = [...set]
console.log(newFilteredList)

Another Code Example:

let list = [ {a:1,b:1},{a:2,b:3},{a:3,b:1} ] 
let newList = [{a:1,b:2},{a:3,b:1}];
let employees = [...list, ...newList]
let set = new Set(employees)

let newFilteredList = [...set]

console.log(newFilteredList)

Output for First Code:

(4) [{...}, {...}, {...}, {...}]
0 : (2) {a: 1, b: 1}
1 : (2) {a: 2, b: 3}
2 : (2) {a: 3, b: 1}
3 : (2) {a: 1, b: 2}
[[Prototype]] : []

Output for Second Code:

(5) [{...}, {...}, {...}, {...}, {...}]
0 : (2) {a: 1, b: 1}
1 : (2) {a: 2, b: 3}
2 : (2) {a: 3, b: 1}
3 : (2) {a: 1, b: 2}
4 : (2) {a: 3, b: 1}
[[Prototype]] : []

Answer №1

Set#add() function does not support accepting a variable number of arguments. Using .set(...newList) will only add the first item to the set due to the method expecting a single parameter.

const set = new Set();

set.add(1, 2, 3, 4, 5);

console.log(set.size);

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

Querying data from a label using jQuery

I am facing a challenge with reading label attributes in jQuery. I have multiple labels, each with the same class. These labels contain important information that I need to access. However, despite being able to select the object using $, I am struggling ...

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

While testing the Google Maps API on different browsers and devices, I encountered issues with Windows Phone. It turns out that Google Maps is not supported on Windows Phones, resulting in errors. How can I set it up so that instead of displaying the map ...

React: Dynamically update text input based on selected option

After selecting an option, I want to display a new text input. However, the old value entered remains on the screen even when I change the selection. How can I improve this functionality? Any suggestions would be appreciated. class loadComponent extends ...

When the bounds are adjusted, removing markers in Vue Cookbook's Google Map

I've encountered an issue with clearing markers after updating new bounds on a map. Whenever I post a request with new bounds, new markers get added to the map while the old ones remain in place. This situation becomes quite awkward for me because the ...

What is the best way to send a POST parameter using JavaScript?

Attempting to submit a variable and its name through a form, I had to change the button type to "button" instead of "submit" for additional validation purposes. Here is the updated button: <button type="button" onclick="subForm()" name="del" id="delet ...

Plotting Graphs in Django using ChartJS

I am working on creating a graph using ChartJs to visualize my expenses. Below is a snippet of my view: @login_required def index(request): truncate_month = connection.ops.date_trunc_sql('month', 'date_reg') expense = Expense. ...

Attempting to assign a thumbnail image to a file on Google Drive by utilizing JavaScript

I've been working on adding thumbnails to the files that I upload to Google Drive using Javascript. I'm following the instructions outlined at https://developers.google.com/drive/v3/web/file#uploading_thumbnails For my web-safe base64 image, I c ...

Passing arguments to an external function in jQuery from a dynamically loaded Ajax page

Despite its confusing title, the issue at hand is actually quite simple. My homepage contains a script that loads an external PHP file for a specific section of my website. Within this PHP file, I need to call a function from the main JavaScript file (th ...

Transforming formCollection array into objects within the controller

In my opinion, I am dealing with multiple fields in the `[n]` propertyName array which I wish to convert the formCollection fields into objects `myobject[n].propertyName` once they are sent to the controller. For example, consider the context below: View ...

What causes the undefined value of "this" in the Vue Composition API setup function?

A Vue component I've created is using v3's composition API: <template> <input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" /> <labe ...

Getting a Node module from the renderer in Electron: What you need to know

Is there a way to import a node module in my Electron app's renderer.js file? I'm attempting to utilize the Store object from the sindresorhus/electron-store package within my renderer.js file. This file is called through index.html as shown bel ...

What is the best way to prevent an HTML table from having columns that adjust their width dynamically based on the content in the <td>?

Is there a way to create a table with equal column sizes that do not change based on the length of the data within the table? https://i.sstatic.net/Gyt4P.png In the image provided, the data under the heading "Title" seems to shift the second column to th ...

Server Sent Events not being received by client from Express.js server

My Next.js (React) client is set up to receive Server-Sent Events from my Node.js/Express.js server, but it seems like it's not receiving any messages for some unknown reason. While the open and error events of EventSource are functioning correctly, ...

Troubleshooting steps for resolving a node.js error during execution

I recently delved into server side programming with node.js, but I'm encountering some issues when trying to execute it. My server is set up at 127.0.0.1:80, however, I keep running into errors. Console: Server running at http://127.0.0.1:80/ node:ev ...

Utilizing query parameters in JavaScript

When querying data from the database using passed parameters, I encountered an issue. For example: http://localhost:3030/people?$skip=0&$limit=25&$sort[name]=0&description[$name]=rajiv I wanted to add an extra parameter without including it in ...

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

Identifying when a browser is closed with multiple tabs open in Internet Explorer

I need to detect when a browser tab is closed in order to trigger a Struts action. I have successfully implemented this for a single tab using the following JavaScript code: <script type="text/javascript> function loadOut() { if ((window.event.c ...

Tips for passing a page as an argument in the function parameter of the page.evaluate() method?

I keep running into this issue when I pass the page as an argument: TypeError: Converting circular structure to JSON --> commencing at object with constructor 'BrowserContext' | property '_browser' -> object with const ...

JS can create a new line by introducing space

Adding .html(variable + " |") results in a new line, although it functions perfectly in another variable. JS code that is functioning: $(".timeRema").html(secondsDoubleDig(timeRema) + " |") ----------------------------------- ...

Can you explain the distinction between using call and apply?

Can you explain the distinction between utilizing Function.prototype.apply() and Function.prototype.call() to execute a function? const func = function() { alert("Hello world!"); }; func.apply() compared to func.call() Do performance dispar ...