📘 JavaScript: Functions, Callback Functions & Arrow Functions

Presented by Swapnil Meshram within mentorship Devsync

🎓 Started learning JavaScript with the guidance of Devsync, focusing on basic concepts of functions, callback functions, and arrow functions with simple hands-on practice.

📌 1. JavaScript Functions

🔷 What is a function?

A function in JavaScript is a reusable block of code that performs a specific task. Functions help organize code, make it readable, and reduce repetition.

You can define a function once and call it multiple times wherever needed.

🔹 Function Declaration

function greet(name) {
  console.log("Hello, " + name + "!");
}

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

✅ Explanation:

• function is the keyword to declare a function.

• greet is the name of the function.

• name is the parameter.

• The function logs a greeting to the console.

• greet("Alice")calls the function and passes it "Alice"as an argument.

---

🔹 Function with Return Value

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result);      // Output: 8

✅ Explanation:

• The returnkeyword sends back a result from the function.

• This allows you to store or use the result somewhere else.

---

📌 2. Callback Functions

🔷 What is a callback function?

A callback function is a function that is passed as an argument to another function and is executed later inside the parent function.

This is very useful in asynchronous operations like loading data, waiting for a response, etc.

🔹 Example:

function greetUser(name, callback) {
  console.log("Hi, " + name);
  callback();
}

function sayBye() {
  console.log("Goodbye!");
}

greetUser("John", sayBye);

/*

Output:
Hi, John
Goodbye!

*/

✅ Explanation:

• greetUsertakes an and an asnamecallback parameters.

• After greeting the user, it calls the callbackfunction.

• sayBye is passed in and executed after the greeting.

🔹 Real-life Analogy:

Imagine you're ordering food:

• You place an order (main function).

• The chef will call you back when it’s ready.

---

📌 3. Arrow Functions

🔷 What is an arrow function?

Arrow functions are a shorter way to write functions in JavaScript. They were introduced in ES6 (ECMAScript 2015).

They are often used in situations where you need simple functions quickly—like callbacks, array methods, etc.

🔹 Basic Arrow Function Syntax

const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3));   // Output: 5

✅ Explanation:

• const add = (a, b) => { ... }defines a function using arrow syntax.

• The =>replaces the functionkeyword.

• The function still works the same but looks cleaner.

---

🔹 Arrow Function with One-Line Return

const square = num => num * num;

console.log(square(4));   // Output: 16

✅ Explanation:

• If there's only one expression, you can skip the {} and return.

• It will return the value automatically.

---

🔹 Arrow Function with No Parameters

const greet = () => console.log("Hello World!");

greet();       // Output: Hello World!

✅ Explanation:

• Use empty ()if there are no parameters.

---

🔹 Difference

---

✅ Final Summary

---

📌 Tip:
Functions are one of the most powerful parts of JavaScript. Mastering them will help you write clean, maintainable, and reusable code.

---