{"id":1309,"date":"2016-01-20T07:42:48","date_gmt":"2016-01-20T07:42:48","guid":{"rendered":"http:\/\/frowningbear.com\/codebase\/?p=1309"},"modified":"2022-09-08T03:53:05","modified_gmt":"2022-09-08T03:53:05","slug":"returning-in-javascript-and-intoduction-to-closures","status":"publish","type":"post","link":"https:\/\/frowningbear.com\/codebase\/2016\/01\/20\/returning-in-javascript-and-intoduction-to-closures\/","title":{"rendered":"Returning in Javascript and Intoduction to Closures"},"content":{"rendered":"\n

Functions return a value of undefinded<\/code> by default, unless we explicitly tell it to return another value.<\/p>\n\n\n\n

How do we do that?<\/p>\n\n\n\n\n\n\n\n

function returnSomething() {\n\treturn 5;\n}<\/code><\/pre>\n\n\n\n
When we run the function it will return the value of 5<\/code>. We will see this in the developer console, but if we want to do something with it in our code we need to return it to a variable so we can access it once the function has completed running. So usually we do something like this:<\/p>\n\n\n\n
var myVar = returnSomething();<\/code><\/pre>\n\n\n\n
The function executes and the value of 5<\/code> is returned to the myVar<\/code> variable. So if we try to access it:<\/p>\n\n\n\n
console.log(myVar);<\/code><\/pre>\n\n\n\n
We will get the value of 5<\/code>.  In this case we returned a number, a primitive value, but we can return other things too\u2026 <\/p>\n\n\n\n
function returnSomething2() {\n\t\/\/ this object is not attached to a variable name yet. In a sense its an anonymous object, although that's not a terminology that's often used.\n\treturn {name: \"Tedwood\"};\n}\nvar myObj = returnSomething2();<\/code><\/pre>\n\n\n\n
The var myObj<\/code> now contains or refers to the object that was returned from the call to returnSomething2<\/code>. So now we can access properties of that object through its identifier myObj<\/code>, which is essentially like giving that object a name or more precisely, an identifier.  So myObj.name<\/code> yields “Tedwood”.<\/p>\n\n\n\n
How about returning a function?<\/p>\n\n\n\n
function returnSomething3() {\n    \/\/ inner function to return\n\treturn function() { \n\t\talert(\"Hello\"); \n\t};\n}\nvar myFn = returnSomething3(); <\/code><\/pre>\n\n\n\n
Note that the inner function is anonymous, so when its returned into the variable myFn<\/code>, we now have a way of identifying it and hence accessing it. So myFn<\/code> is sort of like a ‘name’ for that function.<\/p>\n\n\n\n
So we can now call myFn()<\/code> with parens after it to make it execute the function. We should see an alert box with “Hello”.<\/p>\n\n\n\n
Note also that if we just run returnSomething3<\/code> without assigning it to a variable, like the following: returnSomething3();<\/code> we won’t see the alert box because the outer function is not executing the inner function, it is only returning a function definition that can be ran later.<\/p>\n\n\n\n
Closures<\/h2>\n\n\n\n
Now that we know how to return a function from another function, we can look at the topic of closures, which is much easier to grasp than it might at first seem.<\/p>\n\n\n\n
Essentially, our returned function can still access the variables and parameters of the outer function, even after the outer function has finished executing.<\/p>\n\n\n\n
function returnSomething4() {\n\tvar x = 8;\n    \/\/ inner function to return. It will 'close' over the variables inside the outer function, so that when we later run it, it will still be able to access those variables. \n\treturn function() { \n\t\talert(x); \n\t};\n}\nvar myFn = returnSomething4(); \/\/ alerts 8<\/code><\/pre>\n\n\n\n
Note:<\/strong> the inner function which is returned is referred to as a closure<\/strong> because it closes over<\/strong> the variables that exist in the execution context of the outer function. <\/p>\n","protected":false},"excerpt":{"rendered":"
Functions return a value of undefinded by default, unless we explicitly tell it to return another value. How do we do that?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[53,55,54],"class_list":["post-1309","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-closure","tag-function","tag-return"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=1309"}],"version-history":[{"count":8,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1309\/revisions"}],"predecessor-version":[{"id":1392,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1309\/revisions\/1392"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=1309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/categories?post=1309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/tags?post=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}