Using a Default Value in a Destructured Function Parameter Results in a ReferenceError

When working on setting a default value for the db in my CRUD functions for testing purposes, I encountered a peculiar issue that has left me puzzled. Here's the snippet of code that caused the trouble:

import { db } from './firebase'

function getUsers({ db = db }) {
  try {
    return db
    ...

During tests, using this function posed no problems as I provided a test database to invoke it. However, the real application should be able to use the default value and call the function without any parameters. Surprisingly, I encountered the error message: 

ReferenceError: can't access lexical declaration 'db' before initialization
. The reason behind this error remains unknown to me.

To resolve this issue, I resorted to renaming the parameter. Nonetheless, I am eager to gain insights into understanding what exactly transpired here. Does anyone have an idea?

Workaround Implemented:

import * as firebase from './firebase'

function getUsers({ db = firebase.db }) {
  try {
    return db
javascriptfirebasetestingdefault-valuedestructuring

Answer №1

Understanding the concept of scope in function declaration parameter lists is key. The default argument value context encompasses the parameter list itself, including those that have already been declared. This means that the 'db' parameter takes precedence over the globally imported symbol.

To overcome this issue, you can opt to change the name of the parameter:

function getUsers({database = db})

The scope functions in such a way so as to allow using parameters from earlier in the list within expressions for later parameters:

function something(a, b = a + 1)

If you called this function with something(0), 'b' would be assigned a value of 1.

In response to your question about initializing a parameter to itself, it's important to note that it is not valid. If a parameter is absent in a function call, it defaults to 'undefined'. Therefore, setting the default value to 'undefined' explicitly would be incorrect.

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

Exploring the seamless integration of Next.js, TypeScript, and useContext across

Revision: I realized that I had forgotten to include the following line of code in my Header.tsx component: import Link from 'next/link'; After rectifying this oversight, everything started functioning properly. I am currently struggling with ...

javascriptreactjstypescriptnext.js

Different ways to shuffle the arrangement of divs

Forgive me if this seems like a simple query, but I am struggling with it. Essentially, what I want to achieve is to randomize the positioning of the items, where item 1 can adopt the style of item 3 (or 2 or 4), item 2 can take on the style of 1, 3, or 4, ...

javascriptarrayssortingrandom

display a different selection option depending on the previously chosen item

I'm working on displaying additional options in a select box when the user makes a selection from the main select box. I've set display:none for the select boxes, which will only appear when the user chooses an option from the main select box. C ...

javascriptjqueryhtmlcssdrop-down-menu

Dynamically update a form with steps using JQuery-steps and send all objects to the controller

In the context of a form, it is possible to dynamically add between 1 to n records before passing it to the controller with data. The following represents the ViewModel for the form: public class AddFieldDataViewModel { public int SampleID { get; se ...

javascriptjqueryasp.net-mvcjquery-steps

Initiate a Gravity Forms form refresh after modifying a hidden field with jQuery

TO SUM IT UP: Is there a way in Javascript to activate an update on a Gravity Form that triggers the execution of conditional logic? ORIGINAL QUESTION: I'm using Gravity Forms and I have set up an "on change" event $('#gform_1').find(&apos ...

javascriptjquerywordpressgravity-forms-plugin

Identifying overflow of text or elements in JavaScript during execution

The website I'm working on has a unique design that requires users to scroll horizontally using the Arrow Keys instead of swiping. To achieve this, I must constantly check for overflow in text or elements each time a new page is loaded, and if necessa ...

javascriptjquerycsshtmlcss-animations

Storing filtered data objects for future use

Introduction to my User Administration Page Currently, I am working on the User Administration page of my project and facing a minor issue. The page includes a table that displays material-ui's Usercard for each user in the system. These cards are ge ...

javascriptreactjsreduxmaterial-ui

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

Imagine you are browsing the product page for a Nike T-shirt. You select black color and size S, adding it to your cart. The cart now shows 1 Nike T-SHIRT with attributes color: black, size: S. However, if you then switch to white color and size M on the ...

javascripthtmlcssreactjsarrays

Toggle the element within the selected row using Jquery

In order to create a client list, users must click on rows to select them and then submit the selections to the database for a cron job to send out emails. Instead of using checkboxes, I am attempting to highlight rows by including two hidden elements - o ...

javascriptjquery

Determine the aspect ratio of the image and incorporate it into the query string

In my current code, I am extracting the dimensions of an image obtained from a cropper tool. I then calculate the aspect ratio of the image by dividing the height by the width. This value is then incorporated into the query string url: urlLocation + imag ...

javascriptjquery

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

javascriptjqueryhtmldynamic-textdynamic-image-generation

Choosing options from an API response in a REACT-JS application

I have a Select Component in my application and I want it to automatically show the selected data once the response is received. import Select from "react-select"; <Select menuPlacement="auto" menuPosition="fixed" ...

javascriptreactjs

What is the recommended approach for conducting backend validation?

As I develop a CRUD application using express.js and node.js, here is the backend API code that I have written: app.post("/signup", (req, res) => { const { name, email, password } = req.body; if (!name) { res.status(401).json("Please provide a n ...

javascriptnode.jsexpressvalidation

The labels displayed on ChartJs are inaccurate

As a student who has been learning programming for about a month, I must admit that there may be many mistakes in my code. In developing a website, I have incorporated a chart from the ChartJs library. The chart consists of an outer circle representing ho ...

javascripthtmlchartschart.js

Can we prevent a component from being mounted every time it is rendered by its parent component?

Is it possible to render the Child component within the Father component without mounting it and resetting its states when the Father component is rendered? I attempted to use the useMemo hook to render the Child component, but it still mounts the compone ...

javascriptreactjsreact-hooksreact-dom

The TransferList component in Material UI does not update its state based on props when using the useState

My TransferList component in Material UI receives an array of previously selected items as props.selectedItems. The props.Items contains all available items. I expected to see props.selectedItems in the left panel of TransferList, but the left panel is em ...

javascriptreactjsmaterial-uiuse-effectuse-state

Notify users at scheduled time using Firebase and Cloud functions

I have developed a unique platform that allows fitness coaches to effectively communicate and share workout plans with their clients. However, I am looking to further enhance this platform by introducing a new feature: the ability for coaches to configure ...

androidiosnode.jsfirebasegoogle-cloud-functions

Utilizing svgr in NextJS with TypeScript and Webpack

I have a collection of separate svg files that I want to load in React and use as React components. Here is an example of how I am trying to do this: import SampleIcon from '@/components/editor/icons/add-column-after.svg'; <SampleIcon classNam ...

javascriptreactjstypescriptnext.js

Trigger the script upon clicking the Save button within the AdminBro Edit page

AdminBro's documentation mentions that they provide predefined actions Edit (record action) - update records in a resource They also offer a hook called after. I created a function and assigned it to MyResource.edit.after. However, the issue is tha ...

javascriptexpresshookadmin-bro

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

How can I make the header of the table component stay fixed while allowing only the rows to scroll? ...

javascriptcssvue.jsbuefy