Object property called with dot notation showing console.log 'undefined'

Question

fairly new to Javascript.

Can I please get an explanation why object property of displayMyList when accessed with dot notation logs as ‘undefined’ but when put in a function it works fine. Why does it show undefined with just the console log? Why doesn't it get displayed and why does it need a function to do so.

Here’s the code.

var toDoList = {
// Holding the List 
myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
// Displaying the List
displayMyList: console.log(this.myList)
}

This will display it as ‘undefined’ when I try to access the object property displayMyList with dot notation. However when a method is used it displays the list fine. I am wondering why is that?

 var toDoList = {
    // Holding the List 
    myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
    // Displaying the List
    displayMyList: function(){
  console.log(this.myList)
}
    }

user_2672947 · Answer

First of all, check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

var toDoList = {
  // Holding the List 
  myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
  // Displaying the List
  displayMyList: console.log(this.myList)
}

There are a couple problems here with your first example above.

First, you are setting a property in toDoList called displayMyList to the RETURN VALUE of console.log(this.myList). console.log() does not return any value (see: https://developer.mozilla.org/en-US/docs/Web/API/Console/log) so the value being assigned to displayMyList will always be undefined.
And second, it will evaluate this and see what it returns (at this time this refers to the global this unless it has otherwise been set to another context. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis. So you'll be looking at the property myList of globalThis (or otherwise what this is bound to in that context).

var toDoList = {
  // Holding the List 
  myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
  // Displaying the List
  displayMyList: function() {
    console.log(this.myList)
  }
};

This fixes those, you are:

Assigning displayMyList to be a FUNCTION that you will run later in the context of toDoList being this.

Note how the use of function keyword here rebinds this to the containing object.

If you defined the function without function keyword, e.g. displayMyList: () => console.log(this.myList), it would also not work because arrow functions do not rebind this. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Similarly, even if you used the function keyword. If you called the function in a different way, it would also not work. Examples below:

// Won't work
const x = toDoList.displayMyList;
x();

// Won't work
toDoList.displayMyList.call(globalThis);

// Won't work
toDoList.displayMyList.apply({});

user_8993080 · Answer

You'll want to use an object method to log your list

var toDoList = {
  // Holding the List 
  myList: ['List1', 'List2', 'List3', 'List4', 'List5'],
  // Displaying the List
  displayMyList() { console.log(this.myList) },
}


toDoList.displayMyList()

Object property called with dot notation showing console.log 'undefined'

2 Answers