Return the Sum of Two Numbers

Creating a function that takes two numbers as arguments and return their sum.

Photo by Paul Esch-Laurent on Unsplash

Task: Return the Sum of Two Numbers

Instructions: Create a function that takes two numbers as arguments and return their sum.

Solution:

Let’s take a look at this task, understand its components, and improve upon it…

What are functions?

Functions are one of the fundamental building blocks in JavaScript. A function is composed of a sequence of statements called the function body, but for a function to qualify as one, it should take an input (as function parameters) and return an output where there is a relationship between the two.

Anatomy of a function

A Function definition (also known as function declaration or function statement) consists of the function keyword, followed by:

• The name of the function (addition);
• One or a list of parameters to the function, enclosed in parentheses and (in case there is more than one) separated by commas (a, b); and
• The JavaScript statements that defines the function, enclosed in curly braces, {...}.

While the function definition above is syntactically a statement, functions can also be created by a function expression. Such a function can be anonymous (given that it doesn’t have to be named). Refactoring our addition function we would have the following:

Using function expressions is convenient when passing a function as an argument to another function.

Arrow functions

Arrow function expressions have a shorter syntax (with limited functionality) compared to function expressions and are always anonymous.

There are two factors influencing the introduction of arrow functions: (1) shorter functions and (2) non-binding of this (for a later post).

In this case we can even opt for dropping the curly braces {...} and the return statement as they are implied. Refactoring our addition function, compare our previous with the following:

However, the curly braces {...}, the return statement, and even the parentheses () may be required in some cases. For example, if you have multiple arguments or no arguments, you'll need to re-introduce parentheses around the arguments. Similarly, if the body requires additional lines of processing, you'll need to re-introduce both the curly braces {...} and the keyword return.

What does the return statement do for my function?

The return statement ends function execution and specifies a value to be returned to the function caller. Its syntax return [expression]; includes an expression whose value is to be returned. If omitted, undefined is returned instead.

As opposed to several other JavaScript statements, the return statement is affected by automatic semicolon insertion (ASI). No line terminator (semicolon) between the return keyword and the expression would break the statement.

Data validation: typeof

What would happen if we would use any other type of parameter in our addition function? In order to make sure the function serves its purpose correctly, we can make use of the JavaScript typeof operator.

The typeof operator returns a string indicating the type of the unevaluated operand. For our addition function we want to make sure the user passes a primitive value parameter with a number type. Therefore, we would include the following JavaScript statement:

Notice that we purposefully used a tradicional if...else statement. The if statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed (optional). A very popular and learner alternative leads us to Conditional (ternary) operators.

Conditional (ternary) operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by the question mark (?), then an expression to execute if the condition is truthy, followed by a colon (:), and finally the expression if the condition is falsy. This operator is frequently used as a shortcut for the if statement. Finally, refactoring our typeof data validation and utilising the conditional (ternary) operator our function would look as follows:

Thank you for reading!
Codepen: Return the Sum of Two Numbers

Get in touch:
Whatsapp
ekheinquarto@gmail.com
Instagram
Github