Methods confusion

JavaScript
1 
const dog = {
  bark: function () {
    console.log('Woof!');
  },
  barkTwice: function () {
    this.bark();
    this.bark();
  }
};
dog.bark();
// Woof!

dog.barkTwice();
// Woof!
// Woof!

But what if we just wrote bark(); instead of this.bark(); in barkTwice ? The function would have first looked for a local variable named bark in the scope of barkTwice . If bark isn’t found, it would have looked further up the scope chain.

Is the above statement correct?
What i do not understand about the above statement:
If I call the barktwice method on the dog object in the modified example as seen below, then why does it return a Reference Error, it should find the variable bark, its not in a private scope which is inaccessible by barkTwice.

const dog = {
  bark: function () {
    console.log('Woof!');
  },
  barkTwice: function () {
    bark();
    bark();
  }
};
dog.bark();
// Woof!

dog.barkTwice();
// Uncaught ReferenceError: bark is not defined
    at Object.barkTwice
2

Edit: What I said before was incorrent that barkTwice should have access to bark, because I see:

var bark= 'global bark'

const dog = {
  bark: function () {
    console.log('Woof!');
  },
  barkTwice: function () {
    console.log(bark);
  
  }
};
dog.barkTwice();
//Global bark

but still why does it skip over bark when the barkTwice method is called on the dog object?

3

edit: I removed this answer because it was confusing and unhelpful.

4

I agree with what you say, however i need to see proof. tell me how I can see the closures that barkTwice has. Why does it have to go up the scope chain in the first place? bark is in the local scope of barkTwice

5

tell me how I can see the closures that barkTwice has … bark is in the local scope of barkTwice

I think I see the confusion now. What you are seeing on the dog object aren’t JavaScript closures. They’re just brackets which are part of the syntax for defining an object. If bark and barkTwice were in a function, as you said, they would be in the same scope.

function makeNoise() {
  function bark() {
    console.log('Woof!');
  }
  function barkTwice() {
    bark();
    bark();
  }
  barkTwice();
}
makeNoise();
// Woof!
// Woof!

This would create a function named makeNoise with two functions inside it, bark and barkTwice. The function then calls barkTwice once, which then calls bark twice, which it can see because as you said it is within the same local scope. It is within the same function closures.

However with something like this,

const myObject = {
    key: 'value'
}

These brackets aren’t closures and they aren’t defining scope. These brackets are part of the syntax for defining an object in JavaScript. You’re making an object that has a key of key and a value of 'value'.

This is just one way of making a thing called an “object.” Here is another way to make the exact same thing.

const myNewObject = new Object();
myNewObject['key'] = 'value';

Likewise, in your dog example, you’re creating an object named dog which has a key named bark whose value is a function which logs “Woof!”. Here is an example of making your dog object using this same notation;

const dog = new Object();
dog['bark'] = function() {
	console.log("Woof!");
}
dog['barkTwice'] = function() {
	this.bark();
  this.bark();
}

This is not the preferred syntax, by the way, but it accomplishes the same thing as your original example.

2 Likes
6