destructured object not accesible in of statement

Question

My code looks like this it's aiming to observe a modal content when it's open

const data = {
   modal: false,
   button: null
};

const updateData = () => {
   const {modal, button} = data

   if (document.querySelector('.modal')) {
       modal = true
       button = document.querySelector('.modalButton')
   }
};

I get the following error when I call updateData():

Uncaught ReferenceError: modal is not defined"

It works as intended when it's written like this:

const updateData = () => {

    if (document.querySelector('.modal')) {
        data.modal = true
        data.button = document.querySelector('.modalButton')
    }
};

I can't understand why destructured data isn't accessible in the if statement.

*it works as intended when it's written like this* It shouldn't. You forgot to try to try to assign the properties to the `data` object. Also, your lower code results in `Uncaught SyntaxError: Unexpected token '.'`. Is your `updateData` intended to be an object or a function? — CertainPerformance, Dec 19 '19 at 11:46
It absolutely does not work as intended when you write it the second way... — TKoL, Dec 19 '19 at 11:50
Do you want updateData to be a function? Do you want the function to return an object? — TKoL, Dec 19 '19 at 11:51
You're not even apparently using the destructured values. It's really hard to tell what you're even trying to do to be honest — TKoL, Dec 19 '19 at 11:51
sorry I made several syntax errors in the example I gave, should be right now — Aurian Guerard des Lauriers, Dec 19 '19 at 11:52
You can not reassign modal and button after destructuring because you make them const and const can't be re assigned — R.K.Saini, Dec 19 '19 at 11:54

score 0 · Accepted Answer · answered Dec 19 '19 at 11:55

I'm still not 100% sure what you're trying to do, because you set the variables modal and button by destructuring them, and then you don't use those variables...

You can do something like this:

const data = {
   modal: false,
   button: null
};

const updateData = () => {
   const {modal, button} = data

   if (true) {
     return {
       modal, button
     }
   }
};

console.log(updateData());

You cannot update properties of objects AFTER destructuring, by using the destructured variables, if that's what you're trying to do.

If you want to update data.modal, you'll have to do data.modal = 'xx';

destructured object not accesible in of statement

1 Answers1