Javascript Basics: Understanding Function

Shilpa Syal 👩‍💻 — Wed, 07 Aug 2019 16:30:52 +0000

This article will explain the basic architecture of function, its parameters, invocation, return values and many more things.

Introduction

A function is a block of code designed to perform a particular task and it can be called any number of times. It reduces the redundant code in our program and makes our code modular and efficient.

Key Points of Function

A function is only executed when it is called/invoked.
In JavaScript, functions are first-class objects as they can have properties and methods like an Object.
The difference between Object and Function is that functions can be called but objects can’t.
We can pass values to the function and that values can only be used inside the function scope.

Defining a Function

SYNTAX

JavaScript function starts with function keyword followed by the function name, a list of parameters enclosed in parenthesis (param1,param2...) and a pair of curly braces {..} that enclosed the function statements also known as a function body.

function welcomeUser(name){
       alert("Hi!! Welcome Back");
}

The function name can contain letters, numbers, underscores and dollar signs(mostly written in camel case).

Function Invocation

To execute the code written inside the function body, we have to invoke or call the function. A function can be invoked by writing the name of the function followed by the parentheses.

welcomeUser();  //will output "Hi!! Welcome Back"

As our logic is contained in the welcomeUser() function, we can reuse it as many times as we want.

//Final Code
function welcomeUser(){
       alert("Hi!! Welcome Back");
}
welcomeUser();

Function Parameters

In the above example, the welcomeUser() is a basic function that alerts the ”Hi!! Welcome Back” but you can also pass parameters to add more functionality and logic to the function.

function welcomeUser(name) {
    alert("Welcome!!" + name );
}
welcomeUser("xyz");

In the above example, welcomeUser(name) function is accepting one parameter called name in parenthesis and this name parameter will behave as a local variable to that function and can be used anywhere in the function.

In the above example, we are passing a value of "xyz" as an argument to the welcomeUser function, which the function is accessing through name parameter. Now we can use the name parameter anywhere inside the function, which will output the value "xyz".

Parameters vs Arguments

So a lot of us gets confused between the terms parameters and arguments. While they both look very similar yet there is quite a distinction between them. Let's have a look at the below example.

let car1 = "audi"
let car2 = "bmw"
function carFunc(param1, param2) {
  console.log(param1, param2);
}
carFunc(car1,car2);

Function parameters are variables in the function definition and are separated by commas inside the parentheses (). Here param1 and param2 are the two parameters.

On the other hand, Arguments are values that you passed during the function invocation, "audi" and "bmw" are the two arguments received by the function.

Arguments(Primitives) are passed to functions by value (copy of the variable is passed to function). If the function changes the value of an argument, this doesn't change the actual variable.

function changeName(val){
  val = "xyz";       //this will not change the actual variable
}
let name = "abc";
console.log(name);  //"abc"
changeName(name);
console.log(name);  //"abc"

In the above example, the name variable value is not changed as it is passed by value to the function.

But, Objects and Arrays are passed by references i.e their memory location is passed and if the function changes the referred object’s properties, that change is visible outside the function and will change the actual object that is passed. Let’s have a look below:

function changeName(obj){
   obj.name = "xyz"
}
let person = {
  name: "abc",
  age: 25
}
console.log(person.name) // "abc"
changeName(person);
console.log(person.name) // "xyz"

Function Returning Value

In JavaScript, functions always return a value. If no return value is specified, the function will return the default value.

If the function is called with a new keyword(Constructor Function), the default value is the value of its this parameter otherwise the default return value is undefined

function sum(a,b) {
    let c = a + b;
}
sum(2,3);

The sum function will return undefined as expected.

Return Keyword

You can return value from the function using return keyword. The value that function return is actually returned back to the caller function and it can be then used immediately and can be stored in a variable for further use.

function sum(a,b) {
    return a + b;
}

The sum function returns the sum of our two input variables a and b .
We can execute the function and then store the return value to a variable:

let c = sum(2,3);
console.log(c);   // Outputs: 5

Another interesting thing about the return statement is that it stops the function execution immediately.

function checkAge(age){
   if(age > 20)
   {
     return true;
     console.log(age);
   }
}

In the above example, the return statement immediately stops the execution of our function and returns true. The line after the return statement console.log(age) is never executed.

Before you go:

Functions are Objects
A function will return a default value if the return statement is not provided.
Parameters are variables in the function definition whereas Arguments are the actual values passed during function invocation.

In the next article, we will explore different types to define functions and how they work.

Thank you for Reading

DEV Community: Shilpa Syal 👩‍💻