rashid jorvee blog: JavaScript callback functions

Lets understand the callback fucntion in NodeJS using the below geocode example.

Here we have created geoCode function with two paramters, first parameter will take input of the location name and second parameter the function that needs to call. Similary, we can add or pass any number of paramters in fucntion as per need.

const geoCode = (location, callback) => {
const data = {
location: location,
latitude: 0,
longitude: 0
}
callback(data)
}

When we call the geoCode function, we are here passing a city name and second paramter a fucntion itself that print the return data from callback on console.

geoCode('New Delhi', (callbackData) => {
console.log(callbackData)
});

Return

{ location: 'New Delhi', latitude: 0, longitude: 0 }

Create a calculator using JavaScript callback function.

In this post we are going to create a calculator using simple HTML and JavaScript callback function. Using callback functions we have to write less code in compare to writing huge line of code using simple JavaScript functions. Callback and promises are the very useful and fastest way to write the code.

Without any further delay, lets start the coding to create a web based simple calculator using the javaScript callback functions. We will discuss the theory part of callback function and promises other article.

Create a html page with name calculator.html. copy the below code snippet and paste in calculator.html file.

<html>
<title>Calculator</title>
    <head>
        <script src="js/calculator.js"></script>
    </head>
<body>
<h3>Calculator</h3>
Number 1: <input id="number1" type="number"/><br /><br />
Number 2: <input id="number2" type="number"/><br /><br />
<input type="button" onclick="calc(addNum)" value="Add" id="add" />
<input type="button" value="Multiply" onclick="calc(multiplyNum)" id="multiply" />
<input type="button" value="Divide" id="divide" onclick="calc(divideNum)" />
<br /><br />
Result: <input id="result" type="number"/><br />
</body>

</html>

Now create a folder with name js in the same directory where you have created your html page, this js folder is to separate the js file from other files.

Now open the js folder and create a calculator.js file.

Copy the below js code snippet the paste it in your calculator.js file.

function calc(callback) {
    var n1 = parseFloat(document.getElementById("number1").value);
    var n2 = parseFloat(document.getElementById("number2").value);
    var result = callback(n1, n2);
    document.getElementById("result").value = result;
}

function multiplyNum(n1, n2) {
    return n1 * n2;
}
function divideNum(n1, n2) {
    return n1 / n2;
}
function addNum(n1, n2) {
    return n1 + n2;
}

Now open your calculator.html file in browser and see the result. below is the screen shot of the calculator.

callback function calculator

You may download the complete exercise from GitHub https://github.com/RashidJorvee/callbackFunctionJS

rashid jorvee blog

Menu

Callback function JavaScript and NodeJS

Create a calculator using JavaScript callback function.

Featured Post

Graded Response Action Plan (GRAP)

Author