JavaScript Functions | Function Declaration and Expression - Arrow Function - Function Parameters and Return - Basic syntax and usage of JavaScript functions

JavaScript Functions:

JavaScript functions are blocks of code designed to perform a specific task. They are defined using the function keyword and can be invoked (called) at any point in a program. 

Here is the basic syntax and usage of JavaScript functions:

Function Declaration:

javascript

// Function declaration

function greet(name) {

  console.log("Hello, " + name + "!");

}

// Function invocation

greet("John"); // Output: Hello, John!

JavaScript Functions

In the example above:

greet is the function name.

(name) is the parameter list. Functions can accept parameters (input).

The function body is enclosed in curly braces {} and contains the code to be executed.

console.log is a built-in JavaScript function that outputs information to the console.

Function Expression:

javascript

// Function expression

var add = function (a, b) {

  return a + b;

};

// Function invocation

var result = add(3, 5);

console.log(result); // Output: 8

In this example:

add is a variable holding an anonymous function.

The function is assigned to the variable using the = operator.

The function can be invoked using the variable name (add).

Arrow Function (ES6+):

javascript

// Arrow function

const multiply = (a, b) => a * b;

// Function invocation

const product = multiply(4, 6);

console.log(product); // Output: 24

Arrow functions provide a concise syntax, especially useful for short functions.

Function Parameters and Return:

javascript

// Function with parameters and return statement

function square(number) {

  return number * number;

}

var squaredValue = square(4);

console.log(squaredValue); // Output: 16

Functions can have parameters that act as placeholders for values passed during invocation.

The return statement is used to specify the value the function should return.

Default Parameters (ES6+):

javascript

// Function with default parameter

function power(base, exponent = 2) {

  return Math.pow(base, exponent);

}

var result1 = power(3);

var result2 = power(3, 4);

console.log(result1); // Output: 9

console.log(result2); // Output: 81

Default parameters allow you to specify a default value for a parameter if one is not provided.

Rest Parameters (ES6+):

javascript

// Function with rest parameter

function sum(...numbers) {

  return numbers.reduce((total, num) => total + num, 0);

}

var totalSum = sum(1, 2, 3, 4, 5);

console.log(totalSum); // Output: 15

The rest parameter (...numbers) allows a function to accept an indefinite number of arguments as an array.

Scope of Variables:

JavaScript has two types of variable scope:

Global Scope: Variables declared outside any function are global and can be accessed throughout the program.

Local Scope: Variables declared inside a function are local and can only be accessed within that function.

javascript

var globalVar = "I am global"; // Global variable

function example() {

  var localVar = "I am local"; // Local variable

  console.log(globalVar); // Accessible

}

example();

console.log(localVar); // Error: localVar is not defined

Understanding scope is crucial for avoiding naming conflicts and managing variable lifetimes.

These are the fundamental concepts of JavaScript functions. They play a key role in organizing code, promoting reusability, and encapsulating logic in a program.