vue 3 uncaught (in promise) typeerror assignment to constant variable

TypeError: Assignment to Constant Variable in JavaScript

Last updated: Mar 2, 2024 Reading time · 3 min

# TypeError: Assignment to Constant Variable in JavaScript

The "Assignment to constant variable" error occurs when trying to reassign or redeclare a variable declared using the const keyword.

When a variable is declared using const , it cannot be reassigned or redeclared.

Here is an example of how the error occurs.

# Declare the variable using let instead of const

To solve the "TypeError: Assignment to constant variable" error, declare the variable using the let keyword instead of using const .

Variables declared using the let keyword can be reassigned.

We used the let keyword to declare the variable in the example.

Variables declared using let can be reassigned, as opposed to variables declared using const .

You can also use the var keyword in a similar way. However, using var in newer projects is discouraged.

# Pick a different name for the variable

Alternatively, you can declare a new variable using the const keyword and use a different name.

We declared a variable with a different name to resolve the issue.

The two variables no longer clash, so the "assignment to constant" variable error is no longer raised.

# Declaring a const variable with the same name in a different scope

You can also declare a const variable with the same name in a different scope, e.g. in a function or an if block.

The if statement and the function have different scopes, so we can declare a variable with the same name in all 3 scopes.

However, this prevents us from accessing the variable from the outer scope.

# The const keyword doesn't make objects immutable

Note that the const keyword prevents us from reassigning or redeclaring a variable, but it doesn't make objects or arrays immutable.

We declared an obj variable using the const keyword. The variable stores an object.

Notice that we are able to directly change the value of the name property even though the variable was declared using const .

The behavior is the same when working with arrays.

Even though we declared the arr variable using the const keyword, we are able to directly change the values of the array elements.

The const keyword prevents us from reassigning the variable, but it doesn't make objects and arrays immutable.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• SyntaxError: Unterminated string constant in JavaScript
• TypeError (intermediate value)(...) is not a function in JS

Borislav Hadzhiev

Web Developer

Copyright © 2024 Borislav Hadzhiev

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

TypeError: invalid assignment to const "x"

The JavaScript exception "invalid assignment to const" occurs when it was attempted to alter a constant value. JavaScript const declarations can't be re-assigned or redeclared.

What went wrong?

A constant is a value that cannot be altered by the program during normal execution. It cannot change through re-assignment, and it can't be redeclared. In JavaScript, constants are declared using the const keyword.

Invalid redeclaration

Assigning a value to the same constant name in the same block-scope will throw.

Fixing the error

There are multiple options to fix this error. Check what was intended to be achieved with the constant in question.

If you meant to declare another constant, pick another name and re-name. This constant name is already taken in this scope.

const, let or var?

Do not use const if you weren't meaning to declare a constant. Maybe you meant to declare a block-scoped variable with let or global variable with var .

Check if you are in the correct scope. Should this constant appear in this scope or was it meant to appear in a function, for example?

const and immutability

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in case the content is an object, this means the object itself can still be altered. This means that you can't mutate the value stored in a variable:

But you can mutate the properties in a variable:

Get the Reddit app

This subreddit is for anyone who wants to learn JavaScript or help others do so. Questions and posts about frontend development in general are welcome, as are all posts pertaining to JavaScript on the backend.

Uncaught TypeError: Assignment to constant variable.

Im getting the error on the following code line "State = 0;

crashes = 0

console.log("RED DETECTED: " + crashes + " OF " + RED_TILL_START + ".")

} else if (State == 0 && engine.lastGamePlay() === 'WON') {

} else if (State == 1 && engine.lastGamePlay() === 'WON') {

} else if (State == 2 && engine.lastGamePlay() === 'WON') {

Computed Properties ​

Basic example ​.

In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example, if we have an object with a nested array:

And we want to display different messages depending on if author already has some books or not:

At this point, the template is getting a bit cluttered. We have to look at it for a second before realizing that it performs a calculation depending on author.books . More importantly, we probably don't want to repeat ourselves if we need to include this calculation in the template more than once.

That's why for complex logic that includes reactive data, it is recommended to use a computed property . Here's the same example, refactored:

Try it in the Playground

Here we have declared a computed property publishedBooksMessage .

Try to change the value of the books array in the application data and you will see how publishedBooksMessage is changing accordingly.

You can data-bind to computed properties in templates just like a normal property. Vue is aware that this.publishedBooksMessage depends on this.author.books , so it will update any bindings that depend on this.publishedBooksMessage when this.author.books changes.

See also: Typing Computed Properties

Here we have declared a computed property publishedBooksMessage . The computed() function expects to be passed a getter function , and the returned value is a computed ref . Similar to normal refs, you can access the computed result as publishedBooksMessage.value . Computed refs are also auto-unwrapped in templates so you can reference them without .value in template expressions.

A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of publishedBooksMessage depends on author.books , so it will update any bindings that depend on publishedBooksMessage when author.books changes.

See also: Typing Computed

Computed Caching vs. Methods ​

You may have noticed we can achieve the same result by invoking a method in the expression:

Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as author.books has not changed, multiple access to publishedBooksMessage will immediately return the previously computed result without having to run the getter function again.

This also means the following computed property will never update, because Date.now() is not a reactive dependency:

In comparison, a method invocation will always run the function whenever a re-render happens.

Why do we need caching? Imagine we have an expensive computed property list , which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on list . Without caching, we would be executing list ’s getter many more times than necessary! In cases where you do not want caching, use a method call instead.

Writable Computed ​

Computed properties are by default getter-only. If you attempt to assign a new value to a computed property, you will receive a runtime warning. In the rare cases where you need a "writable" computed property, you can create one by providing both a getter and a setter:

Now when you run this.fullName = 'John Doe' , the setter will be invoked and this.firstName and this.lastName will be updated accordingly.

Now when you run fullName.value = 'John Doe' , the setter will be invoked and firstName and lastName will be updated accordingly.

Best Practices ​

Getters should be side-effect free ​.

It is important to remember that computed getter functions should only perform pure computation and be free of side effects. For example, don't mutate other state, make async requests, or mutate the DOM inside a computed getter! Think of a computed property as declaratively describing how to derive a value based on other values - its only responsibility should be computing and returning that value. Later in the guide we will discuss how we can perform side effects in reaction to state changes with watchers .

Avoid mutating computed value ​

The returned value from a computed property is derived state. Think of it as a temporary snapshot - every time the source state changes, a new snapshot is created. It does not make sense to mutate a snapshot, so a computed return value should be treated as read-only and never be mutated - instead, update the source state it depends on to trigger new computations.

Edit this page on GitHub

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vite3 build project in nginx ,the google chrome debug report TypeError: Assignment to constant variable. #11380

490937333 commented Dec 15, 2022

github-actions bot commented Dec 15, 2022

Sorry, something went wrong.

No branches or pull requests

Java Tutorials

• Java Interview questions
• Java 8 Stream

Data structure and algorithm

• Data structure in java
• Data structure interview questions

Spring tutorials

• Spring tutorial
• Spring boot tutorial
• Spring MVC tutorial
• Spring interview questions
• keyboard_arrow_left Previous

[Fixed] TypeError: Assignment to constant variable in JavaScript

Table of Contents

Problem : TypeError: Assignment to constant variable

Rename the variable, change variable type to let or var, check if scope is correct, const and immutability.

TypeError: Assignment to constant variable in JavaScript occurs when we try to reassign value to const variable. If we have declared variable with const , it can’t be reassigned.

Let’s see with the help of simple example.

Solution : TypeError: Assignment to constant variable

If you are supposed to declare another constant, just declare another name.

If you are supposed to change the variable value, then it shouldn’t be declared as constant.

Change type to either let or var.

You can check if scope is correct as you can have different const in differnt scopes such as function.

This is valid declaration as scope for country1 is different.

const declaration creates read only reference. It means that you can not reassign it. It does not mean that you can not change values in the object.

Let’s see with help of simple example:

But, you can change the content of country object as below:

That’s all about how to fix TypeError: Assignment to constant variable in javascript.

Was this post helpful?

Related posts:.

• jQuery before() and insertBefore() example
• jQuery append and append to example
• Round to 2 decimal places in JavaScript
• Convert Seconds to Hours Minutes Seconds in Javascript
• [Solved] TypeError: toLowerCase is not a function in JavaScript
• TypeError: toUpperCase is not a function in JavaScript
• Remove First Character from String in JavaScript
• Get Filename from Path in JavaScript
• Write Array to CSV in JavaScript

Get String Between Two Characters in JavaScript

[Fixed] Syntaxerror: invalid shorthand property initializer in Javascript

Convert epoch time to Date in Javascript

Follow Author

Related Posts

Table of ContentsUsing substring() MethodUsing slice() MethodUsing split() MethodUsing substr() Method 💡TL;DR Use the substring() method to get String between two characters in JavaScript. [crayon-66811b3979923914998865/] [crayon-66811b397992a026664104/] Here, we got String between , and ! in above example. Using substring() Method Use the substring() method to extract a substring that is between two specific characters from […]

Return Boolean from Function in JavaScript

Table of ContentsUsing the Boolean() FunctionUse the Boolean() Function with Truthy/Falsy ValuesUsing Comparison OperatorUse ==/=== Operator to Get Boolean Using Booleans as ObjectsUse ==/=== Operator to Compare Two Boolean Objects Using the Boolean() Function To get a Boolean from a function in JavaScript: Create a function which returns a Boolean value. Use the Boolean() function […]

Create Array from 1 to 100 in JavaScript

Table of ContentsUse for LoopUse Array.from() with Array.keys()Use Array.from() with Array ConstructorUse Array.from() with length PropertyUse Array.from() with fill() MethodUse ... Operator Use for Loop To create the array from 1 to 100 in JavaScript: Use a for loop that will iterate over a variable whose value starts from 1 and ends at 100 while […]

Get Index of Max Value in Array in JavaScript

Table of ContentsUsing indexOf() with Math.max() MethodUsing for loopUsing reduce() FunctionUsing _.indexOf() with _.max() MethodUsing sort() with indexOf() Method Using indexOf() with Math.max() Method To get an index of the max value in a JavaScript array: Use the Math.max() function to find the maximum number from the given numbers. Here, we passed an array and […]

Update Key with New Value in JavaScript

Table of ContentsUsing Bracket NotationUpdate Single Key with New ValueUpdate Multiple Keys with New ValuesUsing Dot NotationUpdate Single Key with New ValueUpdate Multiple Keys with New ValuesUsing forEach() MethodUpdate All Keys with New ValuesUsing map() MethodUpdate All Keys with New Values Using Bracket Notation We can use bracket notation to update the key with the […]

Format Phone Number in JavaScript

Table of ContentsUsing match() MethodFormat Without Country CodeFormat with Country Code Using match() Method We use the match() method to format a phone number in JavaScript. Format Without Country Code To format the phone number without country code: Use the replace() method with a regular expression /\D/g to remove non-numeric elements from the phone number. […]

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Let’s be Friends

© 2020-22 Java2Blog Privacy Policy

vue3.2关于“TypeError: Assignment to constant variable”的问题解决方案

Uncaught (in promise) TypeError: Assignment to constant variable. 未捕获的类型错误：赋值给常量变量。

原因： const定义了变量且存在初始值。 下面又给captchaImg赋值，则报错了

我们使用 const 定义了变量且存在初始值。 后面又给这个变量赋值，所以报错了。

ES6 标准引入了新的关键字 const 来定义常量，const 与 let 都具有块级作用域：

使用 const 定义的常量，不能修改它的值，且定义的常量必须赋初值； let 定义的是变量，可以进行变量赋值操作，且不需要赋初值。 这个错误就是因为我们修改了常量而引起的错误，虽然某些浏览器不报错，但是无效果！

解决方案： 将 const 改为 let 进行声明。

“相关推荐”对你有帮助么？

请填写红包祝福语或标题

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

The constant's name, which can be any legal identifier .

The constant's value. This can be any legal expression , including a function expression.

The Destructuring Assignment syntax can also be used to declare variables.

Description

This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables.

An initializer for a constant is required. You must specify its value in the same statement in which it's declared. (This makes sense, given that it can't be changed later.)

The const creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.

All the considerations about the " temporal dead zone " apply to both let and const .

A constant cannot share its name with a function or a variable in the same scope.

Basic const usage

Constants can be declared with uppercase or lowercase, but a common convention is to use all-uppercase letters.

Block scoping

It's important to note the nature of block scoping.

const needs to be initialized

Const in objects and arrays.

const also works on objects and arrays.

Specifications

Browser compatibility

• Constants in the JavaScript Guide

© 2005–2021 MDN contributors. Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

• [email protected]
• 🇮🇳 +91 (630)-411-6234
• Reactjs Development Services
• Flutter App Development Services
• Mobile App Development Services

Web Development

Mobile app development, nodejs typeerror: assignment to constant variable.

Published By: Divya Mahi

Published On: November 17, 2023

Published In: Development

Grasping and Fixing the 'NodeJS TypeError: Assignment to Constant Variable' Issue

Introduction.

Node.js, a powerful platform for building server-side applications, is not immune to errors and exceptions. Among the common issues developers encounter is the “NodeJS TypeError: Assignment to Constant Variable.” This error can be a source of frustration, especially for those new to JavaScript’s nuances in Node.js. In this comprehensive guide, we’ll explore what this error means, its typical causes, and how to effectively resolve it.

Understanding the Error

In Node.js, the “TypeError: Assignment to Constant Variable” occurs when there’s an attempt to reassign a value to a variable declared with the const keyword. In JavaScript, const is used to declare a variable that cannot be reassigned after its initial assignment. This error is a safeguard in the language to ensure the immutability of variables declared as constants.

Diving Deeper

This TypeError is part of JavaScript’s efforts to help developers write more predictable code. Immutable variables can prevent bugs that are hard to trace, as they ensure that once a value is set, it cannot be inadvertently changed. However, it’s important to distinguish between reassigning a variable and modifying an object’s properties. The latter is allowed even with variables declared with const.

Common Scenarios and Fixes

Example 1: reassigning a constant variable.

Javascript:

Fix: Use let if you need to reassign the variable.

Example 2: Modifying an Object's Properties

Fix: Modify the property instead of reassigning the object.

Example 3: Array Reassignment

Fix: Modify the array’s contents without reassigning it.

Example 4: Within a Function Scope

Fix: Declare a new variable or use let if reassignment is needed.

Example 5: In Loops

Fix: Use let for variables that change within loops.

Example 6: Constant Function Parameters

Fix: Avoid reassigning function parameters directly; use another variable.

Example 7: Constants in Conditional Blocks

Fix: Use let if the variable needs to change.

Example 8: Reassigning Properties of a Constant Object

Fix: Modify only the properties of the object.

Strategies to Prevent Errors

Understand const vs let: Familiarize yourself with the differences between const and let. Use const for variables that should not be reassigned and let for those that might change.

Code Reviews: Regular code reviews can catch these issues before they make it into production. Peer reviews encourage adherence to best practices.

Linter Usage: Tools like ESLint can automatically detect attempts to reassign constants. Incorporating a linter into your development process can prevent such errors.

Best Practices

Immutability where Possible: Favor immutability in your code to reduce side effects and bugs. Normally use const to declare variables, and use let only if you need to change their values later .

Descriptive Variable Names: Use clear and descriptive names for your variables. This practice makes it easier to understand when a variable should be immutable.

Keep Functions Pure: Avoid reassigning or modifying function arguments. Keeping functions pure (not causing side effects) leads to more predictable and testable code.

The “NodeJS TypeError: Assignment to Constant Variable” error, while common, is easily avoidable. By understanding JavaScript’s variable declaration nuances and adopting coding practices that embrace immutability, developers can write more robust and maintainable Node.js applications. Remember, consistent coding standards and thorough code reviews are your best defense against common errors like these.

Related Articles

March 13, 2024

Expressjs Error: 405 Method Not Allowed

March 11, 2024

Expressjs Error: 502 Bad Gateway

I’m here to assist you.

Something isn’t Clear? Feel free to contact Us, and we will be more than happy to answer all of your questions.

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Error "Assignment to constant variable" in ReactJS

I did follow a tutorial of how to integrate mailchimp with node backend. I have never touched back end, so am pretty lame at it. When I POST to their API I get the subscriber's credentials, but I get an error back - "Assignment to constant variable". Reading through the web and other SO questions, it seems like I am trying to reassign a CONST value.

I had a goooooooooood look at my code and the only thing I have noticed that might be issues here is

I have noticed I am creating an empty object called "resObj" , then trying to assign a value to it. I have tried changing the CONST to LET , but I get an error saying: "resObj is not defined" .

Here is my front end code:

And the Back end code:

If anyone could help I would be very grateful. The subscription form works, but I need to clear that bug in order for my front end to work correctly onto submission of the form.

• variable-assignment

• 1 Can't reassign a const . const resObj = {}; should be let resObj = {}; –  Nick Commented May 27, 2020 at 22:08
• 1 Does this answer your question? Const in JavaScript: when to use it and is it necessary? –  Emile Bergeron Commented May 27, 2020 at 22:08
• @Nick I have tried it and it doesn't work for some reason... error: " There was an error with your request" message: "respObj is not defined" –  Denis Denchev Commented May 27, 2020 at 22:24

Maybe what you are looking for is Object.assign(resObj, { whatyouwant: value} )

This way you do not reassign resObj reference (which cannot be reassigned since resObj is const), but just change its properties.

Reference at MDN website

Edit: moreover, instead of res.send(respObj) you should write res.send(resObj) , it's just a typo

• I still get error: " There was an error with your request" message: "respObj is not defined" –  Denis Denchev Commented May 27, 2020 at 22:30
• 1 mmmm... It look like a different problem. Wait, I think you just misspelled resObj with respObj –  Luca Fabbian Commented May 28, 2020 at 0:11
• Yes, thank you guys, you are legends! Such a silly mistake and I have been staring at the screen for 2 days, trying to solve it... I have changed the CONST to LET and fixed the typo and it all works now perfectly, thank you ! Thank you @Luca Fabbian ! –  Denis Denchev Commented May 28, 2020 at 10:48

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged javascript reactjs variables constants variable-assignment or ask your own question .

• Featured on Meta
• Upcoming sign-up experiments related to tags
• Policy: Generative AI (e.g., ChatGPT) is banned
• The [lib] tag is being burninated
• What makes a homepage useful for logged-in users

Hot Network Questions

• What is the meaning of '"It's nart'ral" in "Pollyanna" by Eleanor H. Porter?
• Have children's car seats not been proven to be more effective than seat belts alone for kids older than 24 months?
• Rear shifter cable wont stay in anything but the highest gear
• Why can't LaTeX (seem to?) Support Arbitrary Text Sizes?
• How is Victor Timely a variant of He Who Remains in the 19th century?
• Are there paintings with Adam and Eve in paradise with the snake with legs?
• How to make D&D easier for kids?
• Clip data in GeoPandas to keep everything not in polygons
• How can a landlord receive rent in cash using western union
• "All due respect to jazz." - Does this mean the speaker likes it or dislikes it?
• No simple group or order 756 : Burnside's proof
• How will the ISS be decommissioned?
• Predictable Network Interface Names: ensX vs enpXsY
• Was BCD a limiting factor on 6502 speed?
• What to do if you disagree with a juror during master's thesis defense?
• What was the first game to intentionally use letterboxing to indicate a cutscene?
• Sets of algebraic integers whose differences are units
• Where can I access records of the 1947 Superman copyright trial?
• Is the zero vector necessary to do quantum mechanics?
• What's Wrong With My Math - Odds of 3 Cards of the Same Suit When Drawing 10 Cards
• Why depreciation is considered a cost to own a car?
• What is the original source of this Sigurimi logo?
• Navigation on Mars without Martian GPS
• Were there engineers in airship nacelles, and why were they there?