How can you use the 'this' keyword inside of a function signature to set a default parameter?

Question

I have a function that is bound to a React component:

    functionName(param1, param2 = this.state.field) {

    }

I've never heard of the 'this' keyword being used within a function signature in Javascript and am wondering if the context of 'this' will be the containing object or the global scope. Does this function need to be bound to the proper context before I can use 'this' properly within the signature?

What are you trying to bind the `this` context to? The component? The function? The global object? — mhodges, Jul 11 '17 at 17:02
Nothing. I'm simply trying to determine if the context of this within the function signature will be the context of the containing object (the react component the function itself is bound to) — Zachary Bennett, Jul 12 '17 at 02:17

score 2 · Accepted Answer · answered Jul 12 '17 at 02:33

2

I am wondering if the context of 'this' will be the containing object or the global scope.

Neither. Default values are not evaluated outside the function, but inside the call. The this keyword will point to the same value it would in the body of the method - the receiver of the call. So if the function was bound to your react component, that is what this will be.

answered Jul 12 '17 at 02:33

Bergi

630,263
148
957
1,375

Ah that makes sense! I didn't know that the default value was set inside the function body. Thanks for knowledge. So I'm guessing if the function is not bound to anything then the context of this will be the containing object... unless the function is a nested unbound function – Zachary Bennett Jul 12 '17 at 02:48

score 1 · Answer 2 · edited Jul 11 '17 at 18:19

If the function is within a class that is extending the React.Component class from react library. "this" keyword refers to the current object in context of it's class. For example:

import React from 'react';
class example extends React.Component {
    this.state = {
        field: "this variable!"
    }
    functionName(param1, param2 = this.state.field) {
        console.log(param2);
    }   
}

As you observe, this.state is a property of example class simply being called at the second argument, which will return the value of the field property of this.state object.

If you wonder it is doable or not. Well, JavaScript is a multi-paradigm language, and if intended to use it in a functional paradigm, this can definitely be acceptable.

I'm not sure if I agree with any use of the 'this' keyword being considered functional. — Zachary Bennett, Jul 12 '17 at 02:26

How can you use the 'this' keyword inside of a function signature to set a default parameter?

2 Answers2