Still having difficulty getting your head around passing function values as arguments to other functions? Try these examples with explanantions.<\/p>\n
<\/p>\n
\/\/ doSomething defined as a function expression\nvar doSomething = function (passedFunction) {\n \/\/ call the function parameter that was passed as\n \/\/ an argument to doSomething\n passedFunction(); \/\/ i.e. hello(), goodbye() or any other function\n};\n \n\/\/ just a normal function declaration which we\n\/\/ will pass to doSomething\nfunction hello() {\n alert(\"Hello\");\n}\n \n\/\/ another function we could pass to doSomething\nfunction goodbye() {\n alert(\"Goodbye\");\n}\n \n\/\/ run doSomething with hello as its argument\ndoSomething(hello);\n \n\/\/ hello is passed to the passedFunction param of doSomething\n\/\/ inside of doSomething its as if it said hello() instead of \n\/\/ passedFunction(). By using the passedFunction variable we \n\/\/ can pass any function we like to doSomething<\/pre>\nIn the previous example we simply ran a function inside doSomething. We didn’t need to return it, we just executed it because it was just a simple function that alerted a string of text. Its simple enough for illustration purposes but more likely we would have a different kind of function and we would want to return a value. Consider this modified example.<\/p>\n
\/\/ hello function modified to RETURN a value instead of alerting\n\/\/ so we'll make doSomething return THOSE values\n \nvar doSomething = function(paramOne, paramTwo, passedFunction) {\n \/\/ return the result of calling the function\n return passedFunction(paramOne, paramTwo); \n};\n \nfunction hello(a, b) {\n return \"Hello \" + a + \" \" + b;\n}\n \n\/\/ run doSomething with hello as its argument\nvar foo = doSomething(\"Tedwood\", \"Peacock\", hello);\nalert(foo);\n \n\/\/ What did we just do?\n\/\/ we execute doSomething with 3 arguments\n\/\/ the third of those arguments will go into the \n\/\/ passedFunction param\n\/\/ in other words the function that runs inside doSomething \n\/\/ will be the hello function\n\/\/ the first 2 arguments to doSomething will become the 2\n\/\/ arguments supplied to the hello function\n\/\/ the hello function returns the string \"Hello\" concatenated\n\/\/ with the other 2 arguments\n\/\/ so what we end up doing inside doSomething is effectively\n\/\/ the following:\nreturn hello(\"Tedwood\", \"Peacock\");\n\/\/ This returns the string \"Hello Tedwood Peacock\"\n\/\/ that string then gets returned from doSomething and placed \n\/\/into the foo variable\n\/\/ then we alert the contents of that variable<\/pre>\nIf thats still not clear, consider the following:<\/p>\n
var doSomething = function(paramOne, paramTwo, passedFunction) {\n \/\/ execute the passed function and put result in bar\n var bar = passedFunction(paramOne, paramTwo);\n return bar;\n };\n \n function hello(a, b) {\n var str = \"G,day \" + a + \" \" + b;\n return str;\n }\n \n \/\/ declare empty variable foo\n var foo;\n \n \/\/ run doSomething and put result in foo\n foo = doSomething(\"Tedwood\", \"Peacock\", hello);\n \n \/\/ now do whatever you want with foo. \n \/\/ Alert it, log it, write it to the page or\n \/\/ pass it to another variable or function etc\n alert(foo);\n \n \/\/ I like to visualise it by working backwards\n \n \/\/ run hello(\"Tedwood\", \"Peacock\");\n \/\/ that gives the string \"G,day Tedwood Peacock\"\n \/\/ put that string in the variable bar\n \/\/ return that string to the variable foo<\/pre>\n","protected":false},"excerpt":{"rendered":"Still having difficulty getting your head around passing function values as arguments to other functions? Try these examples with explanantions.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/297","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":0,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}