Scope

A bug was detected! The index of the last element in the photos array (4) differs from 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);
// Throws an error. Test the next example separately.

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. This is because variables declared inside the function body are only accessible directly inside this function.

The same thing will happen if we want to access the function parameter from outside the scope. Although its value is passed as an argument from outside, the parameter is local to the function.

Why is that?

Each function has a local scope, which determines where its parameters and local variables can be accessed by name. 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 accessed directly from outside 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.