JavaScript Functions

Functions in Javascript

A collection of statements that executes an operation or calculates a value. A function should accept an input and return an output in which the input and output have a clear relationship.

Function Declaration

➤ Function Name.

➤ A list of function arguments, separated by commas and enclosed in parenthesis.

➤ The function's JavaScript statements, enclosed in curly brackets{...}

Syntax

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

Function Invocation

We must invoke or call the function to execute the code written inside the function body. The name of the function, followed by the parenthesis, can be used to call it.

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

Functions with parameters in JavaScript

Parameters are values that are passed into a function when it is first declared.

function greeting(name) {
  console.log('Hello ' + name + ' !' );
}

The greeting function now takes only one parameter, name. That string is concatenated (+) with the string Hello, followed by an exclamation mark.

Arguments must be passed in when invoking functions that take parameters. Arguments are values supplied to a function when it is called, and they correspond to the parameters passed in the function's decalaration line.

greeting('John');
//Output
// Hello John !

The point of contention is the value John, which you might think of as name = 'John.' John is the value you pass in when you call the function, and name is the placeholder variable.

Functions can accept many parameters and can also return data to the program's user:

function addNums(num1,num2) {
    return num1 + num2;
}

The code above creates a function called addNums, which accepts two parameters separated by a comma: num1 and num2.

Types of functions in javascript

➤ Named function
➤ Anonymous function
➤ Immediately invoked function expression. It runs as soon as the browser finds it.

Named function

We define a named function in the code and then call it whenever we need it by referencing its name and supplying certain arguments to it. When we need to call a function many times to supply various values to it or run it multiple times, named functions come in handy.

function myFunc() {
  alert('Named Function');
}
myFunc();

Benefits of Named Function

➤ Because the function name appears in the error log, named functions are highly useful in debugging and determining which function produced an error.

➤ Named functions are easier to read, making your code more understandable to other programmers.

➤ Named functions are easier to reuse, which aids in the creation of clean code.

Anonymous function

There are no names for the anonymous functions. They must be linked to something, such as a variable or a running event.

var myFunc = function() {
	alert('Anonymous Function');
}
myFunc();

Immediately invoked function expression—

The browser executes the invoked function expression as soon as it is encountered. This function has the advantage of running right where it's placed in the code and producing a direct output. That implies it is untouched by code that appears later in the script and is potentially beneficial.

let message = (function (){
      let name = "Rita";
       return name;
})();
//Immediately creates the ouptut:
result; // "Rita"

Invoked function expressions are useful for quickly populating a variable or parameter in a larger function or a property in an object, and they're frequently connected to event listeners for instant output.

Variable scope in JavaScript functions

The visibility of variables to different areas of the programme is referred to as variable scope.

A variable declared before and outside of a function block has a global scope and can be accessed from within the function:

const num = 7;

function myFunc() {
  console.log(num);
}

//Access the variable with a global scope from anywhere in the program:
console.log(num);
//Output
//7

//Call the function with the variable with global scope
myFunc();
//Output
// 7

However, if that variable was defined inside the function, it would have local scope, meaning it would be limited to be visible only within that function.

It's not possible to get to it from outside the function:

function myFunc() {
  const num = 7;
  console.log(num);
}

// Try to access the variable with local scope from outside the function scope:
console.log(num);
//Otput:
//Uncaught ReferenceError: num is not defined

//Call the function with the variable defined inside the function:
myFunc();
//Ouput
//7

Conclusion: That's all there is to it! This concludes our discussion of JavaScript functions and some of the methods for creating them.