Basics of Functions in JS

Here we will be going through the very basics of javascript. Functions are one of the core fundamental building blocks in javascript. Functions are like programs in your programs. It is a block of code designed to perform a particular task. A javascript function can be executed when you invoke or call it any time you want, in the same way that Hermione gives a wave of her wand anytime she wants.

SYNTAX

function wingardiumLeviosa (parameter1, parameter2) {
  // code to be executed
  // make objects fly
}
wingardiumLeviosa(argument1, argument2)

JS Function is defined with the function keyword followed by its name and parentheses (). Parentheses may contain parameters. Inside the curly braces, the code to be executed is placed. The function is executed by invoking by its name with parentheses and arguments if any.

• Parameters - Parameters are nothing but named variables passed into a function.

• Arguments - The arguments are the values passed into a function.

• Code - Code to be executed in the function placed inside the curly braces.

• Return - Return statement ends the function and returns control to the calling function. It returns value to the calling function.

Lets write a function fullName which takes firstName and lastName as arguments and returns full name of a person.

function fullName(firstName, lastName) {
  let fullName = `${firstName} ${lastName}`;
  return fullName;
}

Invoking or Calling a Function

You cannot execute a function by just defining it. For executing a function you need to invoke (call) a function.

You can call a function by just its name with parentheses.

fullName(arg1, arg2)

The return value is stored in the calling function. You can log the value to the console by.

let a = fullName('Sankalp', 'Swami');
console.log(a); // will print: Sankalp Swami

Some examples -

let a = fullName('Harry', 'Potter');
let b = fullName('Hermione', 'Granger');
let c = fullName('Ronald', 'Weasley');
let d = fullName('Lord', 'Voldemort');
console.log(a); // will print: Harry Potter
console.log(b); // will print: Hermione Granger
console.log(c); // will print: Ronald Weasley
console.log(d); // will print: You know who // just kidding

Argument Defaults

When you have declared a parameter but nothing is passed as an argument you can set a parameter to default.

function fullName(firstName='-', lastName='-') {
  let fullName = `${firstName} ${lastName}`;
  return fullName;
}

In the above example if one of the arguments is not passed, it gets a default value of -.

let a = fullName('Dobby');
console.log(a); // will print: Dobby -

Function Scope

Functions create a new local scope. This contains variables defined in the function body as well as the arguments passed in the functions.

function add (num1, num2) {
  let result = num1 + num2;
  return result;
};
console.log(add(2, 4));
console.log(num1); // ReferenceError: result is not defined

Here function add is defined at global scope but variable num1 is passed as an argument inside the add function so, it is not accessible outside the function.

Once a function is defined, it can be used over and over and over again. You can invoke the same function many times in your program, which saves a lot of your work. Thanks for reading, keep learning, Peace and Bubbyyee.