is 'slot' a reserve word in newer version of ECMAScript?

Question

It's an issue with google chrome version 53.0.2785.101 (64-bit). I tried running a simple html file and it throws the error 'slot.testFun is not a function' when I used the word 'slot'.

<html>
<head>
    <title>TEST</title>
</head>
<body>
    <a href="#" onclick="slot.testFun();">Click Here</a>

    <script type="text/javascript">
        var slot = {
            testFun: function(){
                console.log('clicked');
            }
        }
    </script>
</body>
</html>

There are no conflicts with this variable in our code. It's just the browser, not allowing the variable name in this latest version.

If you use any other name except the word 'slot', it works fine.

http://jsbin.com/gikonediru/1/edit?html,output — Your code runs without any problems when I test it. — Quentin, Sep 12 '16 at 13:45
@Quentin - hate to tell you this, but your jsbin throws `Uncaught TypeError: slot.testFun is not a function` error - in chrome 53 (windows 10 64bit) — Jaromanda X, Sep 12 '16 at 13:47
@JaromandaX I fear that any alternative spelling ('u', 'i', 'a') is a derogatory term. Let's make it `zlot` ;D — robertklep, Sep 12 '16 at 14:05
Related: [My answer in "onclick=“” vs event handler"](http://stackoverflow.com/a/21975639/218196) — Felix Kling, Sep 12 '16 at 14:49

score 7 · Accepted Answer · edited May 23 '17 at 12:32

7

This isn't an ECMAScript issue, it is a DOM issue.

The slot attribute has a corresponding slot property, and onclick attributes do stupid things with with so you are effectively calling this.slot.testFun() because it finds slot (which defaults to being an empty string) before it gets to the right scope.

slot is a new addition to the DOM and support for slot is new in Chrome 53. It does not appear in Chrome 52 and might not have made it even into the latest version of other browsers.

The solution: Avoid intrinsic event attributes. Bind event handlers with DOM instead. That protects you from his clash and future-proofs you from future additions to the DOM.

<a href="#">Click Here</a>

<script type="text/javascript">
    var slot = {
        testFun: function(){
            console.log('clicked');
        }
    }
    document.querySelector("a").addEventListener("click", slot.testFun);
</script>

edited May 23 '17 at 12:32

Community

1
1

answered Sep 12 '16 at 14:00

Quentin

914,110
126
1,211
1,335

or use `window.slot.testFun` in on*** attributes :p – Jaromanda X Sep 12 '16 at 14:03
2

@JaromandaX — That would work too, but is far away from best practise. Globals are best avoided in general. Separation of concerns is generally a good idea. – Quentin Sep 12 '16 at 14:04
1

but why in latest version of chrome only ? It works fine in latest version of firefox. I am facing this issue after I updated my chrome browser. – Santosh Pradhan Sep 12 '16 at 14:12
2

@SantoshPradhan Because the `slot` property is quite new and only supported in the latest releases. FF has the same problems with more common property names like `id` or `className` etc – Bergi Sep 12 '16 at 14:16

is 'slot' a reserve word in newer version of ECMAScript?

1 Answers1

Related