typeof of an object property (number) on passing to IIFE is returning undefined. Why?

Question

How in the world the output is not number?

• There is a simple function (IIFE) which is being passed an object, property of which is a number
• When we are trying to find typeof of that property which refers to a number, the result is 'undefined'

How?

 <script> x = (function(foo){ return typeof(foo.bar); })({ foo: { bar: 1 } }); console.log(x); </script> 

Answer 1

If should be foo.foo.bar

foo parameter is an object with a property called foo in it

 x = (function(foo) { return typeof(foo.foo.bar); })({ foo: { bar: 1 } }); console.log(x); 

You probably meant to destructure the argument like this:

 x = (function({ foo }) { return typeof(foo.bar); })({ foo: { bar: 1 } }); console.log(x); 

Answer 2

foo is the argument. You have to access the properties inside the function using . notation

 x = (function(foo){ return typeof(foo.foo.bar); })({ foo: { bar: 1 } }); console.log(x); 

Answer 3

Your foo argument in your function is the entire object (not the nested one):

{ foo: { bar: 1 } }

So, when you do foo.bar there is no bar property, and so you get undefined .

Thus, typeof undefined will give you "undefined" . Instead, you can use clearer property names so the type of each object is easy to understand, and then access the foo property from your argument:

 x = (function(obj){ return typeof(obj.foo.bar); })({ foo: { bar: 1 } }); console.log(x); 

Answer 4

You can destructure foo in the function argument.

 let x = (function({foo}){ return typeof(foo.bar); })({ foo: { bar: 1 } }); console.log(x);