Explanation needed

Hi, I am a little confused about the const half, Why do we write a function inside a function, is it so that we can access the max and min? Please explain the code, thanks in advance.

Global vs local scope

this might help you understand what happens in and outside of functions

2 Likes

In what context is this being used? Because if I just take the code there as it is, there is no need for it. But I assume wherever it is being used, there is a reason:

If it’s from FCC’s ES6 section, it’s wrapped in the outer function for the benefit of the tests, it’s not really a special piece of functionality you need to learn in this case*. Only the function half ({max, min}) { return (max + min) / 2.0; } bit is important. Note that outer wrapper function pattern that’s confusing you is something that appears throughout the ES6 section, and there’s an open issue to remove all the wrappers as they’re unecessary & tend to confuse everyone.

* The outer function is there to create a little isolated environment in which the inner function runs. What it does is immediately execute, returning the inner function.It means you can put things where that empty line is before return function... and they’ll be available just to the inner function. Basically, this feature of the language was used by the tests to make sure the code worked and was checked properly

1 Like

I thought there was something fishy about an IIFE that only returned one function with nothing else in scope. In other words (to the OP) it’s copy-paste boilerplate code that other examples might need, but wasn’t necessary for this example.

1 Like

Thank you, it helps!

Hi, thank you for the reply, it helps!
Yes, this is from freeCodeCamp YouTube video " Learn JavaScript - Full Course for Beginners", part “use destructing assignment to pass an object as a function’s parameters”, but it didn’t explain the nested function.

I have another question: Why do we need the isolated environment?
I did some experiment, since what it does is immediately execute and returning the inner function(which return (min+max)/2), so I tried to remove the outer function but the code won’t run.

Why does this won’t work?
Capture

Can you explain to me, please?

Thank you for the reply!
Yes, but as far as I have noticed, in the video this code pattern has never been use in other example, it also jumps to other topic after this part, that’s why I am a little bit confused.

Ah, so this is actually simpler than it seems. The parentheses () are the syntax used in JS to tell it you want to execute a function: doSomething(). The thing you’ve written is a function that you get immediately executed as soon as that bit of code is read by the computer.

So this is just declaring a function:

const half = function({min, max}) {
  return (min + max) / 2;
};

You’ve assigned a function to the variable half, and you can execute that function by calling half() (and giving it the correct arguments!).

half({min: 10, max: 20})
// returns 15

But with your piece of code, you start off still assigning a function to the variable half, but when it gets to the end of the declaration, you execute that function.

const half = (function({min, max}) {
  return (min + max) / 2;
})();

So the value of half then isn’t a function you can execute, it’s whatever the value of that function was when it executed. In this case it’s going to throw an error because you’re executing it without any arguments:

function({min, max}) { return (min + max) / 2 }
// no arguments, so what executes is:
function() { return (undefined + undefined) / 2 }
// JS can't get `min` and `max` values if there are no values:
TypeError: Cannot destructure property `min` of 'undefined' or 'null'.

Note, just to hammer home what’s going on, it might make a bit more sense if I write it slightly differently:

const halfFunction = function({min, max}) {
  return (min + max) / 2;
};
const half = halfFunction();
1 Like

Got it and thank you for the reply!

Oh, thank you so much for the reply, now it makes a lot more sense to me. Thank you!

1 Like