Scope

A bug was detected! The index of the last element in the photos array (4) and the value of i in our code (5) for any of the thumbnails we could click on. We do not have any element with this index in the photos array. Therefore, we receive undefined instead of the image address, and no image appears. But what is the real reason this is happening?

Let’s step back a bit from our assignment and explain one particularly important concept in JavaScript. This will help us solve the problem that we are having with our photo gallery.

Write the eatDinner function. It will output messages about our meal to the console. It has the drink parameter and the food variable.

var eatDinner = function (drink) {
  var food = 'pasta';
  console.log('I ate ' + food);
  console.log('I drank ' + drink);
};

eatDinner('fruit juice');
// Outputs: I ate pasta.
// Outputs: I drank fruit juice.

console.log('I ate ' + food);
// Outputs an error.

console.log('I drank ' + drink);
// Outputs an error.

If we try to access the food variable from outside the scope, we won’t succeed: the console will output an error. Because variables from the function body are only available inside this function. There is no way that you can access them from outside the scope.

The same thing will happen if we want to access the function parameter from outside the scope. The parameter, although it is set externally, behaves like a variable inside the function.

Why is that?

Because each function has a scope, which is defined as all of the values that are available to this function. The scope is limited to the function itself. Since the food variable has been declared inside the eatDinner function, it is accessible only inside the scope of this function, like the drink parameter. These variables are called local variables of the function. Their scope is limited by the function in which they are declared, and these variables cannot be obtained outside of this scope. Therefore, this scope is also called local.

Let’s prove this to ourselves. Call the function, and then try to access a parameter and variable from the body of the eatDinner function from outside of its scope.