JavaScript Program to Add Two Numbers

JavaScript is one of the leading programming languages these days. Almost every website in the world uses it either directly or indirectly. It is a powerful language and its applications are endless. Even a simple number addition can be approached differently based upon where and how we want to use it. So, let's look at the ways we can achieve our goal of adding two numbers using JavaScript.

JavaScript Program to Add Two Numbers

Prerequisites

We will be adding two numbers using the following methods.

  1. Simple Example to Add 2 Numbers
  2. Printing Sum of Numbers Entered by the User
  3. Adding Two Numbers Using a User Defined Function

1. Simple Example to Add 2 Numbers

const firstNumber = 10;
const secondNumber = 20;

const sum = firstNumber + secondNumber;

console.log(
  'Sum of firstNumber ' +
    firstNumber +
    ' and secondNumber ' +
    secondNumber +
    ' = ' +
    sum
); // Sum of firstNumber 10 and secondNumber 20 = 30

2. Printing Sum of Numbers Entered by the User

In this example, we will first take 2 number inputs from the user firstNumber and secondNumber and store them in variables. Then, we will add the two numbers and print the sum.

// ask for user input
const firstNumber = parseInt(prompt('Enter First Number'));
const secondNumber = parseInt(prompt('Enter Second Number'));

// perform addition of the two numbers entered by the user
const sum = firstNumber + secondNumber;

// prints the sum of firstNumber and secondNumber
console.log(`Sum of ${firstNumber} and ${secondNumber} = ${sum}`);
# output
Enter First Number 10
Enter Second Number 20
Sum of 10 and 20 = 30

In the above code,

What are template literals?

Marking up plain text is notoriously easy to get wrong, and even the experts make mistakes. However, when creating output from data, it becomes necessary to extend plain text into something more flexible. With template literals that process is made easier.

Template literals are a new form of literal that can be used within JavaScript to create strings. They were introduced in the 2015 edition of ECMAScript, to give string interpolation more consistency with other kinds of expressions by providing multiline syntax, and also to address a number of frequent problems with their use.

They can also be used to insert variables or expressions into a string. This is useful if you have to construct something involving strings, where those things are hard to compute on the fly or difficult to predict. It's just a shorthand that makes your code cleaner.

3. Adding Two Numbers Using a User Defined Function

A User Defined Function is a function provided by the user of a program or environment, in a context where the usual assumption is that functions are built into the program or environment. UDFs are usually written for the requirement of its creator.

In programming languages, functions are defined to perform specific tasks. These tasks may include mathematical operations, string operations and can also perform data processing. They can also be used to manipulate strings and arrays. In this context, user-defined functions are similar to built-in functions but they do not appear in the language's standard library like built-in functions do.

// add function that takes 2 numbers as arguments and returns the sum
function add(a, b) {
  return a + b;
}

// prompt user to enter first and second
var a = +prompt('Enter first number: ');
var b = +prompt('Enter second number: ');

// perform addition
var sum = add(a, b);

// print sum of the above two numbers in the html document using document.write
document.write('Sum of ' + a + ' and ' + b + ' is ' + sum);

Summary

In this tutorial, we have learnt how to add two numbers in JavaScript using different approaches. We have learnt how to take user input using the prompt function and perform addition on the numbers taken from the user. We also looked into user-defined function and how to use it to perform addition. We learnt using the template literals and document.write function to display the sum of two numbers in the html document.

Please checkout our related content section below for more tutorials on similar topics.


We hope that you have learnt something from our tutorials. Please feel free to share this content with your friends.


If you have any questions or want some other content to be added to our website so that it can help you learn and grow further, please do not hesitate to contact us at info@createmysite.org. We would love to hear from you.

We are hiring!! If you are tech blogger who loves writing content on modern technologies, we would love to get in touch with you. Just drop us a mail at the email address mentioned above and we will reach out to you as soon as possible.

If you are interested in learning more about our website, please visit our about page.