DEV Community: Ragul

Ways to Generate IDs in JavaScript

Ragul — Wed, 21 Oct 2026 04:42:59 +0000

ID generation in JavaScript is the process of creating identifiers, usually strings or numbers, that distinguish one record, element, or session from another in a JavaScript program. Common approaches include random numbers, timestamps, universally unique identifiers (UUIDs), and third-party libraries such as nanoid. The right method depends on whether the ID must be secure, short, sortable, or unique across systems.

Overview

Applications need identifiers for database rows, DOM elements, uploaded files, orders, and sessions. A good identifier is unique, hard to guess when exposed publicly, and suited to how it will be stored or displayed. JavaScript has no single built-in "ID" function, so developers choose between language features, the Web Crypto API, and external packages.

Methods

Math.random()

Math.random() returns a pseudo-random number that can be converted into a string.

const id = Math.random().toString(36).slice(2);

It requires no dependencies, but it is not cryptographically secure and collisions are possible. It is suitable only for temporary or non-sensitive keys.

Date.now()

Date.now() returns the current time in milliseconds.

const id = Date.now();

The result is sortable by creation time. Two IDs created in the same millisecond can be identical, and the values are easy to guess.

crypto.randomUUID()

crypto.randomUUID() returns a version 4 UUID generated from a cryptographically secure random source.

const id = crypto.randomUUID();

It is available in modern browsers (secure contexts only, meaning HTTPS or localhost) and in Node.js 14.17 and later. It is widely regarded as the default choice.

nanoid

nanoid is a small third-party library that produces compact, URL-safe string IDs. The default length is 21 characters.

import { nanoid } from 'nanoid';

const id = nanoid();

It is commonly used for share links and short codes.

UUID version 7

UUID version 7 embeds a timestamp in the leading bits, so identifiers are roughly ordered by creation time. It is available through the uuid package.

import { v7 } from 'uuid';

const id = v7();

useState hook in React

Ragul — Sun, 04 Oct 2026 18:32:33 +0000

useState is a built-in React Hook that lets a component remember information between renders. It is the most commonly used Hook in React and is usually the first one developers learn.

Overview

A React component is just a function, and a normal function forgets its variables every time it runs. When something on screen needs to change, like a counter, a typed input, or an open or closed menu, the component needs a way to keep that value and re-draw itself when it changes. useState does both.

Syntax

const [count, setCount] = useState(0);

This line gives you two things:

State value (count): the current stored value.
Setter function (setCount): the only proper way to change that value.

The number inside useState(0) is the initial value, used only on the first render.

How it works

The component renders for the first time and count is 0.
The user does something, like clicking a button.
The code calls setCount(1).
React saves the new value and re-renders the component.
The component runs again, and this time count is 1.

The key idea is that changing state tells React to update the screen. Changing a normal variable does not.

Basic example

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Each click raises the number by one.

What can be stored

State can hold any type of value:

Numbers and text
True or false values
Arrays (like a to-do list)
Objects (like form data)

Rules and common mistakes

Never change state directly. Writing count = 5 does nothing visible. Always use the setter.
Don't mutate arrays or objects. Make a new copy and pass that to the setter, for example setItems([...items, newItem]).
Updates are not instant. After calling the setter, the variable keeps its old value until the next render.
Use the function form when the new value depends on the old one: setCount(prev => prev + 1). This is safer when several updates happen quickly.
Call Hooks only at the top level of a component, never inside loops, conditions, or nested functions.

When to use it

Use useState for simple, local data that belongs to one component, such as input text, toggles, and counters. If many components need the same data, consider lifting the state up to a parent or using Context. For complex state with many related updates, useReducer may be a better fit.

Quick summary

Term	Meaning
State	Data a component remembers
Setter	Function that updates the state
Re-render	React redrawing the component with new state
Initial value	Starting value, used once

localStorage in Web Browser

Ragul — Mon, 28 Sep 2026 21:52:53 +0000

localStorage is a small storage space inside your web browser. A website can use it to save information on your device, and the information stays there even after you close the browser or restart your computer.

How it works

Think of it as a tiny notebook that each website gets to write in. Every entry has a name (called a key) and a value. A website can only read its own notebook, not the notebooks of other websites.

Basic example

// Save something
localStorage.setItem('theme', 'dark');

// Read it back
const theme = localStorage.getItem('theme');

// Delete it
localStorage.removeItem('theme');

// Delete everything
localStorage.clear();

localStorage can only store text. To save an object or list, convert it first:

const user = { name: 'Ragul', age: 22 };

localStorage.setItem('user', JSON.stringify(user));

const saved = JSON.parse(localStorage.getItem('user'));

What is it used for?

Remembering dark mode or light mode
Saving a draft of a form
Keeping a to-do list
Remembering a user's language choice

Good things about it

Easy to use
Data stays after closing the browser
Holds about 5 MB
Works in all modern browsers

Things to be careful about

Not secure. Never store passwords or private tokens in it.
Text only. Objects need JSON.stringify and JSON.parse.
Small size. It is not meant for large data.
Can be cleared. Users can delete it anytime from browser settings.

Props in React

Ragul — Fri, 25 Sep 2026 19:33:03 +0000

Props pass data from a parent component to a child component. Props are read-only — a child can't change them. Data flows one way: parent to child.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Ragul" />

Syntax

Props arrive as one object. You can destructure them for short code:

function Profile({ name, age }) {
  return <p>{name}, {age}</p>;
}

Characteristics

Read-only — a component can't change its own props
One-way flow — parent to child only
Any type — text, numbers, booleans, arrays, objects, functions

To let a child trigger a change, the parent passes a function as a prop:

function Counter({ count, onIncrement }) {
  return <button onClick={onIncrement}>{count}</button>;
}

`children` prop

Holds whatever is placed between a component's tags. Used for wrappers like cards or modals.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card><p>Nested content</p></Card>

Default values

function Button({ label = "Submit" }) {
  return <button>{label}</button>;
}

Props vs. State

	Props	State
From	Parent	The component itself
Changeable	No	Yes, via `useState`
Like	Function arguments	Local variables

Library vs. Framework

Ragul — Tue, 22 Sep 2026 06:18:22 +0000

Library and Framework are two terms used in software engineering to describe reusable code that developers incorporate into their own projects. Although often used interchangeably in casual conversation, the two refer to distinct architectural relationships between the reusable code and the application that uses it, primarily distinguished by the concept of inversion of control (IoC).

Overview
Core Distinction
Library
Framework
Comparison Table
Common Misconceptions
Examples
See Also

Overview

In software development, both libraries and frameworks exist to help developers avoid rewriting common functionality from scratch. The key difference lies not in what they do, but in who controls the flow of execution during a program's runtime.

Core Distinction

The relationship is generally summarized by the Hollywood Principle: "Don't call us, we'll call you."

	Library	Framework
Control flow	Application code calls the library	Framework calls the application code
Architectural role	Tool	Skeleton / Foundation

This concept is formally known as Inversion of Control. In a library-based architecture, control remains with the developer. In a framework-based architecture, control is inverted — the framework dictates the structure, and developer-written code is inserted into predefined extension points.

Library

A library is a collection of pre-written code — typically functions, classes, or modules — that a developer explicitly calls when needed. The developer retains full control over the application's architecture and decides when, where, and whether to invoke the library's functionality.

Characteristics

Called by the user's code (not the reverse)
Generally narrow in scope, performing a specific task
Can typically be swapped for an alternative library with moderate effort
Imposes minimal structural constraints on the surrounding codebase

Example

import { format } from 'date-fns';
const today = format(new Date(), 'yyyy-MM-dd');

Here, the developer chooses the exact point in the program at which the library function is invoked.

Framework

A framework is a foundational structure that dictates the architecture of an application. Rather than being called by the developer, a framework calls developer-supplied code at points it defines, commonly referred to as hooks, callbacks, or lifecycle methods.

Characteristics

Calls the user's code (inversion of control)
Typically broad in scope, governing overall application structure
More difficult to replace once deeply integrated
Enforces conventions, patterns, and file/folder organization

Example

def my_view(request):
    return HttpResponse("Hello, world!")

In this Django example, the developer does not initiate the request-handling process. The framework's internal routing mechanism invokes my_view() at the appropriate time.

Comparison Table

Criterion	Library	Framework
Who calls whom	You call it	It calls you
Control flow	Retained by developer	Inverted (held by framework)
Flexibility	High	Lower
Structural imposition	Minimal	Significant
Learning curve	Typically incremental	Typically steep, holistic
Ease of replacement	Relatively easy	Often difficult
Analogy	Hiring a specialist contractor	Using a prefabricated house kit

Common Misconceptions

"React is a framework."
React is officially classified by its maintainers as a library, since it is primarily concerned with rendering UI and does not dictate routing, state management, or application structure. Meta-frameworks built atop React, such as Next.js, do exhibit framework characteristics and impose structural conventions.

"Bigger tools are always frameworks."
Scope and size are not defining criteria. A large tool can still be a library if control flow remains with the developer; a small tool can technically be a framework if it inverts control.

Examples

Libraries

React
Lodash
Axios
jQuery
NumPy

Frameworks

Angular
Django
Ruby on Rails
Spring
ASP.NET
Next.js

React

Ragul — Sun, 20 Sep 2026 19:00:32 +0000

React (also known as React.js or React.JS) is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.

React was first released in May 2013. It was created by Jordan Walke, a software engineer at Facebook, who was influenced by an earlier library called XHP.

Overview

React allows developers to create large web applications that can change data without reloading the page. Its main goals are to be efficient, declarative, and flexible. It focuses solely on the view layer of an application, meaning it handles rendering the user interface, while other concerns such as routing and data management are typically handled by additional libraries.

Key Concepts

Components — Independent, reusable pieces of code that return a piece of user interface.
Virtual DOM — An in-memory representation of the real Document Object Model (DOM), which React uses to determine the most efficient way to update the browser.
JSX — A syntax extension that allows developers to write HTML-like code within JavaScript.
State — Data that changes over time within a component.
Props — Short for "properties," used to pass data from parent components to child components.

History

2011 — Deployed on Facebook's newsfeed.
2012 — Deployed on Instagram.
May 2013 — Open-sourced at the JSConf US conference.
2015 — React Native released, extending React's component-based approach to mobile app development for iOS and Android.
2017 — React 16 released, introducing a new internal architecture known as Fiber.

Usage

React is widely used for developing single-page applications and mobile applications. It is used by numerous large-scale organizations, including Meta, Netflix, Airbnb, and Uber. It also serves as the underlying foundation for popular frameworks such as Next.js and Gatsby.

Array Methods in JavaScript

Ragul — Tue, 15 Sep 2026 21:06:42 +0000

Arrays are one of the most important and frequently used data structures in JavaScript. Whether you are manipulating data, searching for specific items, or transforming a list into a completely new format, JavaScript provides a rich set of built-in array methods to make your life easier.

In this guide, we will explore 23 essential array methods. To keep things consistent and easy to follow, we'll use a running theme of telecom network providers for our examples!

Mutator Methods (Modify the Original Array)

These methods change the array they are called upon.

1. `push()`

Adds one or more elements to the end of an array and returns the new length of the array.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.push('tata');
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea', 'tata']

2. `pop()`

Removes the last element from an array and returns that element.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let last = providers.pop();
// last is 'idea', providers is ['jio', 'airtel', 'vi', 'bsnl']

3. `shift()`

Removes the first element from an array and returns that removed element.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let first = providers.shift();
// first is 'jio', providers is ['airtel', 'vi', 'bsnl', 'idea']

4. `unshift()`

Adds one or more elements to the beginning of an array and returns the new length.

let providers = ['airtel', 'vi', 'bsnl', 'idea'];
providers.unshift('jio');
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea']

5. `delete` (Operator)

Removes a property. On arrays, it deletes the element but leaves an undefined hole without changing the array's length. (Note: Generally, it's better to use splice() instead).

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
delete providers[1];
// Result: ['jio', undefined, 'vi', 'bsnl', 'idea']

6. `splice()`

The Swiss Army knife of arrays. It changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Insert Example:

let providers = ['jio', 'airtel', 'idea'];
providers.splice(1, 0, 'vi', 'bsnl'); // Start at index 1, delete 0, insert 'vi' & 'bsnl'
// Result: ['jio', 'vi', 'bsnl', 'airtel', 'idea']

Delete Example:

let arr = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
arr.splice(2, 2); // Start at index 2, delete 2 elements
// Result: ['jio', 'airtel', 'idea']

Replace Example:

let list = ['jio', 'airtel', 'idea'];
list.splice(1, 1, 'vi'); // Start at index 1, delete 1, insert 'vi'
// Result: ['jio', 'vi', 'idea']

7. `sort()`

Sorts the elements of an array in place and returns the reference to the same array.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.sort();
// Result: ['airtel', 'bsnl', 'idea', 'jio', 'vi']

8. `reverse()`

Reverses an array in place. The first element becomes the last, and the last becomes the first.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.reverse();
// Result: ['idea', 'bsnl', 'vi', 'airtel', 'jio']

Accessor & Transform Methods

These methods do not modify the original array; instead, they return a new array, string, or value.

9. `slice()`

Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let sliced = providers.slice(1, 3);
// Result: ['airtel', 'vi']

10. `join()`

Creates and returns a new string by concatenating all of the elements in an array, separated by a specified string.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let str = providers.join('-');
// Result: 'jio-airtel-vi-bsnl-idea'

11. `split()` (String Method)

Divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array.

let str = 'jio,airtel,vi';
let arr = str.split(',');
// Result: ['jio', 'airtel', 'vi']

12. `concat()`

Used to merge two or more arrays. It does not change the existing arrays, but instead returns a new array.

let group1 = ['jio', 'airtel'];
let group2 = ['vi', 'bsnl'];
let merged = group1.concat(group2);
// Result: ['jio', 'airtel', 'vi', 'bsnl']

13. `flat()`

Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

let nested = [['jio', 'airtel'], ['vi', 'bsnl'], 'idea'];
let flatArr = nested.flat();
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea']

14. `map()`

Creates a new array populated with the results of calling a provided function on every element in the calling array.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let prices = arr.map(p => p.price);
// Result: [199, 299]

15. `filter()`

Creates a shallow copy of a portion of a given array, filtered down to just the elements that pass a test implemented by the provided function.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let affordable = arr.filter(p => p.price < 250);
// Result: [{name: 'jio', price: 199}]

Search & Iteration Methods

These methods help you loop through arrays or find specific elements.

16. `forEach()`

Executes a provided function once for each array element.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
arr.forEach(p => console.log(p.name));
// Output: 
// jio
// airtel

17. `Array.isArray()`

Determines whether the passed value is an Array.

let arr = ['jio', 'airtel'];
console.log(Array.isArray(arr));
// Result: true

18. `find()`

Returns the first element in the provided array that satisfies the provided testing function.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let found = arr.find(p => p.name === 'airtel');
// Result: {name: 'airtel', price: 299}

19. `reduce()`

Executes a user-supplied "reducer" callback function on each element of the array, resulting in a single accumulated output value.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let total = arr.reduce((acc, curr) => acc + curr.price, 0);
// Result: 498

20. `some()`

Tests whether at least one element in the array passes the test implemented by the provided function. Returns a boolean.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let hasExpensive = arr.some(p => p.price > 250);
// Result: true

21. `every()`

Tests whether all elements in the array pass the test implemented by the provided function. Returns a boolean.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let allUnder300 = arr.every(p => p.price < 300);
// Result: true

22. `includes()`

Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let hasJio = providers.includes('jio');
// Result: true

23. `indexOf()`

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let idx = providers.indexOf('vi');
// Result: 2

Base64

Ragul — Thu, 10 Sep 2026 19:45:27 +0000

What Base64 Actually Is

Base64 is a way of representing binary data — images, files, encrypted bytes, anything made of raw 0s and 1s — using only printable text characters. It's not encryption, and it's not compression. It's purely a translation from binary into a text-safe format.

The name comes from the fact that it uses a 64-character alphabet:

Uppercase letters: A–Z (26 characters)
Lowercase letters: a–z (26 characters)
Digits: 0–9 (10 characters)
Two symbols, usually + and /
The = character, used for padding at the end

64 possible values map neatly onto 6 bits of data (since 2⁶ = 64), which is the mathematical trick that makes the whole scheme work.

Why Base64 Exists

Many systems — old email protocols, certain text fields, JSON, XML, and URLs — were designed to handle plain text, not arbitrary binary data. Sending raw binary through these channels can cause problems: bytes might get misinterpreted, special characters might break formatting, or control characters might get silently stripped or altered.

Base64 solves this by converting any binary data into a stream of safe, printable ASCII characters that can pass through virtually any text-based system without corruption.

How the Encoding Works

The process is mechanical once you see it laid out:

Take the binary data and group it into chunks of 3 bytes (24 bits).
Split those 24 bits into four groups of 6 bits each.
Map each 6-bit group to a character in the Base64 alphabet.
If the final group of bytes doesn't divide evenly into 3, pad the output with = characters so the length stays a multiple of 4.

That's why encoded Base64 output is always about 33% larger than the original data — three bytes of binary become four bytes of text.

A quick example: the text "Man" (3 bytes: M, a, n) encodes to TWFu. Three ASCII characters go in, four Base64 characters come out — a clean, evenly divisible case with no padding needed.

Where You'll Actually See It

Base64 shows up in more places than most people realize:

Email attachments — MIME uses Base64 to embed images, PDFs, and other files inside plain-text email messages.
Data URLs — Small images or fonts can be embedded directly into HTML or CSS using data:image/png;base64,... instead of a separate file request.
APIs and JSON — Since JSON only supports text, binary payloads like images or files are often Base64-encoded before being included in a request or response.
Authentication — Basic HTTP authentication headers encode the username:password pair in Base64 (note: this is not secure on its own, since Base64 is trivially reversible).
Storing binary data in databases or config files that only support text fields.

A Common Misconception

Because Base64-encoded text looks scrambled, people sometimes assume it's a form of encryption or security. It isn't. Anyone can decode Base64 instantly using a browser console, a command-line tool, or countless free websites — there's no secret key involved. It should be thought of purely as a format conversion, never as a way to protect sensitive information.

The Trade-Off to Remember

Base64 solves a real compatibility problem, but it isn't free. That roughly 33% size increase matters when you're sending large files over a network or storing lots of encoded data — it's extra bandwidth and storage for no added value beyond text-safety. In situations where binary transfer is already supported (like most modern file uploads), skipping Base64 entirely is usually the better choice.

The Takeaway

Base64 is a small, elegant piece of engineering that quietly keeps a huge portion of the internet working smoothly. It doesn't protect data and it doesn't shrink it — it simply makes binary information speak the universal language of plain text, so it can travel safely through systems that were never built to handle anything else.

Tailscale

Ragul — Wed, 09 Sep 2026 18:38:48 +0000

What Tailscale Actually Is

Tailscale is a mesh VPN built on top of WireGuard, a modern, minimal, heavily-audited VPN protocol. Install the Tailscale client on your laptop, phone, or server, sign in with an existing account (Google, GitHub, Microsoft, etc.), and that device joins your tailnet — a private network only your devices can see.

Unlike a traditional VPN, there's no central server all your traffic funnels through. Devices connect directly to each other wherever possible, encrypted end-to-end. Tailscale's infrastructure only helps devices find each other and negotiate that connection — it doesn't sit in the middle of your actual traffic.

Why People Use It

No more painful VPN setup. No port forwarding, no static IP allowlists — install the client, log in, done.
Works through NAT and firewalls automatically. Two devices behind separate home routers can still find a direct path to each other. When that's not possible, traffic relays through Tailscale's servers — still fully encrypted, just routed rather than direct.
Great for individuals, not just companies. A huge part of Tailscale's popularity comes from hobbyists running a home lab, self-hosting things like Nextcloud or Home Assistant, or just wanting to reach their desktop from anywhere. The free tier covers personal use with a generous device limit.

Standout Features

MagicDNS — every device gets a stable hostname (myserver.tailnet-name.ts.net) instead of you needing to remember an IP.
Taildrop — AirDrop-style file transfer between your own devices.
Subnet routers and exit nodes — expose your whole home LAN to your tailnet, or route all internet traffic through a trusted device.
Tailscale SSH — identity-based SSH access without manual key management.

My Setup: Home Server + Nextcloud

I use Tailscale specifically to reach my home server and my self-hosted Nextcloud storage — without opening any ports to the public internet.

Home server access — I install the Tailscale client directly on the home server, so it joins my tailnet just like my laptop and phone do. From anywhere, I can reach it by its Tailscale hostname instead of a public IP.
Nextcloud access — instead of exposing Nextcloud's port 443 to the internet, I point the Nextcloud desktop and mobile apps at the server's Tailscale hostname (e.g. homeserver.tailnet-name.ts.net). This keeps file sync and access completely private to my own devices.
MagicDNS — turned on so I never have to remember or type IP addresses for either service.
Mobile access — the Tailscale app has to be running in the background on my phone before the Nextcloud app can reach the server.
HTTPS — using tailscale cert to get a real Let's Encrypt-backed certificate for the tailnet hostname, so there are no self-signed cert warnings in the Nextcloud clients.

This setup means my storage server is reachable from any of my devices, anywhere, with no port forwarding and no attack surface exposed to the public internet.

Getting Started

Create a free account at tailscale.com.
Install the client on two devices.
Log in on both.
Ping one from the other by hostname.

No port forwarding, no static IPs, no certificate management required to get started.

Promises in JavaScript

Ragul — Mon, 07 Sep 2026 17:33:59 +0000

Imagine you order food at a restaurant. The waiter doesn't hand you the food right away — they hand you an order ticket instead. That ticket is a promise: your food will arrive, or the kitchen will tell you they're out of what you ordered. Either way, you're not just standing there frozen, waiting. You can keep chatting with your friends until the food (or the bad news) shows up.

That's exactly what a Promise is in JavaScript. It's a placeholder for something that will finish later, like fetching data from the internet, which doesn't happen instantly.

The Three States

A Promise is always in one of three states:

Pending – still waiting, like your food order still cooking
Fulfilled – it worked, your food arrived
Rejected – it failed, the kitchen ran out

Once it lands on fulfilled or rejected, it stays there. No take-backs.

Why Not Just Wait?

JavaScript doesn't like to sit around doing nothing while waiting for slow things like network requests. Instead of freezing the whole page, it hands you a Promise and moves on. Later, when the slow thing finishes, your Promise tells you what happened.

Using a Promise

The most common way to work with Promises today is async/await, because it reads almost like normal step-by-step code:

async function getWeather() {
  const data = await fetchWeather();
  console.log(data);
}

The await just means "pause here until this is done, then continue." If something goes wrong, you catch it like this:

async function getWeather() {
  try {
    const data = await fetchWeather();
    console.log(data);
  } catch (error) {
    console.log("Couldn't get the weather.");
  }
}

That's really the whole idea: await for waiting, try/catch for handling problems.

Callback in JavaScript

Ragul — Fri, 04 Sep 2026 18:34:24 +0000

If you're just starting out with JavaScript, you've probably come across the word "callback" and felt a little confused. Don't worry — it's a simple idea with a slightly intimidating name. Let's break it down.

The Simple Definition

A callback is just a function that you pass into another function, so it can be run later.

That's really it. In JavaScript, functions aren't just things you call — they're values you can pass around, just like a number or a string. So you can hand a function to another function as an argument.

A Real-Life Analogy

Imagine you order food at a restaurant. Instead of standing at the counter waiting for it, you give the cashier your phone number. They call you back the moment your food is ready.

You didn't wait around doing nothing — and the cashier knows exactly what to do once your order is done: call your number.

That's exactly what a callback is. You're saying:

"Here's a function. Run it once you're done doing your thing."

A Simple Code Example

function orderFood(callback) {
  console.log("Order placed!");
  callback();
}

function pickUpOrder() {
  console.log("Order picked up!");
}

orderFood(pickUpOrder);

Output:

Order placed!
Order picked up!

Here, pickUpOrder is the callback — a function passed into orderFood, to be run when orderFood decides it's time.

Why Not Just Call the Function Normally?

Good question. In the example above, you could've just called pickUpOrder() directly and it would look the same. But callbacks become important when something takes time — like waiting for a timer, a file to load, or data from a server.

JavaScript doesn't freeze and wait around for these things. Instead, it keeps running your other code, and calls your callback function later, once the task is finished.

console.log("Order placed!");

setTimeout(() => {
  console.log("Order ready!");
}, 3000); // waits 3 seconds

console.log("Doing homework while I wait...");

Output:

Order placed!
Doing homework while I wait...
Order ready!

Notice: "Order ready!" shows up last, even though it's written in the middle of the code. That's the whole point of a callback — it runs whenever the task finishes, not necessarily in the order it's written.

You've Probably Already Used One

If you've ever written code like this, you've used a callback without knowing it:

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The arrow function here is a callback — it doesn't run right away. It waits until the button is actually clicked.

Quick Summary

A callback is a function passed into another function.
It gets called ("called back") once that other function is ready for it.
Callbacks are especially useful for things that take time — timers, clicks, loading data — so your code doesn't have to freeze and wait.

Once this clicks, you're ready to explore where callbacks are used everywhere in JavaScript — from button clicks to loading data from the internet. It's one of the most important building blocks to understand as a beginner.

Functions in JavaScript

Ragul — Wed, 02 Sep 2026 17:19:14 +0000

Functions are one of the most fundamental building blocks in JavaScript. They let you package up a piece of logic, give it a name, and reuse it wherever you need it. If you're learning JavaScript, getting comfortable with functions early will save you a lot of headaches later on.

What Is a Function?

At its core, a function is a reusable block of code designed to perform a specific task. Instead of writing the same logic over and over, you write it once inside a function and simply "call" that function whenever you need it.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Ragul")); // Hello, Ragul!

Here, greet takes an input (called a parameter), does something with it, and returns an output.

Ways to Write Functions

JavaScript gives you several ways to define a function, and each has its own use cases.

1. Function Declarations

This is the classic style, and it's "hoisted" — meaning you can call it before it appears in your code.

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

2. Function Expressions

Here, a function is assigned to a variable. Unlike declarations, these are not hoisted in the same way, so they must be defined before use.

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

3. Arrow Functions

Introduced in ES6, arrow functions offer a shorter syntax and behave differently with this (more on that below).

const subtract = (a, b) => a - b;

For a single expression, you can even skip the curly braces and the return keyword — the result is returned automatically.

Parameters and Default Values

Functions can take any number of parameters, and you can assign them default values in case no argument is passed.

function greet(name = "friend") {
  return `Hey there, ${name}!`;
}

console.log(greet()); // Hey there, friend!

You can also accept an unlimited number of arguments using the rest parameter:

function sumAll(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sumAll(1, 2, 3, 4)); // 10

DEV Community: Ragul

Ways to Generate IDs in JavaScript

Overview

Methods

Math.random()

Date.now()

crypto.randomUUID()

nanoid

UUID version 7

useState hook in React

Overview

Syntax

How it works

Basic example

What can be stored

Rules and common mistakes

When to use it

Quick summary

localStorage in Web Browser

How it works

Basic example

What is it used for?

Good things about it

Things to be careful about

Props in React

Syntax

Characteristics

children prop

Default values

Props vs. State

Library vs. Framework

Contents

Overview

Core Distinction

Library

Characteristics

Example

Framework

Characteristics

Example

Comparison Table

Common Misconceptions

Examples

Libraries

Frameworks

React

Overview

Key Concepts

History

Usage

Array Methods in JavaScript

Mutator Methods (Modify the Original Array)

1. push()

2. pop()

3. shift()

4. unshift()

5. delete (Operator)

6. splice()

7. sort()

8. reverse()

Accessor & Transform Methods

9. slice()

10. join()

11. split() (String Method)

12. concat()

13. flat()

14. map()

15. filter()

Search & Iteration Methods

16. forEach()

17. Array.isArray()

18. find()

19. reduce()

20. some()

21. every()

22. includes()

23. indexOf()

Base64

What Base64 Actually Is

Why Base64 Exists

`children` prop

1. `push()`

2. `pop()`

3. `shift()`

4. `unshift()`

5. `delete` (Operator)

6. `splice()`

7. `sort()`

8. `reverse()`

9. `slice()`

10. `join()`

11. `split()` (String Method)

12. `concat()`

13. `flat()`

14. `map()`

15. `filter()`

16. `forEach()`

17. `Array.isArray()`

18. `find()`

19. `reduce()`

20. `some()`

21. `every()`

22. `includes()`

23. `indexOf()`