DEV Community: Jahid Iqbal

JavaScript কীভাবে কাজ করে ?

Jahid Iqbal — Mon, 16 Jun 2025 19:13:49 +0000

আমরা সবাই কোড লিখি বা বিভিন্ন প্রজেক্টে জাভাস্ক্রিপ্ট ব্যবহার করি, কিন্তু কি কখনো ভেবেছেন—আপনার লেখা সেই কোডটা আসলে বিহাইন্ড দ্যা সিন কীভাবে কাজ করে ? এই প্রসেস নিয়ে আমারও প্রথমে কিছু কনফিউশন ছিল।তাই আজ সহজ ভাষায় পুরো প্রক্রিয়াটি ব্যাখ্যা করার চেষ্টা করছি, আশা করি, আপনিও এই বিষয়গুলো সহজেই বুঝতে পারবেন।

★ JavaScript Engine
আপনার কোডটি প্রথমে যায় JavaScript Engine-এ (যেমন Chrome-এ V8 Engine)।

★ Parser
ইঞ্জিনের ভিতরে একটি Parser থাকে, যেটা কোড লাইন বাই লাইন পড়ে দেখে—সিনট্যাক্স ঠিক আছে কি না।a

★ AST – Abstract Syntax Tree
যদি কোড ঠিকঠাক থাকে, তখন তা থেকে তৈরি হয় একটি AST (Abstract Syntax Tree)।এই AST এক ধরনের গঠনমূলক ম্যাপ, যেটা দেখিয়ে দেয় কোডের গঠন কেমন — কোনটা ফাংশন, কোনটা ভ্যারিয়েবল, কোনটা লজিক ইত্যাদি।

★ Machine Code
AST-এর সাহায্যে কোডটি এরপর Machine Code-এ রূপান্তরিত হয় — মানে এমন কোড যা কম্পিউটার সরাসরি বুঝতে পারে।

★ Execution
সবশেষে Machine Code চলে যায় প্রসেসরে, যেখানে সেটা রান হয়, আর তখনই কোডটা বাস্তবে কাজ করতে শুরু করে।

📌 তাহলে সংক্ষেপে JavaScript এইভাবে কাজ করে:
Code → Parser → AST → Machine Code → Processor → Execution

𝐃𝐣𝐚𝐧𝐠𝐨-এর 𝐑𝐞𝐪𝐮𝐞𝐬𝐭-𝐑𝐞𝐬𝐩𝐨𝐧𝐬𝐞 𝐋𝐢𝐟𝐞𝐜𝐲𝐜𝐥𝐞 বাংলায় এক নজরে!

Jahid Iqbal — Sat, 15 Mar 2025 13:57:58 +0000

কয়েক সপ্তাহ ধরে Django নিয়ে কাজ করছি। ভাবলাম, Django-এর Request Response
Lifecycle নিয়ে যতটুকু পড়েছি এবং বুঝতে পেরেছি সেটাই আজ শেয়ার করছি।

𝟭: 𝗖𝗹𝗶𝗲𝗻𝘁 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 পাঠানো
যখন একজন ব্যবহারকারী ব্রাউজারে কোনো URL-এ প্রবেশ করে, তখন একটি HTTP request (GET, POST ইত্যাদি) সার্ভারের কাছে পাঠানো হয়।

𝟮: 𝗨𝗥𝗟 𝗥𝗼𝘂𝘁𝗶𝗻𝗴
Django প্রথমে urls. py ফাইলে যায় , কোন URL প্যাটার্নের সাথে request টি মিলে কিনা চেক করে । যদি URL সঠিক হয়, তাহলে সেটি নির্দিষ্ট view ফাংশনে পাঠানো হয়।

urlpatterns = [ path('home/', views.home, name='home'), ]

𝟯: 𝗩𝗶𝗲𝘄
View ফাংশন request টি গ্রহণ করে এবং লজিক (Business logic) অনুযায়ী ডেটা প্রসেস করে।

def home(request): return HttpResponse('Hello, Django!')

এখানে view থেকে response তৈরি করা হয়, যেমন HTML, JSON ইত্যাদি।

𝟰: 𝗠𝗼𝗱𝗲𝗹 এবং 𝗗𝗮𝘁𝗮𝗯𝗮𝘀𝗲 𝗔𝗰𝗰𝗲𝘀𝘀 (যদি প্রয়োজন হয়)
যদি ডেটাবেস থেকে ডেটা প্রয়োজন হয়, তাহলে view মডেলের (Model) মাধ্যমে ডেটাবেসের সাথে যোগাযোগ করে।

class Product(models.Model): name = models.CharField(max_length=100) price = models.FloatField()
𝟱: 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴
যদি HTML বা Frontend এর প্রয়োজন হয়, তাহলে view ফাংশন template-এ ডেটা পাঠিয়ে রেন্ডার করে।

def home(request): context = {'message': 'Hello, Django Template!'} return render(request, 'home.html', context)

𝟲: 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗲
সবশেষে view থেকে response (যেমন HttpResponse, JsonResponse) ব্রাউজারের দিকে পাঠানো হয়।

𝗦𝘁𝗲𝗽 𝟳: 𝗖𝗹𝗶𝗲𝗻𝘁 এ 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗲 প্রদর্শন
ব্রাউজার response গ্রহণ করে এবং ব্যবহারকারীর সামনে ফলাফল প্রদর্শন করে।

🎯 সংক্ষেপে:
✅ Client Request → URL Routing → View Processing → Model Access → Template Rendering → Response পাঠানো → Client এ Response প্রদর্শন

এইভাবেই Django-এর পুরো Request-Response Lifecycle সম্পন্ন হয়!

𝐃𝐞𝐟𝐢𝐧𝐞 𝐩𝐨𝐩,𝐩𝐮𝐬𝐡,𝐬𝐡𝐢𝐟𝐭,𝐮𝐧𝐬𝐡𝐢𝐟𝐭 𝐌𝐞𝐭𝐡𝐨𝐝𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

Jahid Iqbal — Thu, 24 Mar 2022 06:00:47 +0000

𝐩𝐨𝐩(): 𝑅𝑒𝑚𝑜𝑣𝑒 an item from the 𝑒𝑛𝑑 of an 𝑎𝑟𝑟𝑎𝑦.

𝐸𝑥𝑎𝑚𝑝𝑙𝑒
let players = ['Shakib', 'Tamim', 'Mushfiq'];
players.pop(); // ['Shakib', 'Tamim']

𝐬𝐡𝐢𝐟𝐭():𝑅𝑒𝑚𝑜𝑣𝑒 an item from the 𝑏𝑒𝑔𝑖𝑛𝑛𝑖𝑛𝑔 of an array.

𝐸𝑥𝑎𝑚𝑝𝑙𝑒
let players = ['Shakib', 'Tamim','Mushfiq' ];
players.shift(); // ['Tamim','Mushfiq']

𝐩𝐮𝐬𝐡(): 𝐴𝑑𝑑 items to the 𝑒𝑛𝑑 of an array.

𝐸𝑥𝑎𝑚𝑝𝑙𝑒
let rivers= ['Meghna'];
rivers.push('Jamuna'); // ['Meghna', 'Jamuna']

𝐮𝐧𝐬𝐡𝐢𝐟𝐭(): 𝐴𝑑𝑑 items to the 𝑏𝑒𝑔𝑖𝑛𝑛𝑖𝑛𝑔 of an array.

𝐸𝑥𝑎𝑚𝑝𝑙𝑒
let fruits= ['Mango'];
fruits.unshift('Orange'); // ['Orange', 'Mango']

𝐁𝐢𝐧𝐝, 𝐂𝐚𝐥𝐥, 𝐚𝐧𝐝 𝐀𝐩𝐩𝐥𝐲 𝐌𝐞𝐭𝐡𝐨𝐝𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

Jahid Iqbal — Thu, 24 Mar 2022 05:58:21 +0000

𝗕𝗶𝗻𝗱
The bind method creates a new function and sets ‘this’ keyword to the specified object.

𝑬𝒙𝒂𝒎𝒑𝒍𝒆:
const showNum= {
num: 50,
getNum: function() {
return this.num;
}
};

const unboundGetNum = showNum.getNum;
console.log(unboundGetNum());
// The function gets invoked at the global scope
// expected output: undefined

const boundGetNum= unboundGetNum.𝗯𝗶𝗻𝗱(showNum);
console.log(boundGetNum());
// expected output: 50

𝐂𝐚𝐥𝐥
The call method sets “this” inside the function and immediately executes that function. Call() accepts 𝘤𝘰𝘮𝘮𝘢-𝘴𝘦𝘱𝘢𝘳𝘢𝘵𝘦𝘥 list of arguments.

𝑬𝒙𝒂𝒎𝒑𝒍𝒆:
function Gadget(name, price) {
this.name = name;
this.price = price;
}
function Laptop(name, price) {
Gadget.𝗰𝗮𝗹𝗹(this, name, price);
this.category = 'laptop';
}
console.log(new Laptop('Asus', 5).name);
// expected output: "Asus"

𝗔𝗽𝗽𝗹𝘆
The apply() method is similar to call(). The difference is that the apply() method accepts an 𝑎𝑟𝑟𝑎𝑦 𝑜𝑓 𝑎𝑟𝑔𝑢𝑚𝑒𝑛𝑡𝑠 instead of comma separated values.

𝑬𝒙𝒂𝒎𝒑𝒍𝒆:
const person = {
firstName: 'Jahid',
lastName: 'Iqbal'
}
function greet(greeting, message) {
return ${greeting} ${this.firstName} ${this.lastName}. ${message};
}
let result =greet.𝗮𝗽𝗽𝗹𝘆(person, ['Hello', 'How are you?']);

console.log(result);
// expected output: "Hello Jahid Iqbal. How are you?"

𝐃𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐛𝐞𝐭𝐰𝐞𝐞𝐧 𝐝𝐨𝐮𝐛𝐥𝐞 𝐞𝐪𝐮𝐚𝐥𝐬 == 𝐚𝐧𝐝 𝐭𝐫𝐢𝐩𝐥𝐞 𝐞𝐪𝐮𝐚𝐥𝐬 === 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭?

Jahid Iqbal — Tue, 22 Mar 2022 19:06:46 +0000

Double equals== is used for 𝑐𝑜𝑚𝑝𝑎𝑟𝑖𝑛𝑔 𝑡𝑤𝑜 𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑠, but it 𝑖𝑔𝑛𝑜𝑟𝑒𝑠 the variable's datatype whereas Triple equals=== is used for comparing two variables, but this operator 𝑎𝑙𝑠𝑜 𝑐ℎ𝑒𝑐𝑘𝑠 𝑑𝑎𝑡𝑎𝑡𝑦𝑝𝑒.

== returns true only if the two operands are 𝑒𝑞𝑢𝑎𝑙 while === returns true only if two variables 𝑣𝑎𝑙𝑢𝑒𝑠 and 𝑑𝑎𝑡𝑎 𝑡𝑦𝑝𝑒𝑠 are the 𝑠𝑎𝑚𝑒.

CSS position absolute versus relative easy way!

Jahid Iqbal — Sun, 30 Jan 2022 17:17:09 +0000

CSS position property

CSS position property determines the positioning of an element and also plays an important role of how the element will be displayed in the browser.

Absolute position

In absolute position, an element changes the positions and layout with respect to its parent. If it didn’t find any parent then it will use the document body.

Relative position

In Relative position, an element changes its position within its current position without affecting the layout.

CRUD OPERATION IS EASY PEASY IF YOU READ THIS!

Jahid Iqbal — Thu, 23 Dec 2021 17:06:52 +0000

CRUD operation refers to creating,reading,updating and deleting documents in MongoDB.The term CRUD refers to the functions that users need in order to create and manage data.
It makes application design easier and more scalable by simplifying and facilitating it

Create Operations

Create or insert operations are used to insert or add new documents in the collection.If there’s no collection,then it will create a new collection.

Create operation follow two methods to insert documents into a collection.First method is db.collection.insertOne() and the second one is db.collection.insertMany()

db.collection.insertOne()

It is used to insert a single document in the collection.The document we want to insert is always written inside the insertOne function in a JSON format enclosed inside curly brackets. This is how (below example) we insert one document inside a collection.

Example

db.collection-name.insertOne(
{
person : 3,
car : 4,
}
)

db.collection.insertMany()

It is used to insert multiple documents in the collection.If we want to insert more than one document at a time, we have to use insertMany.

Example

db.cars.insertMany([{
name: "Rolex"
model: "2005"
},{
name: "G-shock"
model: "2018"
}])

Read Operations

Read operations are used to retrieve documents from the collection or query a collection for documents.The db.collection.find() operation will return everything from a collection if we call it without any parameters.We can also choose any filter or criteria to obtain data from a collection by using db.collection.find(query)

Example

db.cars.find() // no parameters

Output

{ "_id" : ObjectId("1"), "name" : "Asus laptop", "model" : "2005" }
{ "_id" : ObjectId("2"), "name" : "HP laptop", "model" : "2018" }
{ "_id" : ObjectId("3"), "name" : "Dell laptop", "2013" : "2005" }

db.cars.find({"model": "2005"}) // with one parameter

Output

{ "_id" : ObjectId("1"), "name" : "Asus laptop", "model" : "2005"}

Update Operations

Update operations are used to update or change the existing document in the collection.
Three ways db.collection.updateOne(), db.collection.updateMany() , db.collection.replaceOne() to update documents of a collection.

db.collection.updateOne()

It is used to update a single document in the collection.

Example

updateOne({"_id" : ObjectId("1")}, {$set: { "new_model" : 2020}})

Output

{"_id" : ObjectId("1"),
"model" : 2005,
"new_model" : 2020}

db.collection.updateMany()

It is used to update multiple documents in the collection.

Example

updateMany({"_id" : ObjectId("1")}, {$set: { "name" : "laxy"}, $set: { "new_model" : 2020}})

Output

{"_id" : ObjectId("1"),
"model" : 2005,
"new_model" : 2020
"name" : "laxy"}

db.collection.replaceOne()

It is used to replace a single document in the collection .

Example

{
"_id" : ObjectId("1"),
"model" : 2005
}

replaceOne({"_id" : ObjectId("1")}, { "new_model" : 2020})

Output

{ "_id" : ObjectId("1"),
"new_model" : 2020
}

Delete Operations

The delete operation is used to delete or eliminate the documents from a collection.
There are two methods to delete documents of a collection.One is db.collection.deleteOne() _and another one is _db.collection.deleteMany().

deleteOne()

It is used to delete a single document from the collection.

Example

db.cars.deleteOne(
//deletes one laptop having model "2013"
{ "model": "2013" }
)

deleteMany()

It is used to delete multiple documents from the collection.

Example

db.cars.deleteMany(
//delete all cars having model "2013"
{ "model": "2013" }
)

Important topic of React that you can’t Ignore!

Jahid Iqbal — Thu, 23 Dec 2021 06:09:47 +0000

PropTypes

PropTypes is an Internal mechanism of react for adding type checking to components.This mechanism also ensures that the component uses the correct data type and passes the right data in different forms like numbers, strings, arrays, functions, objects, etc.It is also one of the good way to validate the data we get as props by using propTypes.

Example

class MyApp extends React.Component {
render() {
return {
Some value: { this.props.value }
} }}
// Add proptype for "value"
MyApp.propTypes = {
value: PropTypes.number
};

Props vs State

Props

Props are read-only.
Props are immutable.
Props allow you to pass data from one component to other components as an argument.
Props can be accessed by the child component.
Props are used to communicate between components.
Stateless components can have Props.
Props make components reusable.
Props are external and controlled by whatever renders the component.

State

State changes can be asynchronous.
State is mutable.
State holds information about the components.
State cannot be accessed by child components.
States can be used for rendering dynamic changes with the component.
Stateless components cannot have State.
State cannot make components reusable.
The State is internal and controlled by the React Component itself.

JSX

JSX is a Javascript syntax extension which allows us to write html structures code into a javascript code file.It also makes our code simpler so that it can be easily readable.JSX will throw useful errors if HTML is not correct.
Point to be noted if you are using JSX it will be inside curly braces{ }

Example

const element = (
Hello!
Good to see you here.
);

Component Lifecycle

A react component through goes four stages in its lifecycle which are given below:

Mounting=In this phase where a component has been created and inserted into a dom.
Updating=It will be called when a component re-rendered as a result of changes to state or props.
Unmounting=When a component is being removed from dom.
Error handling=It will be called when errors occur during rendering in the lifecycle or in the constructor of the child component.

Hooks

Hooks are useful features of react which allow us to use state and other features of react like lifecycle method ,without writing the class.Basically it will not work inside components.

Example

useState,useEffect are some of the examples of hooks.

You can create your own and can reuse stateful behaviour to other components.

custom hooks

The purpose of a custom hook is that it can call other hooks and allow us to have cleaner functional components so that it prevents code duplication by bringing common use cases .We can create this hook ,share logic and data with other components by reusing it.’use’ keyword should be introduced before it.

Example: useContext

context API

Context API is a system where data passes directly from parent components to child without having to pass data down manually at every level.When a child component requires data, the Provider component sends it to the child component at any level.

Example

import ColorContext from './ColorContext';
function App() {
const color= "white";
return (
logo
Welcome to my web page
);
}

React Application Optimization

We can optimize react js application in different ways:

Using React.memo boost the app as it is a higher order component.
Using keys of each component will help us to avoid re-renders.
Need to pass objects as properties so that no unintentional re-renders will happen.
It would be ideal not to make changes in Dom tree structure.

Important topic of React that you can’t Ignore!

Jahid Iqbal — Wed, 22 Dec 2021 17:42:19 +0000

PropTypes

Example

class MyApp extends React.Component {
render() {
return {

Some value: {this.props.value}

} }}
// Add proptype for "value"
MyApp.propTypes = {
value: PropTypes.number
};

Props vs State

Props

Props are read-only.
Props are immutable.
Props allow you to pass data from one component to other components as an argument.
Props can be accessed by the child component.
Props are used to communicate between components.
Stateless components can have Props.
Props make components reusable.
Props are external and controlled by whatever renders the component.

State

State changes can be asynchronous.
State is mutable.
State holds information about the components.
State cannot be accessed by child components.
States can be used for rendering dynamic changes with the component.
Stateless components cannot have State.
State cannot make components reusable.
The State is internal and controlled by the React Component itself.

JSX

Example

const element = (

Hello!

Good to see you here.

);

Component Lifecycle

A react component through goes four stages in its lifecycle which are given below:

Mounting=In this phase where a component has been created and inserted into a dom.
Updating=It will be called when a component re-rendered as a result of changes to state or props.
Unmounting=When a component is being removed from dom.
Error handling=It will be called when errors occur during rendering in the lifecycle or in the constructor of the child component.

Hooks

Hooks are useful features of react which allow us to use state and other features of react like lifecycle method ,without writing the class.Basically it will not work inside components.

Example

useState,useEffect are some of the examples of hooks.

You can create your own and can reuse stateful behaviour to other components.

custom hooks

Example: useContext

context API

_Example
_
import ColorContext from './ColorContext';
function App() {
const color= "white";
return (

Welcome to my web page

);
}

React Application Optimization

We can optimize react js application in different ways:

Using React.memo boost the app as it is a higher order component.
Using keys of each component will help us to avoid re-renders.
Need to pass objects as properties so that no unintentional re-renders will happen.
It would be ideal not to make changes in Dom tree structure.

Some Important JavaScript concepts you must know!!

Jahid Iqbal — Tue, 21 Dec 2021 17:56:02 +0000

Differences between “==” and “===”

Double equal (==) checks only the value equality and also converts the value into the same type, whereas triple-equal (===) strictly checks value equality and also it does not convert the value into the same type. If a variable's value is same but their type is different then it will return false.

Example:

'1' == 1 => true

1 === '1' => false

Truthy and Falsy values

Truthy values

true
Any number (positive or negative)
Any string including white space , ‘o’ ,’false’
[ ] ,{ }
Anything else that is not falsy will be truthy

Falsy values

false
0
Empty string
undefined,null
NaN

Recursion

Recursive is a function that can call itself.It can solve any problem just by calling itself. As it calls itself , it can become infinity, so to stop it from becoming infinity we need to set a terminator point . When it hits a terminator point, it will be terminated and the recursive function will stop there, which means it will return .

Example:

function countDownFrom(number) {
if (number === 0) {
return;
}
console.log(number);

countDownFrom(number - 1);
}
countDownFrom(5);
// 5
// 4
// 3
// 2
// 1

Scope

In Javascript,the availability or usability of a variable or other resource in our code is defined by its scope.

Block Scope

When a variable is declared inside { } curly brackets or block and cannot be accessed from this block then it is known as Block scope.

Example

var x = 1;
let y = 1;

if (true) {
var x = 2;
let y = 2;}
console.log(x);
// expected output: 2

console.log(y);
// expected output: 1

Global Variable

A variable which has been declared outside the function and can be accessed from anywhere globally then it is known as Global Variable.

Global Scope

Example:

A Scope which refers to all the variables declared in a JS file that aren't even inside any function and also it’s variables can be accessed from anywhere in the file.This type of scope is known as Global scope.

myVar = 1; // An automatic global variable

// An automatic global function
function myFunc() {
return true;
}

Window

This is very useful for browsers when a user wants to go forward,backward,an existing page and another page, then it can easily go with the help of a window object.

Example:

window.open() - open a new window
window.close() - close the current window
window.moveTo() - move the current window

Closure

In closure,an outside function can run the inner function and the inner function can still access variables used by the outer one.
It will be very useful when we will create private variables and functions to hide implementation details in javascript.

Example

function init() {
var name = 'Mozilla'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();

Encapsulation

A mechanism which restricts direct access to some of the object’s component.At the same it also bundles data with methods that can operate on that data.

Example:

var employee = {
name : "Aditya Chaturvedi",
};
alert(employee.name); // Aditya Chaturvedi
employee.name = "Rahul Khanna";
alert(employee.name); // Rahul Khanna

Bind()

Bind() method returns a new function.It also helps us to bind multiple objects to a new function.it’s ‘this’ keyword which allows us to add new parameters in bind().

Example:

const module = {
x: 42,
getX: function() {
return this.x;
}
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

call()

This method calls a function whose first parameter will consider the object as ‘this’ value .
It will also take parameters separately. Comma used for separation.

Example:

function Product(name, price) {
this.name = name;
this.price = price;
}

function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

Apply()

This method calls a function whose first parameter will consider the object as ‘this’ value.It takes parameters as an array.

_Example
_
const person = {
firstName: 'John',
lastName: 'Doe'
}

function greet(greeting, message) {
return ${greeting} ${this.firstName}. ${message};
}

let result = greet.apply(person, ['Hello', 'How are you?']);

console.log(result);

// expected output: Hello John. How are you?

Easy way to understand JavaScript Array Methods

Jahid Iqbal — Mon, 20 Dec 2021 17:46:25 +0000

Concat()

Concat method does not change the main array; instead, it combines multiple arrays and returns a new array.

Example:

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array 1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

every()

every method checks if all the elements of the array fulfil the condition,which is provided by a method passed to it as an argument.It returns a Boolean value(true/false)

Example:

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

filter()

The filter method returns a new array that fulfills a condition given by a function.It doesn’t change the original array.

Example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

find()

The find method returns the value of the first element in the array that fulfills the condition given by a function. If no values satisfy the condition of a function then undefined will be returned.

Example:

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

findIndex()

findIndex() method is very much similar to find(). The difference is that it returns the index(position) of the first element that satisfies the condition.If it didn’t match any condition then it will return -1.

Example:

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3 (130)

forEach()

The forEach() method calls the provided function once for each array element.

Example:

const array1 = ['ami', 'bami', 'cami'];

array1.forEach(element => console.log(element));

// expected output: "'ami"
// expected output: "bami"
// expected output: "cami"

indexOf()

The indexOf() method returns the first index (position) in the array where a given element can be found .
If it doesn't find any value then it will return -1.Another important thing is that indexOf searches(left to right) from the first.

Example:

const beasts = ['mala', 'gala', 'tala', ‘rala', 'bala'];

console.log(beasts.indexOf('gala'));
// expected output: 1

lastIndexOf()

The lastIndexOf() method returns the last index (position) in the array where a given element can be found .If it doesn't find any value then it will return -1.Another important thing is that lastIndexOf searches(right to left.) from the last.

Example:

const beasts = ['mala', 'gala', 'tala', ‘rala', 'bala'];

console.log(beasts.lastIndexOf('bala'));
// expected output: 4

join()

The join method concatenates all of the elements in an array and then returns a new string separated by commas or a specified separator string.If there is only one element in an array then it will be returned without using the separator.

Example:

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

map()

map() method returns a new array by calling a function for every array element.

Example:

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

shift()

shift() method removes an element from the beginning of an array.

Example:

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

Pop()

pop() method removes an element from the end of an array.

Example:
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

Unshift()

The unshift() method add element to the beginning of an array.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

push()

push() method add element to the end of an array.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

Tips to make website responsive !

Jahid Iqbal — Sun, 19 Dec 2021 17:11:49 +0000

A website's responsive design is very crucial. No matter how great your website's user interface is, if it doesn't fit on every screen, from large to small, it will lose its significance.
So there will be a lot of basic things that I will cover in this blog so that you don't have to worry about responsiveness.

Flexbox

When you are struggling with responsiveness. Flexbox solves many difficult problems. Because it has a one-dimensional layout, it works only in one direction. Basically, it works with your web content. Some examples are given below how it works in column and rows in website.

Example:

If you work with flex rows responsive ,then set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.

Meanwhile, if you work with flex column responsive ,screens that are 992px wide or less, the columns will then transform it’s size from four columns to two columns. At the same, The column will be on top of another rather than close to each other in 600px wide or less.

Grid system

Grid will change its layout according to the size of the screen. It will adjust itself to any screen. It is very suitable for large scale layout as it can control two dimensional layout both on rows and columns. Grid layout also help you to write less code than media queries and it is also easier to apply.

You can use display: grid to use grid in your container.

Based on row and column you need to declare grid-template-rows and grid-template-columns in CSS.

You can also give a gap between rows and columns by declaring grid-column-gap and grid-row-gap.

Bonus Tip

100% and Block

To make any div and section responsive in a small screen you can use Width 100% and block. But be careful it is not appropriate in every situation.