---
title: "Understanding this in Javascript object literal"
description:
  "this is an important concept in JavaScript and meaning of this could be hard
  to understand in some cases. This blog take a look at what this is."
canonical_url: "https://www.bigbinary.com/blog/understanding-this-in-javascript-object-literal"
markdown_url: "https://www.bigbinary.com/blog/understanding-this-in-javascript-object-literal.md"
---

# Understanding this in Javascript object literal

this is an important concept in JavaScript and meaning of this could be hard to
understand in some cases. This blog take a look at what this is.

- Author: Neeraj Singh
- Published: August 6, 2009
- Categories: jQuery

Here is code.

```javascript
var foo = {
  first: function () {
    console.log("I am first");
  },

  second: function () {
    console.log("I am second");
  },
};

foo.first();
foo.second();
```

Everything works fine.

Now there is a need for function `second` to call function `first`. Try this and
it will fail.

```javascript
var foo = {
  first: function () {
    console.log("I am first");
  },

  second: function () {
    console.log("I am second");
    first();
  },
};

foo.second();
```

One way to fix this problem is to hardcode value `foo` inside the `second`
function. Following code works.

```javascript
var foo = {
  first: function () {
    console.log("I am first");
  },

  second: function () {
    console.log("I am second");
    foo.first();
  },
};

foo.second();
```

Above code works but hardcoding the value of `foo` inside the object literal is
not good. A better way would be to replace the hardcoded name with `this` .

```javascript
var foo = {
  first: function () {
    console.log("I am first");
  },

  second: function () {
    console.log("I am second");
    this.first();
  },
};

foo.second();
```

All is good.

## Chasing this

Javascript allows one to create function inside a function. Now I am changing
the implementation of method `second`. Now this method would return another
function.

```javascript
var foo = {
  first: function () {
    console.log("I am first");
  },

  second: function () {
    return function () {
      this.first();
    };
  },
};

foo.second()();
```

Also note that in order to invoke the returned function I have double `()()` at
the end.

Above code does not work. It did not work because `this` has changed. Now `this`
in `second` function refers to the global object rather than referring to the
`foo` object.

Fix is simple. In the function `second` store the value of `this` in a temporary
variable and the inner function should use that temporary variable. This
solution will work because of Javascript's inherent support for closure.

```javascript
var foo = {
  first: function () {
    console.log("I am first");
  },

  second: function () {
    var self = this;
    return function () {
      self.first();
    };
  },
};

foo.second()();
```

## Links

- [Human page](https://www.bigbinary.com/blog/understanding-this-in-javascript-object-literal)