Basics of functions in JavaScript

Dear reader, let me introduce you to one of the key concepts of any programming language, also in JavaScript which is function. Here we discuss specifically how they are in ECMA Script ( a.k.a JavaScript )

Here is a definition from Wikipedia about functions in programming

In computer programming, a subroutine is a sequence of program instructions that performs a specific task, packaged as a unit. This unit can then be used in programs wherever that particular task should be performed.

In many of the programming languages, functions are the building blocks. Job of programmers is often to write the solutions to real-world problems expressed in terms of a function. So its worth spending time to get better at them in the developer journey.

A simple function in JavaScript

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

const total = sum(5,8); // total will be 13

Purpose of functions in Programming

Let’s briefly understand function constructs in the day to day usage, functions

• Helps to group set of instructions with a name
• Solve all or part of the given problem in isolation
• More organized and modular code
• Reuse existing program logic
• Easy to read and understand code

Dissecting functions

Let’s dissect functions to understand important parts of it

• writing a function starts with the keyword function followed by name of the function (eg: calcArea )
• function name is a variable that holds the location where function instructions are stored
• parameters are input to the functions to perform the necessary task
• body of the function involves a sequence of steps to arrive at a result based on inputs

• result of a function can be returned to the caller using the return keyword

  www.tektutorialshub.com

Function parameters, arguments, and return statement

• parameters

  • are names given to what a function receives inputs when invoked,
  • should be received in order and so position matters

• arguments

  • the actual values that are passed to a function to get desired output
  • if parameter names are missed to name, JS functions have a special array-like object to retrieve those inputs named arguments
  • arguments.length indicates number of arguments passed at the time of invocation
• return
  • helps to pass value from the function after its being called
  • the caller can receive the result or output
  • JavaScript functions have an implicit return, there will a return if no explicit return is mentioned
  • implicit return statement provides undefined value

Different Syntax or Ways to define functions

There are three different ways that one can use to create functions in JavaScript

function declaration syntax / normal function

• This is the more common and ancient way of defining functions
• Supports hoisting, thereby we can invoke functions much before its declaration
• does support a special own this or also called context value inside functions, also allows overriding this value to achieve more re-usability
• can be used as constructors to create objects

     function helloWorld(name) {
      return "Welcome " + name;
     }    
    helloWorld("your Name"); // returns "Welcome your Name"

function expressions

• An alternate way to define functions and less common syntax
• doesn’t support hoisting, hence can’t invoke them in advance
• supports own this value similar to function declaration syntax

const helloWorld = function(name) {
  return "Welcome " + name;
}

arrow functions

• more slim way of writing functions and modern syntax
• doesn’t have its own value of this , hence cant be used as constructors

const helloWorld = (name) =>  "Welcome " + name;

Summary

Kudos, you did a great job by following this till the end. It’s a good first step to understanding them to become a good programmer and there’s so much to know about them

Here is what we learned together

• functions are building blocks, and they are very common constructs
• helps to solve problems and re-usability the primary purpose
• there are many syntax for writing functions, arrow functions are recent and regular function syntax is the most useful