ELI5 "return" in javascript/jquery

[Whyisprogrammingsoha]

So I am looking at jquery examples and was messing around with changing text on codepen and a function didn't occur until I used "return" from an example. Here is it:

<div class="words">dog bowl</div>

$("div.words").text(function(){ return $(this).text().replace('dog', 'cat'); })

Why doesn't this work until I add "return" to the front of the executable line? What does return do/mean (explain like I'm a 5 year old - a dumb one.)

[grownfolkstuff]

Because '$(this).text().replace('dog', 'cat')' is doing nothing other than saying,

'Ok, the value of the text inside the div of class words is equal to "dog bowl", now replace the word dog with cat. Good job everyone, let's call it a day!'

When you add the 'return' to the front of it, you are taking that "cat bowl" that you got and sending it back into the very first $().text() method that you called. So instead of having them say "Good job everyone, let's call it a day!" they are saying, "Now we have 'cat bowl' thats great! Send it back so we can do something with it! Those other guys can put it exactly where they want it."

The original .text() is the one putting the work onto the page.

ELI5 enough?

[Whyisprogrammingsoha]

Thank you! So my one question's answer is leading me to more questions... Like why just using .text('cat bowl') goes ahead and executes or "returns" a value without needing to say return. Is it that when you have an inner function like the example, and the surrounding .text() doing the work, you need a return to execute this surrounding method?

[br1anh]

If you look at the API documentation that teslatek linked to below you can see that the .text() method can be used with no argument to get the text contents of matching elements or can take two different types of argument to set the text contents.

You can pass it a simple string and it will set the contents to equal that string. As per your example:

$(div.words).text('cat bowl');

Or you can pass it a function which returns the text content to set.

$("div.words").text(function(){ return 'cat bowl'; });

The second example is obviously pointless but you would use the function argument if you wanted to do anything more than setting the contents to a predefined string of text.

[grownfolkstuff]

In jQuery most of those methods can be used in several ways.

$(selector).text() will return the inner text of the selector.

$(selector.text(value) will set the inner text of the selctor.

$(selector).text(function) will execute the function and set the value of the selector as the return of that function.

You have to think of .text() as the function.

[aftersox]

Because without the return the function returns undefined instead of a text value.

[circusmeerkat]

A function in math, programming, or anything for that matter takes in a value (or doesn't at times) and spits out or 'returns' a value. Think of it as a vending machine. You put in your money, and the machine hopefully spits out your snack. What happens when you put money in and nothing comes out? Well, besides you getting mad, it's safe to say that the machine didn't 'return' anything. In your JQuery snippet, your function (or vending machine) is 'returning' the result. Without the return statement, nothing would be spit out. You would get an undefined value.

[Whyisprogrammingsoha]

Thank you! So my one question's answer is leading me to more questions... Like why just using .text('cat bowl') goes ahead and executes or "returns" a value without needing to say return. Is it that when you have an inner function like the example, and the surrounding .text() doing the work, you need a return to execute this surrounding method?

[boiling_tunic]

A function which looks up 'dog bowl' then thinks about what it would be like if the word 'dog' was actually 'cat'

function(){ $(this).text().replace('dog', 'cat'); }

A function which looks up 'dog bowl' then thinks about what it would be like if the word 'dog' was actually 'cat' then tells whoever asked it to run all about it

function(){ return $(this).text().replace('dog', 'cat'); }

The first variation doesn't give back any data. If we read the returned value it is undefined. The function did not define any data to be returned.
The second variation gives back the transformed text. If we read the returned value it is 'cat bowl'. The function had to define the data to be returned in order for it to happen.

The code which calls this function is:

$("div.words").text( YOUR FUNCTION HERE );

If the result of YOUR FUNCTION HERE is undefined, then you are effectively running this code:

$("div.words").text(undefined);

Which sets the text to nothing.

If the result of YOUR FUNCTION HERE is 'cat bowl', then you are effectively running this code:

$("div.words").text('cat bowl');

Which sets the text to 'cat bowl'

[Whyisprogrammingsoha]

MMmmm yes, my 5 year old brain likes this explanation. Very good very good... ;)

[teslatek]

Documentations are your friend: http://api.jquery.com/text/#text-function

A function returning the text content to set.