Why doesn't my javascript function throw up an error?

Question

After invoking my function, I was startled that my function didn't throw up an error due having a variable & using a variable not define in the function's scope.

My question: Why doesn't my function throw an undefined,error, or the like? Shouldn't it throw up an error because "length" isn't in my function's parameter? I am aware that if I switch "length" to "height" it will work.

If someone could explain how javascript interprets this function in a step-by-step manner that would help me. Here is my code:

function areaRectangle(width, height) {
   aRectangle = width * length;
   console.log("The area of the rectangle is: " + aRectangle);
}
areaRectangle(10, 7); # The area of the rectangle is: 0

Answer 1

Because instead of an argument or variable it uses window.length property which happens to be 0.

Answer 2

This depends on which environment you execute this function in.

If you executed this in the browser, it seems like there is a length property in the global context which evaluates to a numeric value. When you execute your function in the console and it tries to access length, since length is not defined within your function, the JavaScript engine will look up the length variable in the global context (because of closure).

If you executed this in Node, you'll notice that an error gets thrown because the global context in Node doesn't have a length property.

Answer 3

You have not defined the length variable locally inside of your function. As a result when you invoke this function it looks up into its parent scope to find the value of the length variable.

Assuming this function is defined in the global scope then it would look up into the window object to find the value of length. In this case that would be window.length, which refers to the number of iframes in the current window. You can read more about window.length here:

That being said, we can fix this by modifying your original function. Since your function is trying to calculate the area of a rectangle we need to modify your original function so it calculates distance using both of your arguments. I would advise doing the following:

function areaRectangle(width, height) {
  aRectangle = width * height; // notice we changed the second variable to height
  console.log("The area of the rectangle is: " + aRectangle);
}
areaRectangle(10, 7); // This will result in 70.

Answer 4

You access the closest related parent scope variable when you don't declare it in the current block of code, so when you refer to length, if no declared variable exists it is resolved to the global scope in most execution enviroments. In the browser that context is window, so you are actually referencing window.length.

Realizing that answer is a little convoluted, here is an example of how it can resolve to local or parent scope variables.

If you did this,

<script>
    var length = "potato";
    function areaRectangle(width, height) {
        aRectangle = width * length;
        console.log("The area of the rectangle is: " + aRectangle);
    }
    areaRectangle(10, 7); // My number results in 0
</script>

you would get this in the console;

The area of the rectangle is: NaN

so if you did this,

<script>
    var length = "potato";
    function areaRectangle(width, height) {
  var length = height;
        aRectangle = width * length ;
        console.log("The area of the rectangle is: " + aRectangle);
    }
    areaRectangle(10, 7); // results is 70
</script>

you would get this in the console:

The area of the rectangle is: 70

This is because the variable length is declared in the local or another closer visible scope.

In your code, the variable is being bound to the global object (which is window in the browser), resulting in window.length.

Answer 5

length derives from window.length and that is a property that defines how many frames are within a given window context. 0 = no frames, 1 = 1 frame, N = N frames.

https://developer.mozilla.org/en-US/docs/Web/API/Window.length

This is not to be confused with the given property of Object.length, since window inherits from Object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Properties).

Answer 6

length is 0 at this time. It also happens to exist in global scope (window). I think you may have confused your variable names.

You are allowed to use the variable named length as an argument, but you don't do that here, so it uses the one in the global scope.

This is what you want:

function areaRectangle(width, height) 
{
    aRectangle = width * height;

    console.log("The area of the rectangle is: " + aRectangle);
}

areaRectangle(10, 7);

Answer 7

You try using use strict:

function areaRectangle(width, height) {
  'use strict';
  aRectangle = width * length;
  console.log("The area of the rectangle is: " + aRectangle);
}
areaRectangle(10, 7);

Open console...