edit-article

Article Description: ] understanding the callback, what it is, where and when to use it, how to create one,

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">callbacks</h1> <h2>[WHAT]</h2> <ol> <li>] a callback ( also known as "higher order function") is a simply a function that is passed to another function as an arguement and executed inside the function that it is passed into&nbsp;</li> <li>] the passed function can be passed by value(byVal) or by Reference(byRef) as an arguement to another function,</li> <ol> <li>by value means your are passing the entire function definition</li> <li>by reference means you are passing the name of a function that has</li> </ol> <li>] when the first function completes execution, the callback function will begin execution</li> <li>] essentially a "pattern", derived from a programming paradigm called functional programming. <span style="background-color: #ffff00;">At a simple and fundamental level, functional programming is the use of functions as arguments.&nbsp;</span></li> </ol> <h2>[WHY]</h2> <ol> <li>] In JavaScript, functions are first-class objects, which means functions can be used in a first-class manner like objects, since they are in fact objects themselves:&nbsp;</li> <ol> <li>] they can be passed as arguments to functions</li> <li>] they can be &ldquo;stored in variables,&nbsp;</li> <li>] they can be created within functions, and&nbsp;</li> <li>] they can be returned from functions&rdquo; [1].</li> </ol></ol> <h2>[WHERE]</h2> <ol> <li>] you want to execute a 2nd(or more) functions after your first function is called</li> </ol> <h2>[WHEN]</h2> <ol> <li>]&nbsp;</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li><strong>] lets say that we have 2 functions,&nbsp;</strong></li> <ol> <li>] <em>function goToStore()</em></li> <li>] <em>function getDirectionsToStore()</em></li> </ol> <li><strong>] in order for us to use the 2nd function we need to know the returned value of the first function</strong></li> <ol> <li>] we will use a callback to perform/execute the 2nd function after the first function has completed</li> </ol> <li><strong>] pass by val - passes the entire function body to the calling function</strong></li> <ol> <li>] <em><em>function goToStore(getDirectionsToStore()<em></em></em></em> <div style="font-style: normal; display: inline !important;">{</div> <div style="font-style: normal;">&nbsp; &nbsp; var storeId = input("what store do you want to go to? Enter the store id");&nbsp;</div> <div style="font-style: normal;"> <div style="font-style: normal; display: inline !important;">&nbsp; &nbsp; return storeId;</div> </div> <div style="font-style: normal;"> <div style="font-style: normal; display: inline !important;">}</div> <em><em></em>)</em>&nbsp;</div> </li> </ol> <li><strong>] pass by reference - passes just the 'name of' the function, (and any arguements)&nbsp;</strong></li> <ol> <li>] function goToStore(getDirectionsToStore());</li> </ol> <li><strong>] ? when to use pass by value VS pass by reference</strong></li> <ol> <li>]&nbsp;</li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li>]&nbsp;implementing callback functions is as easy as passing regular variables as arguments to functions</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>]&nbsp;<a href="http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/" target="_blank">http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/</a></li> </ol> <p>&nbsp;</p> <hr /> <div><ol> <li>] getDirectionsToStore(goToStore)</li> <li>] buyGroceries(groceryList)</li> <li>] goHome(getDirections)</li> <li>] cookDinner(recipe)</li> <li>] eat dinner() </li> </ol></div> <p>&nbsp;</p> <div><hr /></div> <div><em>function goToStore(storeId){</em></div> <div><em>&nbsp; &nbsp;return directions = select * from directions where start = home and end = storeId ;</em></div> <div><em>}</em></div> <div><em><br /></em></div> <div> <div><hr /></div> <div><em>function getDirectionsToStore(){</em></div> <div><em>&nbsp; var storeId = prompt("what store do you want to go to? Enter the store id");</em></div> <div><em>&nbsp; return storeId ;</em></div> <div><em>}</em></div> </div> <h1 style="text-align: center;">&nbsp;</h1>