Accessing a variable across different scopes in Javascript

Question

var todoList = {
  todos: []


  displayTodos: function () {
     console.log(this.todos[i].todoText);
}

  addTodo: function (todoText) {
    this.todos.push({todoText: todoText});
}
}

This isn't the complete program, but my question is this:

In the displayTodos function, how am I able to access todoText (in the console log line)?

Shouldn't the todoText variable that's declared in the addToDo function be limited in scope to the function in which it's declared, addToDo?

Thanks

http://stackoverflow.com/questions/4616202/self-references-in-object-literal-declarations — epascarello, Feb 01 '17 at 01:12
Your code is not complete, this is not a way to declare an object literal. You are missing the `,` between different properties. Also, javascript is dynamic language and hence the property `this.todos[i].todoText` would be evaluated at run time. If you call the function `displayTodo` before calling the function `addTodo` it will give an `TypeError` error. — Abhinav Galodha, Feb 01 '17 at 01:18
@Agalo is right, and it might still give an error after calling `addTodo`, depending on what `i` is. — Brian McCutchon, Feb 01 '17 at 01:20

Pineda · Accepted Answer · 2017-02-01T08:37:53.767

This has to do with the *context * of a function. Not scope, but context.

Scope:

This relates to what variables are visible to a function.

Functions have access to their local variables (declared inside the body of their definitions including any argument parameters which get added as local variables) and any variables in the enclosing scope that they are called.

Context (applies to OP question):

Has to do with how the function was called or what object it gets assigned to at the time it is called/invoked. More specifically, it defines what the value of this resolves to in a function definition.

An example

Let's make the assumption that you are calling these methods as follows:

todoList.addTodo("some text");
todoList.addTodo("other text");
todoList.dispayTodo(1); // made this singular, see below for explanation
// logs out > "other text"

In the case above all three functions are called as methods of the object todoList and in turn, the this value inside of both will refer to the todoList object.

After pushing an object that contains a property todoText into this.todos array you'll have the following array:

[
  {todosText:"some text"},
  {todosText:"other text"}
]

And you can access each stay element by pushing in the correct index to displayTodo (albeit with a slight modification to your code to accept the index as an argument)

var todoList = {
  ...
  displayTodo: function(i) {
    console.log(this.todos[i].todoText);
  }
}

@Bergi: thanks. I had to do a little reading so I could articulate my answer more clearly and have amended it accordingly. — Pineda, Feb 01 '17 at 08:39

score 2 · Answer 2 · answered Feb 01 '17 at 01:18

You can access todos because it is a property of the object you are creating, todoList.
todoText is not a variable, it's a property name for a new object you are creating and pushing to todos. Thus it can be used in any scope that has access to todos.

Technically, neither of the things you asked about is a variable. They are both properties of different objects that you are creating with the object literal syntax.

Accessing a variable across different scopes in Javascript

2 Answers2

Scope:

Context (applies to OP question):

Linked