DEV Community: QUBE

Callback Function in JavaScript

QUBE — Wed, 15 Apr 2026 09:17:49 +0000

A callback function in javascript is a function passed as an arguement into another function and executed later.
The benefit of using a callback function is that you can wait for the result of a previous function call and then execute another function call.

How Callbacks Work

Passing the Function: The function you want to run after some operation is passed as an argument to another function.
Executing the Callback: The main function executes the callback function at the appropriate time. This can be after a delay, once a task is complete, or when an event occurs.

Types of Callbacks:

Asynchronous Callbacks

Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting.
This is essential for preventing the application from freezing during long-running tasks like network requests.

Synchronous Callbacks

Synchronous Callbacks are executed immediately within the outer function, blocking further operations until completion.
Array methods like map(), filter(), and forEach() use synchronous callbacks.

Example For Callback Function:

Avoid callbacks when:

Code becomes nested and unreadable (use Promises or async/await).
You need error handling in asynchronous operations (Promises are better).

References:

How to Use Callback Functions in JavaScript

When you're building dynamic applications with JavaScript that display real-time data – like a weather app or live sports dashboard – you'll need a way to automatically fetch new data from an external source without disrupting the user experience. Yo...

freecodecamp.org

JavaScript Callbacks - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

geeksforgeeks.org

//Object Constructors in JavaScript//

QUBE — Wed, 08 Apr 2026 08:27:01 +0000

In JavaScript, an Object Constructor is a special function used to create multiple objects with the same structure (properties and methods). It’s useful when you want to create many similar objects (like users, cars, teams, etc.).

In the constructor function, this has no value. The value of this will become the new object when a new object is created.

this in Objects:

The this keyword refers to an object.
In JavaScript, this is used to access the object that is calling a method.

Example:

Instead of creating seperate objects ,we can use Object Constructors for efficiency.

References:

w3schools.com

//Objects in JavaScript//

QUBE — Mon, 06 Apr 2026 18:08:06 +0000

An object is a dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value.

The values of properties can be primitives, objects, or functions (known as methods when defined inside an object).
Objects are mutable and dynamic properties can be added, modified, or deleted at any time.
Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

1. Creating Object Using Object Literal

The object literal syntax allows you to define and initialize an object with curly braces {}, setting properties as key-value pairs.

2.Basic Operations on JavaScript Objects

CRUD Operations in Objects

Creating an Object in JavaScript:

Read through Objects:

Updating Values in Objects:

Deleting Values in Objects:

References:

Objects in JavaScript - GeeksforGeeks

geeksforgeeks.org

//Functions in JavaScript//

QUBE — Mon, 06 Apr 2026 06:28:41 +0000

1. What are Functions?

Functions or reusable code blocks designed for particular tasks
Functions are executed when they are called or invoked
Functions are fundamental in all programming languages

Functions are defined with the function keyword:

followed by the function name
followed by parentheses ( )
followed by brackets { }

Sample Program using Function:

2. Calling Functions

Functions are executed when they are called or invoked
You call a function by adding parentheses to its name: name()

3. Function Parameters

Parameters allow you to send values to a function
Parameters are listed in parentheses in the function definition

4. Function Return Values

A function can return a value back to the code that called it
The return statement is used to return a value from a function

5. Function Arguments

Function parameters and arguments are distinct concepts
Parameters are the names listed in the function definition
Arguments are the values received by the function

References:

w3schools.com

Array in JavaScript

QUBE — Fri, 03 Apr 2026 07:47:00 +0000

In JavaScript, an array is an ordered collection of values that can store multiple data types (numbers, strings, objects, etc.) under a single variable name.

Zero-Indexed: The first element is always at index 0, the second at 1, and so on.
Array elements are enclosed within square brackets.

why we use array?

for example, if we have a list of items storing the fruit in single variables could look like this:

let fruit_1="mango";
let fruit_2="apple";
let fruit_3="orange";

Here, we have only 3 fruits so we can declare like this but, what if we have 300 fruits? It's very hard to do in this method right.
For this the solution is array.

An array can hold many values under a single name, and you can access the values by referring to an index number.

const fruits=['mango','apple','orange'];

So this method is easier than the above. Here we declared 3 fruits names under a single varible.

Example:
simple program to print failcount of the student,using array.

****

References:

w3schools.com

Class & Id in HTML

QUBE — Wed, 01 Apr 2026 09:02:18 +0000

In HTML, the id and class attributes are used to identify and group elements, primarily for styling with CSS and manipulating with JavaScript. The key difference is that an id must be unique within a page, while a class can be used on multiple elements

class Attribute

Must be unique to a single element in the HTML document.
Uses a hash symbol (#) (e.g., #header).
Higher specificity.
Only one id per element.
Can be used for anchor links (jump links) within a page

id Attribute

Must be unique to a single element in the HTML document.
Uses a hash symbol (#) (e.g., #header).
Higher specificity.
Only one id per element.
Can be used for anchor links (jump links) within a page

JavaScript Program For Prime Number Using Loop

QUBE — Wed, 01 Apr 2026 08:45:11 +0000

📍Flowchart for simple looping programs.

QUBE — Mon, 30 Mar 2026 08:39:20 +0000

Operators in JavaScript

QUBE — Thu, 26 Mar 2026 09:43:41 +0000

Operators

Operators are symbols or keywords used in programming to perform operations on data, such as mathematical calculations, comparisons, and logical evaluations. They act on operands (variables or values) to produce a specific result, forming the foundation of data manipulation.

Arithmetic

Arithmetic: Used for math, including addition (+), subtraction (-), multiplication (*), division (/), and modulus (%).

Assignment

Assigns values to variables, such as = and compound operators like +=, -=, or *=.

Comparison Operators

These operators are used to compare two values
and then returns boolean values (true or false).

== (Equal value, with type coercion) === (Equal value and equal type; always prefer this strict equality) != (Not equal value) !== (Not equal value or not equal type/ Strict not equal) > (Greater than) < (Less than) >= (Greater than or equal to) <= (Less than or equal to)

Logical Operators

These operators are used to combine or modify boolean expressions. && (Logical AND) || (Logical OR) ! (Logical NOT) ?? (Nullish coalescing, returns the right operand if the left is null or undefined, otherwise returns the left).

Other Operators

String Concatenation Operator (+): When one of the operands is a string, the + operator concatenates the strings.
Bitwise Operators: Perform operations on the binary representations of numbers (e.g., &, |, ^, ~, <<, >>, >>>)

Conditionals

Use if to specify a code block to be executed, if a specified condition is true
Use else to specify a code block to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false.

Flex in CSS

QUBE — Wed, 25 Mar 2026 07:06:51 +0000

The flex property in CSS is part of the Flexible Box Layout module, a one-dimensional layout model used for designing responsive layouts that align and distribute space among items in a container. It makes tasks like vertical centering and creating equal-height columns straightforward.
Properties for the Flex Container

display- Enables the flex content.

flex: Generates a block-level flex container.
inline-flex: Generates an inline-level flex container.

flex-direction: Defines the main axis and the direction.

-flex-wrap: Controls whether items wrap onto multiple lines (wrap) or stay on a single line (nowrap, the default).

justify-content: Aligns items along the main axis (e.g., flex-start, flex-end, center, space-between, space-around, space-evenly).
align-content: Aligns multiple lines of flex items when flex-wrap is set to wrap and there is extra space in the cross axis.
gap (or row-gap, column-gap): Explicitly controls the space between flex items.
Properties for the Flex Items

These properties control individual items within the container.

order: Specifies the display order of an item, overriding the source HTML order (default is 0).
flex: A shorthand property for flex-grow, flex-shrink, and flex-basis.
flex-grow: Defines the ability for an item to grow and fill available space (default is 0).
flex-shrink: Defines the ability for an item to shrink if there is not enough space (default is 1).
flex-basis: Defines the initial size of an item before the remaining space is distributed (default is auto).
align-self: Overrides the align-items value for a specific flex item, allowing individual alignment along the cross axis.

HTML Basics

QUBE — Tue, 24 Feb 2026 08:01:21 +0000

HTML(HyperText Markup Language)is the standard language used to create web pages.It structures content on the web using elements and tags.

It is not a programming language.
It is a markup language
It tells the browser how to display the content
We can use CSS with HTML for designing purpose
We can use JavaScript with HTML for functionality

Basic structure of an HTML page.

My First Web Page
Welcome to HTML

This is my first webpage.
Features of HTML

Platform Independent
Simple and easy to learn
Used in all websites.

DEV Community: QUBE

Callback Function in JavaScript

How to Use Callback Functions in JavaScript

JavaScript Callbacks - GeeksforGeeks

//Object Constructors in JavaScript//

//Objects in JavaScript//

Objects in JavaScript - GeeksforGeeks

//Functions in JavaScript//

Array in JavaScript

Class & Id in HTML

JavaScript Program For Prime Number Using Loop

📍Flowchart for simple looping programs.

Operators in JavaScript

Flex in CSS

HTML Basics

Welcome to HTML