Unable to access const variables through this in Javascript

Question

I was exploring ES6 const keyword, everything is working for me, except some scoping issue which I am unable to understand.

I have a a simple js file

    const reducer = (state = 0,action) => {
    switch(action.type) {
        case 'Increment' : 
            return state+=1;
        case 'Decrement' :
            return state-=1;
        default :
            return state;       
    };
}

const {createStore} = Redux;
const store = createStore(reducer);

const getstate = () => {
    return store.getState();
}

// var getstate = () => {
//  return store.getState();
//} it is working

store.subscribe(() => {
    console.log(this);
    console.log(this.getstate());
    //console.log(getstate());   it is working
})
store.dispatch({type:'Increment'});

In my subscriber method this.getstate is returning myjs.js:20 Uncaught TypeError: this.getstate is not a function when I change const getstate to var getstate , it started working . Also when I changed this.getstate to getstate, it is also working

From browser console I can access getstate but I am unable to access this.getstate. this here is in Window scope, but then why it is unable to access const variable?

Isn't its normal behaviour of `const` scope ? https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/const — cjmling, Sep 20 '16 at 05:54
What is printing `console.log(this);` inside the `subsribe` method? — ianaya89, Sep 20 '16 at 06:06
Just drop the `this.`! `getstate` is a plain variable, not a property — Bergi, Sep 20 '16 at 10:11

score 0 · Answer 1 · answered Sep 20 '16 at 06:42

0

The problem you have is when you create a variable with const, this is is not accessible through window object (although the variable is global). I recommend to avoid creating global functionality and organice your code with practices as IIFE or module patterns.

If you want to keep your way, the best you can do is to add semantic to your code an attach de variable directly to the window object. Doing that your intention will be clear:

window.getstate = () => {
    return store.getState();
}

answered Sep 20 '16 at 06:42

ianaya89

4,153
3
26
34

can you point me to some mdn doc or any doc which says const is not accessible through window object – Avinash Agrawal Sep 20 '16 at 06:57
I am trying to find that, I know it because I deal with this before and was my own conclusion. – ianaya89 Sep 20 '16 at 07:01
@AvinashAgrawal [Do `let` statements create properties on the global object?](http://stackoverflow.com/q/28776079/1048572) – Bergi Sep 20 '16 at 10:15

score 0 · Answer 2 · answered Sep 20 '16 at 08:48

when you call this.getState, it will look from bottom to top to find getState variable.

global context which is window object -- TOP -- find getState in window object, if not return undefined
  ---> local context which is your current file -- find getState in this file, if not go up
    ----> current method which is () => { 
        this.getState() <-- find getState in this function, if not go up 
      } BOTTOM

According to this doc:

Constants are block-scoped, much like variables defined using the let statement.

that means when you defined const getState, it's only available in your current file.

When you defined var getState which is NOT block-scoped and getState variable will be available globally.

if const getState is only available in current file, then how it is accessible in console, I can access `getState` but not `this.getState` — Avinash Agrawal, Sep 20 '16 at 14:30

Unable to access const variables through this in Javascript

2 Answers2