# JS Tip of the Day: Function Name Bindings

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-function-name-bindings/643299>\
**Category:** web dev\
**Created:** [June 18, 2020, 1:19pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-function-name-bindings/643299 "2020-06-18T13:19:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [June 18, 2020, 1:19pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-function-name-bindings/643299/1 "2020-06-18T13:19:22Z")

</div>

**Function Name Bindings**  
Level: Intermediate

Named function expressions have an interesting behavior where they’ll create a variable binding of the function name with the function object local to the function body. This lets you easily refer to the function inside of the function if you’ve given it a name.

```javascript
// listener that immediately removes itself after first call
document.addEventListener('click', function hookHang (event) {

    // hookHang = the current function
    document.removeEventListener('click', hookHang);

    console.log('My father hung me on a hook once. ONCE.');
}); // ... or, alternatively, use the { once: true } option

```

Since this is local to the function, it does not create the variable in the parent scope.

```javascript
let parentFunc = function localFunc () {
    console.log(typeof localFunc);
    console.log(typeof parentFunc);
}
parentFunc();
/* logs
function
function
*/

console.log(typeof localFunc); // undefined (only exists in function)
console.log(typeof parentFunc); // function

```

This is not a behavior you’ll see with function declarations. Though they are also named, they only create a variable binding for that name in the parent scope. You can see the difference if you overwrite the name of the declaration while attempting to access it inside the function.

```javascript
let expr = function expr () {
    console.log(typeof expr);
}

let tempExpr = expr;
expr = undefined;
tempExpr(); // function (expressions work!)

function decl () {
    console.log(typeof decl);
}

let tempDecl = decl;
decl = undefined;
tempDecl(); // undefined (declarations don't)

```

You also get local name bindings for classes, though they work for both class expressions and class declarations.

```javascript
class NamedClass {
    constructor () {
        console.log(typeof NamedClass);
    }
}

let TempNamedClass = NamedClass;
NamedClass = undefined;
new TempNamedClass(); // function

```

More info:

- [Function expression on MDN](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function)
- [class on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)

* * *

More tips: [JavaScript Tips of the Day](http://forum.kirupa.com/t/javascript-tip-of-the-day/641803/1)