Functions in JavaScript

-

What is Function?

Functions are an important concept in JavaScript, allowing you to wrap reusable blocks of code. They are a way to group together a set of statements to perform a specific task or return a value. They allow you to call that code whenever you need it, using a single command instead of typing out the same code multiple times. As a result your codebase become more organized, readable and maintainable.

Function Declaration

To define a named function in JavaScript, you use the 'function' keyword followed by the name of the function, a list of parameters enclosed in parentheses, and the JavaScript statements that define the function enclosed in curly brackets. This type of function can be called before the declaration in the code because JavaScript hoists function declarations to the top of their containing scope.

Here is the basic syntax:

// Function Declaration
function functionName(parameter1, parameter2, ...) {
  // Function body
  // Code to be executed
  return result; // Optional
}

Return statement: Optional. It specifies the value to be returned from the function. If omitted, the function returns undefined.

Function Invocation (Call)

To execute a function, use its name followed by parentheses containing arguments (if any).

// Function Call
functionName(arguments);

Arguments: Values passed to the function's parameters when it's called.

Function Parameters and Arguments

  • Parameters: Variables declared in the function's parameter list. They act as placeholders for the values that will be passed when the function is called.
  • Arguments: Actual values passed to the function when it is invoke, run or called (all 3 mean the same thing). You actually pass it the data, that will take place of the variables, those are called arguments.

People incorrectly use those terms interchangeably. One way to remember is that parameters are placeholders. The actual values that you pass in when calling a function are what are called argument.

// function definition
function calculateBill(billAmount, taxRate = 0.13, tipRate = 0.15) {
  // this is the function body
  console.log("Running Calculate Bill!!");
  const total = billAmount + billAmount * taxRate + billAmount * tipRate;
  return total;
}
 
// function call
const myTotal = calculateBill(150, 0.17, 0.13);
console.log(myTotal);

Here in the above example, the variables passed inside the paranthesis (billAmount, taxRate = 0.13, tipRate = 0.15) when declaring the functions are called Parameters and the actual values that are passed (100, 0.15, 0.15) when calling the function are called Arguments. Inside the paranthesis taxRate and tipRate are the Default Parameters.

Return Statement

A return statement specifies the value that a function will return after its execution. You can use it to pass a value back to the calling code. If a function does not have a return statement, it will return `undefined`.

function add(a, b) {
  return a + b;
}
 
const sum = add(2, 3);
console.log(sum); // Output: 5

Function Expression

A Function-Expression is a function that is assigned to a variable or a property of an object. This is called an anonymous function expression. Unlike with function declarations, function expressions are not hoisted, so they must be defined before they are called.

const sayHello = function() {
  console.log("Hello!");
};
 
sayHello(); // Output: Hello!

Arrow Function

An arrow function is a concise way to write a function in JavaScript. It uses the `=>` syntax and has a more compact syntax compared to regular function expressions. It does not have its own `this` binding and cannot be used as a constructor.

const sayHello = () => {
  console.log("Hello!");
};
 
sayHello(); // Output: Hello!

Function Scope

In JavaScript, variables declared within a function are considered local to that function and cannot be accessed outside of it. This concept is known as function scope. It means that variables defined within a function are not accessible outside of it.

function greet() {
  const message = "Hello!";
  console.log(message);
}
 
greet(); // Output: Hello!
console.log(message); // Throws an error

Anonymous Function

An anonymous function is a function without a name. It can be assigned to a variable or used as an argument to another function.

const sayHello = function() {
  console.log("Hello!");
};
 
sayHello(); // Output: Hello!

Named Function Expression

A named function expression is a function expression with a name. The name can be used within the function for recursive calls or to help with debugging.

const factorial = function fact(n) {
  if (n === 0 
 n === 1) {
    return 1;
  } else {
    return n * fact(n - 1);
  }
};
 
console.log(factorial(5)); // Output: 120

Default Parameters

Default parameters allow you to specify default values for function parameters. If an argument is not provided, the default value will be used instead.

function greet(name = "World") {
  console.log("Hello, " + name + "!");
}
 
greet("Alice"); // Output: Hello, Alice!
greet(); // Output: Hello, World!

Rest Parameters

Rest parameters allow you to pass an indefinite number of arguments to a function. Within the function, the rest parameters are treated as an array and can be manipulated using array methods.

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}
 
console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(4, 5, 6, 7, 8)); // Output: 30

Key Takeaways

  • Function declarations and expressions are two ways to define functions in JavaScript.

  • Arrow functions provide a concise syntax for writing functions.

  • Parameters are defined in the function declaration, while arguments are passed to the function when it is called.

  • The return statement specifies the value that a function will return.

  • Variables declared within a function are considered local to that function and cannot be accessed outside of it.

  • Anonymous functions and named function expressions are useful in different scenarios.

  • Default parameters allow you to specify default values for function parameters.

  • Rest parameters allow you to pass an indefinite number of arguments to a function.

Comments

Post a Comment

Popular posts from this blog

Mastering JavaScript Output: Communicating with Users

-
JavaScript Output JavaScript output refers to the process of displaying or printing information to the user. It allows developers to communicate and present data in a variety of ways, such as through the browser console, alert boxes, or by manipulating the HTML content of a webpage. Displaying Output in the Browser Console The browser console is a built-in developer tool that allows you to log information, debug code, and view error messages. You can use the `console.log()` method to display output in the console. Here's an example: console. log ( "Hello, world!" ) ; The above code will print "Hello, world!" to the console. Alert Boxes Alert boxes are often used to display important messages or to prompt the user for input. You can use the `alert()` function to create an alert box. Here's an example: alert ( "Hello, world!" ) ; When the above code is executed, it will display an alert box with the message "Hello, world!". innerHTML JavaSc...
Read more

What is JIT compiler? Is JavaScript compiled or interpreted or both?

-
What is JIT compiler? A Just-In-Time (JIT) compiler is a type of compiler that dynamically converts programming code into machine code at runtime, just before the code is executed. Unlike traditional compilers that convert the entire program ahead of time, a JIT compiler optimizes and compiles code on-the-fly, as it is needed. The primary advantage of a JIT compiler is that it can make the execution of code significantly faster compared to an interpreter. It achieves this by analyzing the code at runtime, identifying hotspots (frequently executed portions of code), and applying various optimization techniques to generate highly efficient machine code specific to the underlying hardware. JIT compilers are commonly used in programming languages such as Java and JavaScript, where the execution speed of the code is crucial. So is JavaScript Compiled or Interpreted? JavaScript is generally considered an interpreted language . Traditionally, JavaScript code is executed by an interpreter, wh...
Read more

'for in' Loop

-
Introduction to JavaScript 'for in' Loop The `for in` loop is a type of loop in JavaScript that is used to iterate over the properties of an object. It is often used when you need to loop through the keys or properties of an object and perform some action on each one. Unlike other loops like `for` and `while`, the `for in` loop is specifically designed to work with objects. Syntax The syntax for the `for in` loop is as follows: for   ( variable  in  object )   {    // code to be executed } The `variable` represents a temporary variable that will hold the key of each property in the object. The `object` is the object that you want to iterate over. Example Let's take a look at an example to understand how the `for in` loop works: const  person  =   {   name :   'John' ,   age :   30 ,   gender :   'male' } ;   for ...
Read more