Var with {} break IE 11

Question

Im having an issue using slideToggle as a variable on my website. Im using domSlider. When I try the following I get issues I cannot understand.

If define slideToggle as:

var {slideToggle} = window.domSlider;

I get SCRIPT1010: Expected identifier in IE 11. But works in Chrome and modern browsers.

And if I define it as:

var slideToggle = window.domSlider;

I get Uncaught TypeError: slideToggle is not a function In chrome and other modern browsers. But no errors in IE 11.

I dont know what is causing this, and how to move on from here.

Answer 1

IE11 doesn't support destructuring assignment: Browser_compatibility

var { slideToggle } = window.domSlider;

would be:

var slideToggle = window.domSlider.slideToggle;

to work in IE11, or you can just use window.domSlider.slideToggle directly

Answer 2

The var { item } = func() construct is called destructuring. The older Redmond Middle School Science Project (IE11) doesn't support it; it's from a javascript version that came after they stopped working on IE.

If you're targeting IE, scroll to the bottom of the MDN page describing the feature. For your example, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment# It says which browsers support the feature.

There's also a site called CanIUse.com with information, feature by feature, about browser support.

There's a transpiler (a compiler that turns new javascript into old) called Babel. You could try that. But explaining how to rig it in your project is too much for a SO answer.

Welcome to the wonderful world of developing code for bad legacy browsers. There's a good reason for Microsoft abandoning their own browser development and adopting Chromium.