-
Functions
- Function Declaration
- Function without a parameter and return
- Function returning value
- Function with a parameter
- Function with two parameters
- Function with many parameters
- Function with unlimited number of parameters
- Anonymous Function
- Expression Function
- Self Invoking Functions
- Arrow Function
- Function with default parameters
- Function declaration versus Arrow function
Functions
So far we have seen many builtin JavaScript functions. In this section, we will focus on custom functions. What is a function? Before we start making functions, lets understand what function is and why we need function?
A function is a reusable block of code or programming statements designed to perform a certain task.
A function is declared by a function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with argument. A function can also take a default parameter. To store a data to a function, a function has to return certain data types. To get the value we call or invoke a function.
Function makes code:
- clean and easy to read
- reusable
- easy to test
A function can be declared or created in couple of ways:
- Declaration function
- Expression function
- Anonymous function
- Arrow function
Function Declaration
Let us see how to declare a function and how to call a function.
//declaring a function without a parameter
function functionName() {
// code goes here
}
functionName(); // calling function by its name and with parentheses
Function without a parameter and return
Function can be declared without a parameter.
Example:
// function without parameter, a function which make a number square
function square() {
let num = 2;
let sq = num * num;
console.log(sq);
}
square(); // 4
// function without parameter
function addTwoNumbers() {
let numOne = 10;
let numTwo = 20;
let sum = numOne + numTwo;
console.log(sum);
}
addTwoNumbers(); // a function has to be called by its name to be executed
function printFullName() {
let firstName ="md";
let lastName = "shaikh";
let space = " ";
let fullName = firstName + space + lastName;
console.log(fullName);
}
printFullName(); // calling a function
Function returning value
Function can also return values, if a function does not return values the value of the function is undefined. Let us write the above functions with return. From now on, we return value to a function instead of printing it.
function printFullName() {
let firstName = "md";
let lastName = "shaikh";
let space = " ";
let fullName = firstName + space + lastName;
return fullName;
}
console.log(printFullName());
function addTwoNumbers() {
let numOne = 2;
let numTwo = 3;
let total = numOne + numTwo;
return total;
}
console.log(addTwoNumbers());
Function with a parameter
In a function we can pass different data types(number, string, boolean, object, function) as a parameter.
// function with one parameter
function functionName(parm1) {
//code goes her
}
functionName(parm1); // during calling or invoking one argument needed
function areaOfCircle(r) {
let area = Math.PI * r * r;
return area;
}
console.log(areaOfCircle(10)); // should be called with one argument
function square(number) {
return number * number;
}
console.log(square(10));
Function with two parameters
// function with two parameters
function functionName(parm1, parm2) {
//code goes her
}
functionName(parm1, parm2); // during calling or invoking two arguments needed
// Function without parameter doesn't take input, so lets make a function with parameters
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo;
console.log(sum);
}
sumTwoNumbers(10, 20); // calling functions
// If a function doesn't return it doesn't store data, so it should return
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo;
return sum;
}
console.log(sumTwoNumbers(10, 20));
function printFullName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
console.log(printFullName("md", "$haikh"));
Function with many parameters
// function with multiple parameters
function functionName(parm1, parm2, parm3,...){
//code goes here
}
functionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed
// this function takes array as a parameter and sum up the numbers in the array
function sumArrayValues(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
//calling a function
console.log(sumArrayValues(numbers));
const areaOfCircle = (radius) => {
let area = Math.PI * radius * radius;
return area;
}
console.log(areaOfCircle(10))
Function with unlimited number of parameters
Sometimes we do not know how many arguments the user going to pass. Therefore, we should know how to write a function which can take unlimited number of arguments. The way we do it has a significant difference between a function declaration(regular function) and arrow function. Let us see examples both in function declaration and arrow function.
Unlimited number of parameters in regular function
A function declaration provides a function scoped arguments array like object. Any thing we passed as argument in the function can be accessed from arguments object inside the functions. Let us see an example
// Let us access the arguments object
function sumAllNums() {
console.log(arguments)
}
sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// function declaration
function sumAllNums() {
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
Unlimited number of parameters in arrow function
Arrow function does not have the function scoped arguments object. To implement a function which takes unlimited number of arguments in an arrow function we use spread operator followed by any parameter name. Any thing we passed as argument in the function can be accessed as array in the arrow function. Let us see an example
// Let us access the arguments object
const sumAllNums = (...args) => {
// console.log(arguments), arguments object not found in arrow function
// instead we use a parameter followed by spread operator (...)
console.log(args)
}
sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]
// function declaration
const sumAllNums = (...args) => {
let sum = 0
for (const element of args) {
sum += element
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
Anonymous Function
An anonymous function is a function without a name - here
Anonymous function or without name
(function () {
//... statement block
});
function () {
console.log(
"I am an anonymous function"
);
};
An anonymous function is not accessible after its initial creation. Therefore, you often need to assign it to a variable.
For example, the following shows an anonymous function that displays a message:
let show = function() {
console.log('Anonymous function');
};
show();
Code language: JavaScript (javascript anonymous function assignment to a Variable)
In this example, the anonymous function has no name between the function keyword and parentheses ().
Because we need to call the anonymous function later, we assign the anonymous function to the show variable.
Since the whole assignment of the anonymous function to the show variable makes a valid expression, you don’t need to wrap the anonymous function inside the parentheses ().
Expression Function
Expression functions are anonymous functions. After we create a function without a name and we assign it to a variable. To return a value from the function we should call the variable. Look at the example below.
// Function expression
const square = function (n) {
return n * n;
};
console.log(square(2)); // -> 4
Self Invoking Functions
Self invoking functions are anonymous functions which do not need to be called to return a value.
(function (n) {
console.log(n * n);
})(2); // 4, but instead of just printing if we want to return and store the data, we do as shown below
let squaredNum = (function (n) {
return n * n;
})(10);
console.log(squaredNum);
Arrow Function
Arrow function is an alternative to write a function, however function declaration and arrow function have some minor differences.
Arrow function uses arrow instead of the keyword function to declare a function. Let us see both function declaration and arrow function.
// This is how we write normal or declaration function
// Let us change this declaration function to an arrow function
function square(n) {
return n * n;
}
console.log(square(2)); // 4
const square = (n) => {
return n * n;
};
console.log(square(2)); // -> 4
// if we have only one line in the code block, it can be written as follows, explicit return
const square = (n) => n * n; // -> 4
const changeToUpperCase = (arr) => {
const newArr = [];
for (const element of arr) {
newArr.push(element.toUpperCase());
}
return newArr;
};
const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
console.log(changeToUpperCase(countries));
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
const printFullName = (firstName, lastName) => {
return `${firstName} ${lastName}`;
};
console.log(printFullName("shaikhmd", "Yetayeh"));
The above function has only the return statement, therefore, we can explicitly return it as follows.
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`;
console.log(printFullName("shaikhmd", "Yetayeh"));
Function with default parameters
Sometimes we pass default values to parameters, when we invoke the function if we do not pass an argument the default value will be used. Both function declaration and arrow function can have a default value or values.
// syntax
// Declaring a function
function functionName(param = value) {
//codes
}
// Calling function
functionName();
functionName(arg);
Example:
function greetings(name = "shaikh") {
let message = `${name}, Love JavaScript!`;
return message;
}
console.log(greetings());
console.log(greetings("shaikhmd"));
function generateFullName(firstName = "shaikhmd", lastName = "Yetayeh") {
let space = " ";
let fullName = firstName + space + lastName;
return fullName;
}
console.log(generateFullName());
console.log(generateFullName("David", "Smith"));
function calculateAge(birthYear, currentYear = 2019) {
let age = currentYear - birthYear;
return age;
}
console.log("Age: ", calculateAge(1819));
function weightOfObject(mass, gravity = 9.81) {
let weight = mass * gravity + " N"; // the value has to be changed to string first
return weight;
}
console.log("Weight of an object in Newton: ", weightOfObject(100)); // 9.81 gravity at the surface of Earth
console.log("Weight of an object in Newton: ", weightOfObject(100, 1.62)); // gravity at surface of Moon
Let us see how we write the above functions with arrow functions
// syntax
// Declaring a function
const functionName = (param = value) => {
//codes
};
// Calling function
functionName();
functionName(arg);
Example:
const greetings = (name = "shaikh") => {
let message = name + " Love JavaScript!";
return message;
};
console.log(greetings());
console.log(greetings("shaikhmd"));
const generateFullName = (firstName = "md", lastName = "shaikh") => {
let space = " ";
let fullName = firstName + space + lastName;
return fullName;
};
console.log(generateFullName());
console.log(generateFullName("David", "Smith"));
const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear;
console.log("Age: ", calculateAge(1819));
const weightOfObject = (mass, gravity = 9.81) => mass * gravity + " N";
console.log("Weight of an object in Newton: ", weightOfObject(100)); // 9.81 gravity at the surface of Earth
console.log("Weight of an object in Newton: ", weightOfObject(100, 1.62)); // gravity at surface of Moon
🌕Now you knew function . Now, you are super charged with the power of functions.
Top comments (2)
Your function
anonymousFunis not anonymous. It has a name. You can check this withanonymousFun.name. The act of assigning an anonymous function to a variable (in most cases) gives it a name, making it cease to be anonymous.Similarly, your
squarefunction also has a name - 'square'.Also, I'm not sure what you mean by 'expression function'. Presumably you are talking about function expressions? All these are are expressions whose value is a function. This function may or may not have a name - that is irrelevant.
Sure, will check 👍🏻