Web Development - HTML, CSS & JavaScript
55.7K subscribers
1.88K photos
6 videos
34 files
506 links
Learn to code and become a Web Developer with HTML, CSS, JavaScript , Reactjs, Wordpress, PHP, Mern & Nodejs knowledge

Managed by: @love_data
Download Telegram
๐Ÿ’ป JavaScript Roadmap 2026 โ€” Part 5

๐ŸŸข Functions in JavaScript

Functions are one of the most important concepts in JavaScript.

A function is a reusable block of code designed to perform a particular task. Instead of writing the same code repeatedly, you can put it inside a function and call it whenever you need it.

1๏ธโƒฃ Creating a Function

The basic syntax is:

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


This creates a function called "greet". But creating a function doesn't execute it.

To execute it, you need to call it:

greet();


Output: Hello!

2๏ธโƒฃ Why Do We Need Functions?

Imagine you need to print the same message three times.

Without a function:

console.log("Welcome to JavaScript");
console.log("Welcome to JavaScript");


With a function:

function welcome() {
console.log("Welcome to JavaScript");
}

welcome();
welcome();
welcome();


Functions make code:

โœ… Reusable,

โœ… Easier to maintain,

โœ… Easier to test,

โœ… Easier to understand

3๏ธโƒฃ Function Parameters

Functions can accept information through parameters.

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

greet("Rahul");
greet("Priya");


Output: Hello Rahul, Hello Priya

Here: name โ†’ parameter, "Rahul" โ†’ argument.

A parameter is the variable defined in the function. An argument is the actual value passed when calling it.

4๏ธโƒฃ Multiple Parameters

A function can accept multiple parameters.

function add(a, b) {
console.log(a + b);
}

add(10, 5); // 15


You can reuse the same function: add(20, 30); add(100, 50);

5๏ธโƒฃ Returning a Value

A function doesn't always need to print something. It can return a value.

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

let result = add(10, 5);
console.log(result); // 15


The important difference is: console.log() displays something. return sends a value back from the function.

6๏ธโƒฃ Understanding "return"

function multiply(a, b) {
return a * b;
}

let result = multiply(5, 4);
console.log(result);


The process is: multiply(5, 4) โ†’ 5 ร— 4 โ†’ 20 โ†’ return 20 โ†’ result = 20

Once JavaScript executes "return", the function stops executing.

function test() {
return "Hello";
console.log("This will not run");
}


7๏ธโƒฃ Functions Without "return"

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

greet("Rahul");


That's completely valid. If a function doesn't explicitly return a value, its return value is: undefined

function greet() {
console.log("Hello");
}

let result = greet();
console.log(result); // Hello, undefined


8๏ธโƒฃ Storing a Function in a Variable

Functions can be assigned to variables.

const greet = function () {
console.log("Hello");
};

greet();


This is called a function expression.

Compare:

Function declaration: function greet() { console.log("Hello"); }

Function expression: const greet = function () { console.log("Hello"); };

Both can be called as functions, but they have different hoisting behavior.

๐Ÿ”น Arrow Functions

9๏ธโƒฃ What Is an Arrow Function?

Arrow functions provide a shorter syntax for writing functions.

Traditional function:

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


Arrow function:

const add = (a, b) => {
return a + b;
};
โค3
For a simple expression, you can make it even shorter:

const add = (a, b) => a + b;


This is called an implicit return.

๐Ÿ”Ÿ Arrow Function Examples

One parameter:

const square = number => number * number;
console.log(square(5)); // 25


Multiple parameters:

const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20


No parameters:

const greet = () => {
console.log("Hello");
};
greet();


1๏ธโƒฃ1๏ธโƒฃ Default Parameters

You can provide a default value for a parameter.

function greet(name = "Guest") {
console.log("Hello " + name);
}

greet("Rahul"); // Hello Rahul

greet(); // Hello Guest


Default parameters are very useful when a value is optional.

1๏ธโƒฃ2๏ธโƒฃ Rest Parameters

Sometimes you don't know how many arguments will be passed.

You can use "...".

function add(...numbers) {
console.log(numbers);
}

add(10, 20, 30, 40); // [10, 20, 30, 40]


The rest parameter collects the arguments into an array.

function add(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}

console.log(add(10, 20, 30)); // 60


1๏ธโƒฃ3๏ธโƒฃ Scope

Scope determines where a variable can be accessed.

function greet() {
let message = "Hello";
console.log(message);
}

greet();


"message" exists inside the function. Trying to access it outside: console.log(message); will cause an error.

This is because "message" has function/local scope.

1๏ธโƒฃ4๏ธโƒฃ Block Scope

Variables declared with "let" and "const" are block-scoped.

if (true) {
let message = "Hello";
console.log(message);
}


This works. But: console.log(message); outside the block does not. The block is defined by { // block }.

This is one reason "let" and "const" are preferred over "var".

1๏ธโƒฃ5๏ธโƒฃ Global Scope

A variable declared outside functions or blocks can be accessible from broader parts of the program.

const appName = "My App";

function showAppName() {
console.log(appName);
}

showAppName(); // My App


However, don't create unnecessary global variables. Too many globals can make larger applications difficult to maintain.

โญ 1๏ธโƒฃ6๏ธโƒฃ Callback Functions

A function can be passed to another function.

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

function processUser(callback) {
callback("Rahul");
}

processUser(greet); // Hello Rahul


Here: greet is passed as a value to processUser. This is called a callback function. Callbacks are extremely important in JavaScript because you'll encounter them throughout: Events, Array methods, Asynchronous programming, APIs, Node.js

โญ 1๏ธโƒฃ7๏ธโƒฃ Higher-Order Functions

A higher-order function is a function that: accepts another function as an argument, or returns a function.

function calculate(a, b, operation) {
return operation(a, b);
}

const add = (a, b) => a + b;

console.log(calculate(10, 5, add)); // 15


Here "calculate()" receives another function. That's a higher-order function.

โญ 1๏ธโƒฃ8๏ธโƒฃ Functions Returning Functions

A function can also return another function.

function createGreeting(name) {
return function () {
console.log("Hello " + name);
};
}

const greetRahul = createGreeting("Rahul");
greetRahul(); // Hello Rahul
This concept leads directly into one of JavaScript's most important advanced topics: Closures. We'll cover closures separately later.

1๏ธโƒฃ9๏ธโƒฃ Pure Functions

A pure function generally: 1. Produces the same output for the same input. 2. Doesn't modify external state.

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


Every time: add(2, 3) returns: 5. A function that depends on changing external state can behave differently. Understanding pure functions becomes particularly useful when working with modern frontend frameworks.

๐Ÿง  Real-World Example

Imagine an online shopping application.

function calculateDiscount(price, discount) {
return price - discount;
}

function calculateTax(price, taxRate) {
return price * taxRate;
}

let price = 2000;
let discountedPrice = calculateDiscount(price, 300);
let tax = calculateTax(discountedPrice, 0.18);

console.log(discountedPrice);
console.log(tax);


Instead of putting everything into one huge block of code, each function handles a specific responsibility.

๐Ÿง  Double Tap โค๏ธ For More
โค5
๐Ÿš€ ๐—ง๐—ผ๐—ฝ ๐—œ๐—ป-๐——๐—ฒ๐—บ๐—ฎ๐—ป๐—ฑ ๐—–๐—ฒ๐—ฟ๐˜๐—ถ๐—ณ๐—ถ๐—ฐ๐—ฎ๐˜๐—ถ๐—ผ๐—ป๐˜€ ๐˜๐—ผ ๐— ๐—ฎ๐˜€๐˜๐—ฒ๐—ฟ ๐—ถ๐—ป ๐Ÿฎ๐Ÿฌ๐Ÿฎ๐Ÿฒ

Explore these certification courses in todayโ€™s most in-demand technology fields:

๐Ÿ’ป Full Stack :- https://pdlink.in/3SuUeuD

๐Ÿ“Š Data Analytics :- https://pdlink.in/45vk5ph

๐Ÿ’ซAI Engineering :- https://pdlink.in/4fWJVID

๐Ÿ”ฅ Take the first step towards your high-paying tech career in 2026!
15 JavaScript Project Ideas for Freshers: โœจ๐Ÿ’ป

๐Ÿš€ Beginner Level :

1. โฐ Digital Clock โ€“ Show current time live with JavaScript.
2. โœ… To-Do List App โ€“ Add, delete & mark tasks as complete.
3. โž— Simple Calculator โ€“ Build a calculator with basic operations.
4. ๐Ÿง  Quiz App โ€“ Create a multiple-choice quiz with scores.
5. ๐Ÿ—“๏ธ Age Calculator โ€“ Enter DOB and get exact age.



๐ŸŒŸ Intermediate Level :

6. ๐Ÿ“‹ Form Validator โ€“ Validate email, password, and input fields.
7. ๐Ÿ”ข Number Guessing Game โ€“ Let users guess a random number.
8. ๐Ÿ”„ Weather App (API) โ€“ Fetch live weather using OpenWeather API.
9. ๐Ÿ“œ Quotes Generator โ€“ Show random quotes with a refresh button.
10. ๐Ÿ’ก Dark Mode Toggle โ€“ Add light/dark theme toggle to a webpage.


๐ŸŒŒ Advanced Level :

11. ๐ŸŽž๏ธ Movie Search App โ€“ Use OMDb API to search and display movies.
12. โš™๏ธ Typing Speed Test โ€“ Track how fast users can type.
13. ๐Ÿ›๏ธ Product Filter UI โ€“ Filter products by category/price.
14. ๐ŸŽต Music Player โ€“ Play, pause, skip songs with a cool UI.
15. ๐Ÿง  Memory Card Game โ€“ Flip cards and match pairs for fun!

Like if it helps ๐Ÿ‘โค๏ธ
โค7
๐—™๐—ฅ๐—˜๐—˜ ๐—”๐—œ ๐—–๐—ฎ๐—ฟ๐—ฒ๐—ฒ๐—ฟ ๐— ๐—ฎ๐˜€๐˜๐—ฒ๐—ฟ๐—ฐ๐—น๐—ฎ๐˜€๐˜€ ๐Ÿš€

Join this expert-led masterclass and discover how to become industry-ready for high-growth AI roles.

๐Ÿ“… Date: 24 September 2026
โฐ Time: 7:00 PMโ€“9:00 PM IST
๐ŸŒ Mode: Online
๐ŸŽ“ Certificate: Available to all attendees

Eligibility :- Graduates Passing In 2025 or earlier

๐Ÿ”— ๐—ฅ๐—ฒ๐—ด๐—ถ๐˜€๐˜๐—ฒ๐—ฟ ๐—ณ๐—ผ๐—ฟ ๐—™๐—ฅ๐—˜๐—˜ ๐Ÿ‘‡

https://pdlink.in/4xAMeGW

โšก Register now and take your first step towards a successful career in AI!
โค2
๐ŸŽ“ ๐—ฆ๐˜๐—ฎ๐—ป๐—ณ๐—ผ๐—ฟ๐—ฑ ๐—จ๐—ป๐—ถ๐˜ƒ๐—ฒ๐—ฟ๐˜€๐—ถ๐˜๐˜† ๐—™๐—ฅ๐—˜๐—˜ ๐—ข๐—ป๐—น๐—ถ๐—ป๐—ฒ ๐—–๐—ผ๐˜‚๐—ฟ๐˜€๐—ฒ๐˜€! ๐Ÿš€

Explore free online learning opportunities from Stanford University across technology, business and more!

๐Ÿ’ป Tech & Programming
๐Ÿค– Artificial Intelligence & Data Science
๐Ÿ’ผ Business & Entrepreneurship
๐Ÿ’ก Leadership & Innovation

๐Ÿ”— ๐—˜๐˜…๐—ฝ๐—น๐—ผ๐—ฟ๐—ฒ ๐˜๐—ต๐—ฒ ๐—™๐—ฅ๐—˜๐—˜ ๐—–๐—ผ๐˜‚๐—ฟ๐˜€๐—ฒ๐˜€ ๐Ÿ‘‡

https://pdlink.in/4hlnZGw

๐ŸŽฏ Great for students, freshers and working professionals looking to expand their knowledge.
๐Ÿš€ ๐—ง๐—ผ๐—ฝ ๐Ÿณ ๐—™๐—ฅ๐—˜๐—˜ ๐— ๐—ถ๐—ฐ๐—ฟ๐—ผ๐˜€๐—ผ๐—ณ๐˜ ๐—–๐—ผ๐˜‚๐—ฟ๐˜€๐—ฒ๐˜€ ๐˜๐—ผ ๐—Ÿ๐—ฒ๐—ฎ๐—ฟ๐—ป ๐——๐—ฎ๐˜๐—ฎ ๐—”๐—ป๐—ฎ๐—น๐˜†๐˜๐—ถ๐—ฐ๐˜€! ๐Ÿ“Š

Want to start a career in Data Analytics?

Explore these 7 free Microsoft-backed learning resources covering Power BI, Excel, SQL and data fundamentals

๐Ÿ”— ๐—”๐—ฐ๐—ฐ๐—ฒ๐˜€๐˜€ ๐˜๐—ต๐—ฒ ๐—™๐—ฅ๐—˜๐—˜ ๐—–๐—ผ๐˜‚๐—ฟ๐˜€๐—ฒ๐˜€ ๐Ÿ‘‡

https://pdlink.in/3Tm2D3Z

๐Ÿ’ก Ideal for students, freshers and professionals who want to build practical data skills.
โค2๐Ÿ“1
The best doesn't come from working more.

It comes from working smarter.

The most common mistakes people make,
With practical tips to avoid each:

1) Working late every night.

โ€ข Prioritize quality time with loved ones.

Understand that long hours won't be remembered as fondly as time spent with family and friends.

2) Believing more hours mean more productivity.

โ€ข Focus on efficiency.

Complete tasks in less time to free up hours for personal activities and rest.

3) Ignoring the need for breaks.

โ€ข Take regular breaks to rejuvenate your mind.

Creativity and productivity suffer without proper rest.

4) Sacrificing personal well-being.

โ€ข Maintain a healthy work-life balance.

Ensure you don't compromise your health or relationships for work.

5) Feeling pressured to constantly produce.

โ€ข Quality over quantity.

6) Neglecting hobbies and interests.

โ€ข Engage in activities you love outside of work.

This helps to keep your mind fresh and inspired.

7) Failing to set boundaries.

โ€ข Set clear work hours and stick to them.

This helps to prevent overworking and ensures you have time for yourself.

8) Not delegating tasks.

โ€ข Delegate when possible.

Sharing the workload can enhance productivity and give you more free time.

9) Overlooking the importance of sleep.

โ€ข Prioritize sleep for better performance.

A well-rested mind is more creative and effective.

10) Underestimating the impact of overworking.

โ€ข Recognize the long-term effects.

๐Ÿ‘‰WhatsApp Channel: https://whatsapp.com/channel/0029VaI5CV93AzNUiZ5Tt226

๐Ÿ‘‰Telegram Link: https://t.me/addlist/ID95piZJZa0wYzk5

Like for more โค๏ธ

All the best ๐Ÿ‘ ๐Ÿ‘
โค4๐Ÿ‘1
๐Ÿš€ ๐๐ž๐œ๐จ๐ฆ๐ž ๐š๐ง ๐€๐ˆ ๐„๐ง๐ ๐ข๐ง๐ž๐ž๐ซ ๐ข๐ง ๐Ÿ๐ŸŽ๐Ÿ๐Ÿ”

๐ŸŽฏ Choose Your Learning Track:

๐Ÿ’ป Java Full Stack + AI Engineering
๐ŸŒ MERN Full Stack + AI Engineering

Placement Highlights: โ‚น41 LPA highest package | โ‚น7.4 LPA average package | 2,000+ students placed | 500+ hiring partners

๐Ÿ”— ๐—•๐—ผ๐—ผ๐—ธ ๐—™๐—ฅ๐—˜๐—˜ ๐——๐—ฒ๐—บ๐—ผ ๐—–๐—น๐—ฎ๐˜€๐˜€ :- https://pdlink.in/4fWJVID

โšก AI is creating new career opportunitiesโ€”start building the skills companies need in 2026!
โค2
This media is not supported in your browser
VIEW IN TELEGRAM
๐Ÿค– New Powerful AI Model: GigaChat 3.5 Reasoning

This open-source LLM actually thinks before it answers! Perfect for complex coding, math, and reasoning prompts.

โœ… Built on GigaChat 3.5 Ultra: explores multiple step-by-step reasoning paths

โœ… Automated verification reinforces correct answers, enabling self-correction

โœ… Autonomously decides when to call external tools or revise earlier steps

โœ… Highly efficient: Linear attention uses 37% fewer tokens than DeepSeek V4 Flash Preview

๐Ÿ“ˆ Massive benchmark gains over non-reasoning versions:
โ€ข IFBench: 44 โ†’ 77
โ€ข Natural Plan: 64 โ†’ 80
โ€ข LiveCodeBench v6: 56 โ†’ 85

๐Ÿ”— Open-sourced under MIT license. Weights on Hugging Face: fp8 | bf16
โค2