croraf
croraf

Reputation: 4720

Change the value of imported variable in ES6

I'm using ES6 modules and am importing a variable from moduleA into moduleB:

//moduleA.js
let a = 5;
let b;

export { a, b };

//moduleB.js
import { a, b } from './moduleA'

a = 6;
b = 1;

But on change/assignment in moduleB I'm getting error such as:

a = 6;

ReferenceError: a is not defined

On the other hand I can console.log(a) in moduleB.

It seems it is not possible to assign to imported variables? Is this true or am I missing the way to do it? Why is this not possible?

Upvotes: 77

Views: 51957

Answers (2)

loganfsmyth
loganfsmyth

Reputation: 161457

import { a, b } from './moduleA'

is similar to

const a = ...
const b = ...

in that you cannot assign the value afterward. It's not quite the same because the values can change, but they can only be changed from inside the module. So you could do

let a = 5;
function setA(value) {
  a = value;
}

export { a, setA };

with

import { a, setA } from "./moduleA";

setA(4);
console.log(a); // 4

From outside of a module you can mutate a value, just like you could with const, like if you're changing a property on an object, but you cannot make the variable point to an entirely different object.

Upvotes: 115

Troopers
Troopers

Reputation: 5452

You can use an object instead of variables, like this the reference doesn't change :

//moduleA.js
let object = {
    a: 5,
};

export { object };

//moduleB.js
import { object } from './moduleA'

object.a = 6;
object.b = 1;

Upvotes: 37

Related Questions