DEV Community

Cover image for Function in JS
Ezhil Arasan
Ezhil Arasan

Posted on

Function in JS

what is function?
A JavaScript function is a reusable block of code designed to perform a specific task. You write the code once, and you can run (or "invoke") it as many times as you need throughout your program.

Why Use Functions?

Functions help you to:

  • Reuse code (write once, run many times)
  • Organize code into smaller parts
  • Make code easier to read and maintain

What Does a Function Look Like?
A function can be created with the function keyword, a name, and parentheses.

The code to run is written inside curly brackets.

Example
A one liner:

function sayHello() { return "Hello World"; }
or more common:

function sayHello() {
  return "Hello World";
}
Enter fullscreen mode Exit fullscreen mode

Calling a Function
A JavaScript function runs when it is called.
To call a function, write the name followed by parentheses like name().

Function Invocation
The code inside a function is NOT executed when the function is defined.

The code inside a function will execute when "something" invokes the function:

  • When it is called from JavaScript code
  • When an event occurs (a user clicks a button)
  • Automatically (self invoked) It is common to use the term invoke, because a function can be invoked without being called.

It is also common to use say:

  • call a function
  • call upon a function
  • start a function
  • execute a function

Examples

The function below returns the text "Hello World".
But it will not run before you call it.


function sayHello() {
  return "Hello World";
}
Enter fullscreen mode Exit fullscreen mode

Using the Returned Value

When a function returns a value, you can store the value in a variable.


function sayHello() {
  return "Hello World";
}

let greeting = sayHello();
Enter fullscreen mode Exit fullscreen mode

Displaying the Result
You can display the returned value in many ways, for example using console.log() or HTML.

function sayHello() {
  return "Hello World";
}

console.log(sayHello());


Enter fullscreen mode Exit fullscreen mode

JavaScript Function Parameters
Parameters (Function Input)
Parameters allow you to pass (send) values to a function.
Parameters are listed inside the parentheses in the function definition.


function multiply(a, b) {
  return a * b;
}

let result = multiply(4, 5);
Enter fullscreen mode Exit fullscreen mode

Functions with Multiple Parameters

You can add as many parameters as you want, separated by commas.

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}

let name = fullName("John", "Doe");



Enter fullscreen mode Exit fullscreen mode

Parameters vs. Arguments

In JavaScript, function parameters and arguments are distinct concepts:
Parameters are the names listed in the function definition.
Arguments are the real values passed to, and received by the function.

Parameter Rules

JavaScript function definitions do not specify data types for parameters.
JavaScript functions do not perform type checking on the arguments.
JavaScript functions do not check the number of arguments received.

JavaScript Function Arguments

function multiply(a, b) {
  return a * b;
}

let result = multiply(4, 5);
Enter fullscreen mode Exit fullscreen mode

In the example above:

  • a and b are parameters
  • 4 and 5 are arguments

The argument 4 is assigned to the parameter a.
The argument 5 is assigned to the parameter b.

The Arguments Object

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  let max = -Infinity;
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}
Enter fullscreen mode Exit fullscreen mode

Arguments Can Be Variables

Arguments do not have to be values. They can also be variables.

let x = 5;
let y = 6;

function multiply(a, b) {
  return a * b;
}

multiply(x, y);
Enter fullscreen mode Exit fullscreen mode

JavaScript Function Return

Returning Values from Functions
A function can return a value back to the code that called it.
The return statement is used to send a value out of a function.
The return Statement
When a function reaches a return statement, the function stops executing.

The value after the return keyword is sent back to the caller.


function sayHello() {
  return "Hello World";
}

let message = sayHello();
Enter fullscreen mode Exit fullscreen mode

Return Values

A function can return any type of value (not only numbers).

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}

let name = fullName("John", "Doe")
Enter fullscreen mode Exit fullscreen mode

Refrence
https://www.w3schools.com/js/js_function_expressions.asp

Top comments (0)