Javascript 'Nesting inception'

Ive been posting a lot here lately, sorry for so many open ended question. Ive just started to learn React and Its really opening up the concepts of how code works in my mind. So I really have tons of questions and in addition to searching docs and YouTube videos, I would love certain things explained to me.

You guys have been helping me understand so much and Im eternally grateful :pray:

Ok. So my question is how do you guys deal with Javascript nesting? Well, I guess it’s not inherently a “Javascript” thing, and more of a programing thing in general.

At first, I thought I really didn’t understand functions. Im sure theres still much for me to learn about how functions work. But really I suppose my biggest hurdle is understanding how created functions become nested into other functions as arguments, and then placed inside other functions and then that being placed inside an argument etc. etc.

I didn’t realize how deep the inception went until I started learning React. How does one keep up :man_shrugging:?

Is there a way to specifically practice nesting and arguments? What tips do you recommend for understanding how more complex function application works? I feel like once I begin to understand the complexities of code nesting, my skills will skyrocket because nesting is (apparently) such a big part of coding :face_with_monocle:.

Im so accustomed to creating a function that does something. But, creating a function that goes inside another functions arguments is a little hard to wrap my head around.

Any advise on better understanding this? Ive seen lots of Youtube videos that use nesting and kinda explain what they are doing but I struggle to understand what it is that they are REALLY doing on a fundamental level.

Any help is greatly appreciated. Thank you.

This is a good example of what im speaking of. Creating a huge functioning then placing it inside another relatively complicated function… Ive started encountering this a TON now that im learning React. Its a lot to digest.

*Ive set it to the point in the video that this event happens.

I think that you hit the nail on the head when you guessed that it came down to understanding functions.

A really common experience for new programmers is to think of a function as a “thing”. For a variable containing a number (for example) we know that there is a literal numerical value stored in a specific memory location, and that’s what the variable represents. I think that a lot of people conceptualize a function sort of like an assembly line that they put parameters into. Instead, try to think of a function as a set of instructions.

For computer programs, a function is sort of like a recipe is for a baker. It’s a set of instructions that you can follow whenever you’re told to. Multiple people in a bakery can be following the same recipe on their own at the same time. As long as you follow the instructions, you’ll get the same results. You asked about a function that takes another function as one of the arguments or calls another function within it. This is like when a recipe for pie says “make a crust, using your favorite recipe”. The instructions include telling you to follow another set of instructions from somewhere else. You can’t move on to the next step until you do that.

It may seem silly to use a metaphor like that, but fundamentally a function really is a set of instructions that are stored in one place and can be used whenever you need it.

2 Likes

This is super helpful! Your perspective makes a lot of sense. Ive really been taking this time recently to stop and understand functions in hopes that when I come back to actually writing code, I will be able to understand what is going on a bit better.

Thats a brilliant way of explaining it. This makes sense to me in the terms of having a function inside of another function, but what about a function as an argument? Is the same process applied? If so what is the significance of having the function explicitly placed in an argument? :thinking:

Thanks for your help! I really like your cooking analogy :+1:

Sure. The fact that the function is passed as an argument doesn’t change how it works.

It allows the caller to specify what function is used. Sometimes you want that flexibility.

For example: sorting. There are a lot of ways that you could compare two items to sort them. So when we call sort() we can provide a function that tells the sorter how to compare.

1 Like

Hmm ok that makes sense but maybe im having a hard time understanding because im not thinking of the function that would be passed into the sort function.

So basically the function that’s being passed in as an argument is a function that would ideally be designed for the purpose of being passed in correct?

I think maybe thats where I get confused.

So for example, it wouldn’t work to pass in a function like sayHello() that only console.log 's a “hello username” string.

In a sense all (or most) function arguments have to in some way, “work with” the function thats its being passed into? As opposed to going in the body of a function where, if you just want to call the sayhello function you can just add it in there and it will work?

Does it make sense what im inferring?

Eh.
In some cases you might have a function that is written specifically to be used as a callback. For example, you might have a bunch of different callback functions for sorting, and you conditionally pass one in. But that isn’t a requirement.

So yeah, you could pass around sayHello() as an argument.

const meetPerson = async (name, talkFn) => {
    peopleIKnow.push(name);
    talkFn(name);
};

meetPerson('Jack', sayHello);

This is perfectly valid. It’s silly and unrealistic, but so is having a function that only has a console.log statement.

1 Like

Ok, that makes sense. And upon understanding functions a little bit more, I kinda understand things a better.

Thanks for your help. I will have to keep practicing :pray:

I’m glad I could help. Happy coding!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.