Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Functions in JavaScript

This document introduces functions in JavaScript, explaining their significance, declaration, invocation, parameters, and return values. It covers function declarations, expressions, anonymous functions, and arrow functions, providing clear examples for each concept. The session aims to ensure a foundational understanding of how to effectively use functions in JavaScript.

Uploaded by

Mohana D
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Functions in JavaScript

This document introduces functions in JavaScript, explaining their significance, declaration, invocation, parameters, and return values. It covers function declarations, expressions, anonymous functions, and arrow functions, providing clear examples for each concept. The session aims to ensure a foundational understanding of how to effectively use functions in JavaScript.

Uploaded by

Mohana D
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Functions in JavaScript

Objective: Introduce the trainees to functions, their importance, and how to use
them effectively in JavaScript. The session emphasizes clear examples and
simple explanations to ensure foundational understanding.
Function Basics
a. Declaring and Invoking Functions
What are Functions?
● A function is a reusable block of code designed to perform a specific
task.
● Functions help organize code and avoid repetition. A JavaScript function
is executed when “something” calls (invokes) it.
Syntax:
javascript
function functionName(parameters) {
// Code to execute
}
Example:
javascript
function greet() {
console.log("Hello, World!");
}
greet(); // Outputs: Hello, World!

b. Parameters and Return Values


Parameters:
● These are inputs that a function can accept when it is called.
Return Values:
● A function can send back a result using the return keyword.
Example: Adding Two Numbers
javascript
function addNumbers(a, b) {
return a + b; // Returns the sum of a and b
}

let result = addNumbers(5, 10);


console.log(result); // Outputs: 15
Explanation:
1. a and b are parameters.
2. addNumbers(5, 10) passes 5 and 10 as arguments to the function.
3. The return keyword sends back the result (15), which is stored in result.

c. Demo: Writing a Function That Returns the Sum of Two Numbers


Scenario: Write a function that accepts two numbers as inputs and calculates
their sum.
Code Example:
javascript
function calculateSum(num1, num2) {
let sum = num1 + num2;
return sum;
}

console.log(calculateSum(3, 7)); // Outputs: 10


console.log(calculateSum(15, 25)); // Outputs: 40
Function Declarations vs Function Expressions
a. Function Declarations
● What Are They?
Functions defined with the function keyword and a name.
● Characteristics:
o Hoisted (can be used before their declaration).
Example:
javascript
function square(number) {
return number * number;
}
console.log(square(4)); // Outputs: 16

b. Function Expressions
● What Are They?
Functions assigned to variables. These are not hoisted.
● Characteristics:
o Must be defined before use.
Example:
javascript
const multiply = function (x, y) {
return x * y;
};

console.log(multiply(3, 4)); // Outputs: 12


c. Demo: Assigning Functions to Variables
Scenario: Assign a function that calculates the product of two numbers to a
variable.
Code Example:
javascript
const calculateProduct = function (a, b) {
return a * b;
};

console.log(calculateProduct(6, 9)); // Outputs: 54

Anonymous and Arrow Functions


Objective: Provide an optional introduction to modern function syntax with
arrow functions.
a. Anonymous Functions
● Functions without a name, often used as arguments or for quick
operations.
Example:
javascript
let numbers = [1, 2, 3];
numbers.forEach(function (num) {
console.log(num * num);
});
// Outputs: 1, 4, 9

b. Arrow Functions
● A shorthand way to write functions, introduced in ES6.
● Arrow functions have a concise syntax and behave differently with the
this keyword.
Syntax:
javascript
const functionName = (parameters) => expression;
Example:
javascript
const add = (a, b) => a + b;
console.log(add(5, 10));
// Outputs: 15

c. Demo: Convert a Function Expression to an Arrow Function


Scenario: Rewrite a function that calculates the square of a number using arrow
syntax.
Code Example:
javascript
const square = (num) => num * num;
console.log(square(7));
// Outputs: 49

You might also like