0% found this document useful (0 votes)
16 views7 pages

Understanding JavaScript Functions

The document provides a comprehensive overview of functions in JavaScript, detailing their declaration, expression, and various types including arrow functions, anonymous functions, and immediately invoked function expressions (IIFE). It covers key concepts such as parameters, arguments, default parameters, rest parameters, return statements, higher-order functions, recursion, function scope, callback functions, and closures. Mastering these concepts enables the writing of reusable and efficient code.

Uploaded by

22221a0590
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views7 pages

Understanding JavaScript Functions

The document provides a comprehensive overview of functions in JavaScript, detailing their declaration, expression, and various types including arrow functions, anonymous functions, and immediately invoked function expressions (IIFE). It covers key concepts such as parameters, arguments, default parameters, rest parameters, return statements, higher-order functions, recursion, function scope, callback functions, and closures. Mastering these concepts enables the writing of reusable and efficient code.

Uploaded by

22221a0590
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Functions in

Functions in are blocks of code designed to perform a specific task. They are executed when
called or invoked.

1. Function Declaration

A function can be declared using the function keyword, followed by the function name,
parentheses (which may include parameters), and a block of code enclosed in curly braces.

Syntax:

function functionName(parameters) {
// code to be executed
}

Example:

function greet(name) {
[Link]("Hello, " + name + "!");
}
greet("Alice"); // Output: Hello, Alice!

2. Function Expression

Functions can also be assigned to variables. These are called function expressions.

Syntax:

const variableName = function(parameters) {


// code to be executed
};

Example:

const greet = function(name) {


[Link]("Hi, " + name + "!");
};
greet("Bob"); // Output: Hi, Bob!

3. Arrow Functions

Introduced in ES6, arrow functions provide a concise syntax for writing functions.

Definition

An arrow function is a shorthand way of writing a function expression. It uses the => syntax
and does not have its own this, arguments, super, or [Link].
Syntax

(param1, param2, ..., paramN) => expression

If the function body has multiple lines or statements, use curly braces {} and an explicit
return statement if needed:

(param1, param2, ..., paramN) => {


// multiple statements
return result;
};

Features

1. Implicit Return:
If the function body contains only an expression, the result of that expression is
returned automatically without the need for the return keyword.

const add = (a, b) => a + b; // No return keyword required


[Link](add(3, 5)); // Output: 8

2. No this Binding:
Arrow functions do not have their own this context; they inherit it from the
enclosing scope.

const obj = {
value: 10,
increment: () => {
[Link]([Link]); // Undefined, as `this` is not bound
to `obj`
}
};
[Link](); // Output: undefined

Examples

1. Single Parameter
When there is a single parameter, parentheses are optional:

const square = x => x * x;


[Link](square(4)); // Output: 16
2. Multiple Parameters
Parentheses are required when there are multiple parameters:

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


[Link](multiply(3, 4)); // Output: 12

3. No Parameters
Use empty parentheses () when there are no parameters:

const greet = () => "Hello, World!";


[Link](greet()); // Output: Hello, World!

4. Using a Block Body


If the function body requires multiple lines, use curly braces:

const sumAndSquare = (a, b) => {


const sum = a + b;
return sum * sum;
};
[Link](sumAndSquare(2, 3)); // Output: 25

4. Anonymous Functions

Functions without a name are called anonymous functions. These are often used in function
expressions or as arguments to other functions.

Example1:

const greet = function(name) {

return `Hello, ${name}!`;

};

[Link](greet("Alice")); // Output: Hello, Alice!

Example2:
setTimeout(function() {
Conso [Link]("This runs after 2 seconds");
}, 2000);

5. Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that runs as soon as it is defined.


Syntax:

(function() {
// code to be executed
})();

Example:

(function() {
[Link]("This is an IIFE");
})();

6. Parameters and Arguments

 Parameters are variables listed in the function definition.


 Arguments are the values passed to the function when it is invoked.

Example:

function multiply(a, b) {
return a * b;
}
[Link](multiply(2, 3)); // Output: 6

7. Default Parameters

Default parameters allow you to set default values for function parameters.

Example:

function greet(name = "Guest") {


[Link]("Hello, " + name + "!");
}
greet(); // Output: Hello, Guest!
greet("Charlie"); // Output: Hello, Charlie!

8. Rest Parameters

The ... syntax allows a function to accept an indefinite number of arguments as an array.

Example:

function sum(...numbers) {
return [Link]((total, num) => total + num, 0);
}
console. log(sum(1, 2, 3, 4)); // Output: 10

9. Return Statement

The return statement specifies the value a function should return.

Example:
function square(number) {
return number * number;
}
[Link](square(5)); // Output: 25

10. Higher-Order Functions

Functions that take other functions as arguments or return functions are called higher-order
functions.

Example:

function applyOperation(a, b, operation) {


return operation(a, b);
}

const add = (x, y) => x + y;


[Link](applyOperation(5, 3, add)); // Output: 8

11. Recursion

A function that calls itself is known as a recursive function.

Example:

function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
[Link](factorial(5)); // Output: 120

12. Function Scope

Variables declared inside a function are local to that function and cannot be accessed from
outside.

Example:

function testScope() {
let localVar = "I am local";
[Link](localVar);
}
// [Link](localVar); // Error: localVar is not defined

By mastering functions, you can write reusable, modular, and efficient code for a variety of
applic ations.

13. Callback Functions


A callback is a function passed as an argument to another function.

Example:

function fetchData(callback) {
setTimeout(() => {
[Link]("Data fetched");
callback();
}, 1000);
}

fetchData(() => {
[Link]("Callback executed");
});

14. Closures

Closures in JavaScript
Definition

A closure is a combination of a function and its lexical environment within which it was
declared. It allows a function to access variables from its outer scope even after the outer
function has returned.

In simpler terms:

 A closure gives you access to an outer function's variables from an inner function.

· Lexical Environment:

· A structure that holds identifier-variable mapping.

 Created when code is run, defining where variables and functions are accessible.

· Lexical Scope:

 Variables are accessible based on where they are declared in the source code, not where
they are called.

Example:
function outer() {

let outerVariable = "I'm outside!";

function inner() {

[Link](outerVariable); // Can access 'outerVariable' due to


lexical scope

inner();

outer();

// Output: I'm outside!

Example 2:

function outerFunction() {

let outerVariable = "I am from the outer scope";

function innerFunction() {

[Link](outerVariable); // Accessing the outerVariable

return innerFunction;

const closureFunction = outerFunction(); // The outer function is executed

closureFunction(); // Logs: I am from the outer scope

You might also like