Accessing the Parent Variable from a Function in JavaScript: A Guide

How can you properly retrieve the value of x?

let x = 5
const f = (n:number) => {
  let x = "Welcome";
  return x * n // Referring to the first x, not the second one
  }

Also, what is the accurate technical term for this action?

Answer №1

To properly access a shadowed variable, avoid shadowing it in the first place. Consider refactoring the code by giving one of the variables a different name, usually the local one within the inner scope.

Answer №2

To implement this concept, one approach involves utilizing block scope in conjunction with the OR operator.

{
  let x = 5
  const f = (n) => {
    x = x || "Welcome";
    return x * n // The first occurrence of x, not the second
  }
  f(1)
}

Alternatively, you can set x as a default parameter for function f.

let x = 5
const f = (n, z = x)=> {
  let x = "Welcome";
  return z * n // The first instance of x is used, not the second
}

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

Issue encountered during Heroku deployment: Failed to build React app. When attempting to push changes to Heroku, an unexpected end of input error was received instead of the expected result. This error occurred on an unidentified file at

Encountering a parsing error while attempting to deploy a React app on Heroku using git push heroku master. The app built successfully yesterday, but since then some media queries were added by another contributor to various .scss files. The primary error ...

What is the process for a server to transmit a JWT token to the browser?

Here is an example response sent to the browser: HTTP / 1.1 200 OK Content - Type: application / json Cache - Control : no - store Pragma : no - cache { "access_token":"MTQ0NjJkZmQ5OTM2NDE1Z ...

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

Having difficulty positioning the Divider correctly among Grid items

I am trying to add a Divider between each item in my Grid. The desired output should resemble this:- Col 1 | Col 2 | Col 3 However, I am facing difficulties as the Divider is not visible and the items are displayed vertically. import "./style ...

A React component enclosed within a useCallback function

According to the React docs, to prevent a Child component from re-rendering in certain cases, you need to wrap it in useMemo and pass down functions in useCallback within the Parent component. However, I'm confused about the purpose of this implementa ...

Can a new record be created by adding keys and values to an existing record type while also changing the key names?

If I have the following state type, type State = { currentPartnerId: number; currentTime: string; }; I am looking to create a new type with keys like getCurrentPartnerId and values that are functions returning the corresponding key's value in Sta ...

Is <form> tag causing code deletion after an ajax request?

I'm working on a form that looks like this: <form> <input class="form-control" id="searchField" type="text"> <button type="submit" id="searchUserButton">SEARCH BUTTON</button> </form> When I click on SEARCH BUT ...

group array by month and year

I have an array structured like this var dataset = [[1411151400000,1686],[1428604200000,1686],[1411151400000,1686]....] The goal is to group the data based on months and calculate the total sum of values for each month. The expected final output should ...

What is the best way to implement a personalized hook in React that will return the number of times a specific key is pressed?

I'm working on a custom hook that should give me the key pressed, but I've noticed that when I press the same key more than twice, it only registers twice. Here's my code: import { useEffect, useState } from "react" function useKe ...

Encountering a Typescript error when trying to invoke a redux action

I have created a redux action to show an alert message export const showAlertConfirm = (msg) => (dispatch) => { dispatch({ type: SHOW_ALERT_CONFIRM, payload: { title: msg.title, body: msg.body, ...

Create a custom Angular directive that allows you to replace tags while inserting the template

I have created a custom directive that can take templates based on the attribute provided. Check out the Plnkr example JS var app = angular.module('app', []); app.directive('sample', function($compile){ var template1 = '<d ...

Encountering the "excessive re-renders" issue when transferring data through React Context

React Context i18n Implementation i18n .use(initReactI18next) // passes i18n down to react-i18next .init({ resources: { en: { translation: translationsEn }, bn: { translation: translationsBn }, }, lng: "bn ...

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

What is the best way to add HTML tags both before and after a specified keyword within a string using JavaScript?

Imagine I have a string similar to this, and my goal is to add html tags before and after a specific keyword within the string. let name = "George William"; let keyword = "geo"; Once the html tags have been appended, the desired result should look like ...

Using `popWin()` in conjunction with `echo php` in Javascript

How can I create a JavaScript popup window inside an echo line? I have tried the following code but the popup window does not work: echo '<td> <a href="javascript:popWin(edit.php?id='.$row[id].')">Edit</a></td>&apos ...

Error: The URL provided to the AngularJS factory is not properly formatted

I am facing an issue with passing a URL from a controller to a factory in my service. I have multiple URLs and want to dynamically pass any URL. var youtubeURL = 'https://www.googleapis.com/youtube/v3/videos?part=snippet'; ConnectivityS ...

Error: Null value detected while trying to access the property 'appendChild'

Can anyone help me with this error? Uncaught TypeError: Cannot read property 'appendChild' of null myRequest.onreadystatechange @ script.js:20 Here's the code snippet where I'm facing the issue // index.html <html> <he ...

What's the reason for the alert not functioning properly?

I am curious about the distinction between declaring a variable using var. To explore this, I tried the following code: <body> <h1>New Web Project Page</h1> <script type="text/javascript"> function test(){ ...

Using RxJS switchMap in combination with toArray allows for seamless transformation

I'm encountering an issue with rxjs. I have a function that is supposed to: Take a list of group IDs, such as: of(['1', '2']) Fetch the list of chats for each ID Return a merged list of chats However, when it reaches the toArray ...

Updating an object within an array of objects in Angular

Imagine having a unique object array named itemArray with two items inside; { "totalItems": 2, "items": [ { "id": 1, "name": "dog" }, { "id": 2, "name": "cat" }, ] } If you receive an updated result for on ...