DEV Community: Ram Krishna Jha

JavaScript Object Method and String Method

Ram Krishna Jha — Sun, 12 May 2024 05:42:04 +0000

Here we will discuss about different types of JavaScript Object Method and String Method with explanation and suitable example.

First we will discuss about Object Methods.

How to create an Object In JavaScript object is created in key: "value" pair each key have their own value it can string, number, array, function, other object and any data-type.

const obj = new Object();//empty object
//storing data in object
obj.name = "Dev";
obj.section = "B";
console.log(obj);//{ name: 'Dev', section: 'B' }
console.log(obj.name);//Dev

//Here name is key and Dev is value

//Another way to create a object
const language ={
    name: "JavaScript",
    description: "A Programming Language"
}
console.log(language);//{ name: 'JavaScript', description: 'A Programming Language' }
//We can change the value also
language.name = "Python";
console.log(language);//{ name: 'Python', description: 'A Programming Language' }

Object.keys()

When we pass any object in this method it returns the all keys of that object as an array .

Example: In this example Returns myObject keys in array format in myObjectKeys

let myObject = {
    name: "John",
    age: 30,
    city: "New York",
    profession: "Software Engineer",
    hobbies: ["reading", "coding", "traveling"],
    isMarried: true
};
const myObjectKeys = Object.keys(myObject);

console.log(myObjectKeys);
//[ 'name', 'age', 'city', 'profession', 'hobbies', 'isMarried' ]

Object.values()

When we pass any object in this method it returns the all values of that object as an array .

Example:

let myObject = {
    name: "John",
    age: 30,
    city: "New York",
    profession: "Software Engineer",
    hobbies: ["reading", "coding", "traveling"],
    isMarried: true
};
const myObjectValues = Object.values(myObject);

console.log(myObjectValues);
/*['John', 30, 'New York', 'Software Engineer',
    ['reading', 'coding', 'traveling'], true]*/

Object.entries()

It allows you to extract the enumerable property [key, value] pairs from an object and return them as an array.

Example:

let myObject = {
    name: "Alice",
    age: 25,
    city: "Goa",
    occupation: "Designer"
};

const myObjectPair = Object.entries(myObject);

console.log(myObjectPair);

OUTPUT:
[[ 'name', 'Alice' ], [ 'age', 25 ], [ 'city', 'Goa' ], [ 'occupation', 'Designer' ]]

Object.fromEntries()

It transforms a list of key-value pairs into an object. It takes an iterable (like an array) whose elements are arrays or iterable objects with two elements (key and value) and returns a new object initialized with those key-value pairs.

Example:

const arrayLitral = [
    [ 'name', 'Steve' ],
    [ 'age', 27 ],
    [ 'city', 'New York' ],
    [ 'occupation', 'Developer' ]
  ];

  const myObj = Object.fromEntries(arrayLitral);

  console.log(myObj);

OUTPUT:
{ name: 'Steve', age: 27, city: 'New York', occupation: 'Developer' }

Object.assign()

It used to copy the values of all enumerable own properties from one or more source objects to a target object. It returns the target object after merging the properties of the source objects into it.
Syntax: Object.assign(target, ...sources objects)

Example:

const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };

const mergedObject = Object.assign(target, source1, source2);
// The properties of source1 and source2 are copied into target.
//If a property exists in both target and a source object, the value from the source object overwrites the value in target.
//The mergedObject is the modified target object with properties from all source objects.

console.log(mergedObject);

const randomObject = {
    key1: "value1",
    key2: 42,
    key3: ["a", "b", "c"],
    key4: { nestedKey: "nestedValue" }
};

const cloneRandomObject = Object.assign({}, randomObject);
//it copies the randomObject into a empty object and returns the value

//if we change or add something in original obj it does not changes in cloned object

randomObject.key1 = "randomValue1";
randomObject.key5 = true;

console.log(cloneRandomObject);

OUTPUT:
{ a: 1, b: 3, c: 5, d: 6 }
{key1: 'value1', key2: 42, key3: [ 'a', 'b', 'c' ], key4:{nestedKey: 'nestedValue' }}

Object.freeze() & Object.isFrozen()

frozen prevents to add, remove the new properties in object it's also prevent to modify the current objects elements.
where as isFrozen check the object is freeze or not if that object is frozen it returns true else it will returns false.

Example:

const myObj = {name: "Alex", age: 25};
Object.freeze(myObj);// freeze the myObj

myObj.email = "alex@gmail.com";//adding the value but the object is freeze so value will not added
myObj.name = "Steve";//value not modified it's shows an error in strict mode

console.log(myObj);

console.log(Object.isFrozen(myObj));// it shows true because object is frozen

OUTPUT:
{ name: 'Alex', age: 25 }
true

Object.seal() & Object.isSealed()

This method is used to seal an object. Sealing an object means that it's existing properties cannot be deleted, but their values can be changed it also prevent to add new properties.
isSealed checks the object is sealed or not if the object is sealed it returns the true boolean value if the object is not sealed it returns the false.
Example:

const myObj = {name: "Alex", age: 25};
Object.seal(myObj);// freeze the myObj

myObj.email = "alex@gmail.com";//adding the value but the object is sealed so value will not added
myObj.name = "Steve";//value modified

console.log(myObj);

console.log(Object.isSealed(myObj));// it shows true because object is sealed

OUTPUT:
{ name: 'Steve', age: 25 }
true

Object.isExtensible() & Object.preventExtensions()

This method prevent to add new value in object or isExtensible checked the object is Extensible or not it returns boolean value.

Example:

const myObj = {
    key1: "value1",
    key2: "value2",
    key3: "value3"
}
console.log(Object.isExtensible(myObj));//true
Object.preventExtensions(myObj);

myObj.key4 = "value4";//but property will not added

console.log(Object.isExtensible(myObj));//false
console.log(myObj);

OUTPUT:
true
false
{ key1: 'value1', key2: 'value2', key3: 'value3' }

Object.create()

This method creates a new object with the specified prototype of the new object. The properties of prototype object can be access in new object.
Example:

const protoMethods = {
    square: function(){
       console.log(`Square of ${this.key1} is ${(this.key1)**2}`);
       console.log(`Square of ${this.key2} is ${(this.key2)**2}`);
       console.log(`Square of ${this.key3} is ${(this.key3)**2}`);
    }
}

const numObj = Object.create(protoMethods);//set prototype protoMethods
numObj.key1 = 4;
numObj.key2 = 6;
numObj.key3 = 9;
console.log(numObj.square());//property of prototype (square) is used in numObj

OUTPUT:
Square of 4 is 16
Square of 6 is 36
Square of 9 is 81

Object.hasOwn() & .hasOwnProperty()

Syntax Object.hasOwn(object name, "object key");
objectName.hasOwnproperty("object key");
Both methods returns true if the key present in the object else it will return false.
Example:

let myObject = {
    name: "Alice",
    age: 25,
    city: "Goa",
    occupation: "Designer"
};

console.log(Object.hasOwn(myObject, "name"));//true
console.log(Object.hasOwn(myObject, "address"));//false

console.log(myObject.hasOwnProperty("city"));//true
console.log(myObject.hasOwnProperty("country"));//false

OUTPUT:
true
false
true
false

Object.getOwnPropertyNames()

It returns an array containing the names of all properties that belong to the object itself, not its prototype chain.
Example:

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

  // Create a new object with protoObj as its prototype and define properties directly
  const newObj = Object.create(protoObj, {
    name: {value: "John"},
    age: {value: 35}
  });

newObj.greet();//great is the prototype value
const propertyName = Object.getOwnPropertyNames(newObj);
console.log(propertyName);

OUTPUT:
Hello!
[ 'name', 'age' ]

Object.getOwnPropertyDescriptor()

This static method use to get own property descriptor on a given object.
Example:

const obj = {
  name: "John",
  age: 30
};

const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);

OUTPUT:
{
value: "John",
writable: true,
enumerable: true,
configurable: true
}
Note:
value: The value of the property.
writable: Whether the value of the property can be changed.
enumerable: Whether the property will be returned in certain object iteration methods.
configurable: Whether the property descriptor can be changed and the property can be deleted.

Object.getOwnPropertyDescriptors()

this method returns the object of all object properties descriptors.
Example:

const myObj = {name: "Brohit", class: 11, fav: "cricekt", occupatons: "designer"};

const discriptValue = Object.getOwnPropertyDescriptors(myObj);
console.log(discriptValue);

OUTPUT:
{
name: {
value: 'Brohit',
writable: true,
enumerable: true,
configurable: true
},
class: { value: 11, writable: true, enumerable: true, configurable: true },
fav: {
value: 'cricekt',
writable: true,
enumerable: true,
configurable: true
},
occupatons: {
value: 'designer',
writable: true,
enumerable: true,
configurable: true
}
}

value, writable, enumerable, configurable described in previous example

Object.defineProperty()

Syntax: Object.defineProperty(obj, "prop", {descriptor})
In this method we define the own property for the object element.

Example:

const myObj = {}; 
Object.defineProperty(myObj, 'prop1', { 
    value: 65, 
    writable: false
}); 
myObj.prop1 = 7; //writable value is false so we cannot change the value to 7
console.log(myObj.prop1);

OUTPUT:
65

Object.defineProperties()

Syntax: Object.defineProperties(object, {key1:{discriptor}, key2:{discriptor}, keyn:{discriptor}})
In this method we define the own properties for the object's one or more then one elements.

Example:

const myObj = {}; 

Object.defineProperties(myObj,{
    key1:{
        value:"value1",
        writable: true,
        enumerable: true,
        configurable: true
    },
    key2:{
        value:"value2",
        writable: true,
        enumerable: false,
        configurable: true
    },
    key3:{
        value:"value3",
        writable: false,
        enumerable: true,
        configurable: true
    }
});
myObj.key1 = "Changed Value1"//value changed
myObj.key3 = "Changed Value3";//discriptor writable is false so cannot changed the value

//applying loop in myObj key2 will not display in loop because enumerable is false
for(let key in myObj){
    console.log(myObj[key]);
}

OUTPUT:
Changed Value1
value3

Importent String Methods

String method -

it includes charAt(), concat(), endsWith(), startswith(), includes(), indexOf(), padEnd(), padStart(), repeat(), replace(), replaceAll(), search(), slice(), split(), subString(), toLowerCase(), toUpperCase(), trim(), trimEnd(), trimStart()

We will understand these methods with the help of certain example

charAt(), concat(), endsWith() and startswith()

Example:

const myString = "Hello World";
const spaceString = " ";
const anotherString = "Welcome";

//charAt returns the char at that index
console.log(myString.charAt(4));//o

//concat merge the strings
console.log(anotherString.concat(spaceString,myString));//"Welcome Hello World"

//endsWith
console.log(myString.endsWith("World"));//true
console.log(myString.endsWith("Hello"));//false

//startsWith
console.log(myString.startsWith("Hello"));//true
console.log(myString.startsWith("Random"));//false

includes(), indexOf(), padEnd() and padStart()

Example:

const myString = "Hello World";
const spaceString = " ";
const anotherString = "Welcome";

//includes
console.log(myString.includes("o"));//true
console.log(myString.includes("z"));//false

//indexOf
console.log(anotherString.indexOf("c"));//3
console.log(myString.indexOf("o"));//4

//padEnd
console.log(myString.padEnd(15, "p"));//after Hello World it added p till 15th index. output:Hello Worldpppp
console.log(anotherString.padEnd(12, "Yes"));//WelcomeYesYe

//padStarts
console.log(myString.padStart(17, "Alex"));//AlexAlHello World
console.log(spaceString.padStart(5, "M"));//MMMM

repeat(), replace(), replaceAll() and search()

Example:

const anotherString = "Welcome";

//repeat
console.log(anotherString.repeat(3));//WelcomeWelcomeWelcome

//replace
console.log("Hello World World".replace("World", "Earth"));//Hello Earth World

//replaceAll
console.log("Hello World World".replaceAll("World", "Earth"))//Hello Earth Earth

//search(it returns the first index where the value found in string)
console.log("Hello World Welcome to the hell".search("Welcome"));//12

slice(), split() and subString()

Example:

//slice(start Index, value - 1 index )
console.log("Hello World!".slice(6)); // World! (cut the element from index 6 to last index)
console.log("Hello World!".slice(6, 11)); // World (from 6 to 11 - 1 means 10th index)


//split  it returns the array of split element
console.log("hello,world,hello,world".split(","));
// output - [ 'hello', 'world', 'hello', 'world' ]


//substring
console.log("hello".substring(2)); // llo
console.log("hello".substring(1, 3)); // el

toLowerCase(), toUpperCase(), trim(), trimEnd() and trimStart()

Example:

const myString = "Hello World";

//toUpperCase
console.log(myString.toUpperCase());//"HELLO WORLD"

//toLowerCase
console.log(myString.toLowerCase());//"hello world"

//trim it removes spaces from the string
const spaceString = "    Hello    ";
console.log(spaceString.trim());//"Hello"

//trimEnd
console.log(spaceString.trimEnd());//"    Hello"

//trimStart
console.log(spaceString.trimStart());//"Hello    "

So, we understand the object methods and string methods with the help of examples if you have any doubt or suggestion related to this topic please write down in the comment.
Happy Learning😊

Important Array Method in JavaScript

Ram Krishna Jha — Wed, 01 May 2024 15:26:12 +0000

In this article, we will try to understand various important Array methods (like forEach(), reduce() and so on) with the help of certain examples.

First, we create an array in JavaScript.

let array = [value1, value2, value3, value4];

In this above example we created an array which name is array and we can assign the value in value1,value2 and so on the index of array starts with 0 and end on last array element - 1

forEach() Method

The forEach() method is used to execute a provided function once for each element in an array. It's a convenient way to loop through array elements without the need for traditional for or while loops.

Example: In this example, we will print each element of the array using the forEach() method.

const users = ["Hey", 1,2,4.5,{key1: "value1", key2: "value2"}];

users.forEach((user) => {
    console.log(user);
})

Output:
Hey
1
2
4.5
{ key1: 'value1', key2: 'value2' }

map() Method

This method changes the array elements according to user specific condition and returns the new array.

Example: In this example we get a new array which is square of every num element of previous array.

const userNum = [5,3,4,6,3,1,6];

const squareUserNum = userNum.map((num) =>{
    return num*num;
})
console.log(squareUserNum);

Output:
[25, 9, 16, 36, 9, 1, 36]

filter() Method

In this method if the return condition gets true the value of the array returns as a new array.

Example: In this example filter()Method returns the even number of the array as a new array.

let number = [2,5,8,3,11,23,34,12,68,];
let evenNumber = number.filter((num) =>{
    return num % 2 === 0;
});
console.log(evenNumber);

Output: [2,8,34,12,68]

reduce() Method

The reduce method reduces arrays to a single value and returns a single value. The function takes four arguments: accumlator, current value, current index and array itself.

Example: Here we reduce the array value and returns.

const number = [2,5,3,6,7,4];
const sumOfNumber = number.reduce((accumlator, currentValue) =>{
    return accumlator+currentValue;
});
console.log(sumOfNumber);

Output: 27
reduce Method tracing:

Note: if we set accumlator value 0 the currentValue starts with array 0th index.

sort() Method

sort method changes the current array into ascending or descending order. (In words, first short by capital latter then small latter.)

Example:

const names1 = ["arun", "monu", "Ajit", "Sonu", "Rohit", "Ram"];

//For Ascending Order
names1.sort();//names1 sorted in ascending order
console.log(names1);// [ 'Ajit', 'Ram', 'Rohit', 'Sonu', 'arun', 'monu' ]

//For Descending Order
names1.sort((a,b)=>{
   return a > b ? -1 : 1;
});
console.log(names1);// [ 'monu', 'arun', 'Sonu', 'Rohit', 'Ram', 'Ajit' ]

const num = [2,5,1,34,22,21,95,52];

//For Ascending Order
num.sort((a,b)=>{
    return a-b;
});
console.log(num);// [1,  2,  5, 21, 22, 34, 52, 95]

//For Descending Order
num.sort((a,b) =>{
    return b-a;
});
console.log(num);// [95, 52, 34, 22, 21,  5,  2,  1]

find() Method

it returns the first index value where returns condition gets true.

Example:

const number = [2,5,1,34,22,21,95,52];

const checkedNumber = number.find((num) =>{
    return num>30;//here checked array number greater then 30
})
console.log(checkedNumber);

Output: 34

every() Method

If every array element passes through the condition return true the method itself return the true if any of the condition gets false it returns false.

Example:

const number = [2,5,1,34,22,21,95,52];


const checkNumber = number.every((num) =>{
    return num<100;// it true for every array element so it returns true
})
console.log(checkNumber);// true

const isEven = number.every((num) =>{
    return num % 2 === 0;// it's not true for every array element
})
console.log(isEven);// false

Output:
true
false

some() Method

if any one or more array element passes through the condition returns true the method will return true else it will return false.

Example:

const number = [2,5,1,34,22,21,95,52];


const checkNumber = number.some((num) =>{
    return num<50;// it true for some(95and 52) array element so it returns true
})
console.log(checkNumber);// true

const recheckNumber = number.some((num) =>{
    return num>100;// it's not true for every array element
})
console.log(recheckNumber);// false

Output:
true
false

fill() Method

structure array.fill(value, start index, end index)
it change the current array and assign the value from start index to before end index or it returns the array when we assign a new array.

Example:

const number = [2,5,1,34,22,21,95,52];


number.fill(0, 3, 5);// assigning value 0 to 3rd index to 4th index
console.log(number);// modified array

//assign new array
const numFive = new Array(5).fill(7);//assigning 5 times 7
console.log(numFive);//[7,7,7,7,7]

Output:
[2, 5, 1, 0, 0, 21, 95, 52]
[ 7, 7, 7, 7, 7 ]

splice() Method

Structure array.splice(start index, delete, insert)
it modifies the current array it can insert the new element in array and it can delete elements from the as well. When we delete elements it returns the deleted elements array.

Example:

const number = [2,5,1,34,22,21,95,52];


const deletedNumber = number.splice(1,3,67,20);
//from 1st index 3 element deleted and 67,20 inserted

console.log(number);//[2,67,20,22,21,95,52];
console.log(deletedNumber);//[5,1,34];

Output:
[2,67,20,22,21,95,52]
[5,1,34]

push(), pop(), shift(), unshift() Methods

push() method add variable from last of the array
pop() method removes variable from last of the array
shift() method removes variable from start of the array element
unshift() method add variable from start of the array element

Example:

let fruits = ["apple", "orange"];

fruits.push("mango", "banana");//adding mango and banana in last of the array
console.log(fruits);// ["apple", "orange", "mango", "banana"]

fruits.pop();//removing from last of the array
console.log(fruits);//["apple", "orange", "mango",]

fruits.unshift("guava", "grapes");//adding guava and grapes in starting of array
console.log(fruits);//["guava", "grapes", "apple", "orange", "mango",]

fruits.shift();//removing from start of the array
console.log(fruits);//["grapes", "apple", "orange", "mango",]

Output:
[ 'apple', 'orange', 'mango', 'banana' ] [ 'apple', 'orange', 'mango' ] [ 'guava', 'grapes', 'apple', 'orange', 'mango' ] [ 'grapes', 'apple', 'orange', 'mango' ]

CSS Grid vs Flexbox

Ram Krishna Jha — Mon, 22 Apr 2024 05:53:08 +0000

Grid and flexbox. The basic difference between CSS grid layout and CSS flexbox layout is that flexbox was designed for layout in one dimension either a row or a column, where as CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns.

Key Differences between CSS Grid and flexbox:

Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main{
            display: grid; 
            grid: auto auto / auto auto auto auto; 
            grid-gap: 10px; 
            background-color: green; 
            padding: 10px; 
        }
        .dev { 
            background-color: rgb(255, 255, 255); 
            text-align: center; 
            padding: 25px 0; 
            font-size: 30px; 
        } 
    </style>
</head>
<body>
    <h2 style="text-align: center;">
        Welcome To Dev Community
    </h2>
    <div class="main">
        <div class="dev">Home</div>
        <div class="dev">Read</div>
        <div class="dev">Write</div>
        <div class="dev">About Us</div>
        <div class="dev">Contact Us</div>
        <div class="dev">Privacy Policy</div>
    </div>
</body>
</html>

Here we have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

Output:

When to Use Grid

Building a Responsive Design: Often times, user interfaces are developed to be adaptable to whatever screen they're being displayed on. In such cases, the grid layout is your best bet because it gives room to flexibility and resizing of the element.
Control of whitespace: Unlike the flex display that leaves some white space at the extreme, the CSS grid controls white space by distributing elements equally along the row and also based on the allocated column space.
Consistency in Design Layout: The CSS grid offers a consistent pattern in the structure of a web page. This arrangement of elements makes future editing of the page easier.

Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main{
            display: flex; 
            grid: auto auto / auto auto auto auto; 
            grid-gap: 10px; 
            background-color: green; 
            padding: 10px; 
        }
        .dev { 
            background-color: rgb(255, 255, 255); 
            text-align: center; 
            padding: 25px 0; 
            font-size: 30px; 
        } 
    </style>
</head>
<body>
    <h2 style="text-align: center;">
        Welcome To Dev Community
    </h2>
    <div class="main">
        <div class="dev">Home</div>
        <div class="dev">Read</div>
        <div class="dev">Write</div>
        <div class="dev">About Us</div>
        <div class="dev">Contact Us</div>
        <div class="dev">Privacy Policy</div>
    </div>
</body>
</html>

Here we have to define a container element as a grid with display: flex; It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes.
Output:

When to Use Flex

Building One-dimensional Layouts: For web-pages or sections with a single layout, it is best to use flex as it helps in proper arrangement of the content.
Alignment and Distribution of Content: Thanks to justify-content, align-self and other properties, alignment and distribution of content is made easy using flex.
Displaying Columns in Equal heights: Using the align-items property and setting it to a value of stretch, that is: align-items:stretch, CSS flex ensures that columns within a flexbox are of equal heights.

Uninstall System apps(Bloatware) from Android

Ram Krishna Jha — Wed, 15 Feb 2023 07:56:53 +0000

Android phones from different brands most of the come with some bloatware or unwanted apps that cannot be removed. Don't worry we can uninstall these apps by using the ADB commands. The commands included in the following steps should be universal. So, the method will work on any Android device. You can follow the steps for Samsung Galaxy, Realme, Redmi, Vivo, Oppo, Xiaomi and others.

First You Need to Enable USB Debugging, For enabling USB Debugging and more Follow the steps mentioned below.

1. Enable Developer options on your Android Phone

Go to Settings > About Phone on your phone. Then tap 7 times on "Build Number" to enable Developer Options.

2. Enable USB Debugging

Go to Settings > System Setting > Developer Options. Then enable the switch for "USB Debugging".

3. Download application Package Name Viewer 2.0

Click Here to Download

Now Move on to Your PC

1. Download Minimal ADB and Fastboot setup and Install in Your PC

Click Here to Download

2. Run ADB

Run ADB that will open in Your Command Prompt

3. Connect to PC

Connect to Your PC and Allow for Transfer files/Android Auto and a popup appears on your phone screen Allow USB Debugging? , Click on Allow.

4.Type Commands in Command Prompt

Type- adb devices
This shows your device Id

Type- adb shell

5. Now Delete Apps by their Package Name

Open Package Name Viewer 2.0 app in your phone and search which Unwanted app you want to Delete Click on that App Name That Shows
Package Name,
I want to Delete Chrome so i viewed Chrome Package Name

Now Type in Your Command Prompt for Any Bloatware Application

pm uninstall -k --user 0 package name
I'm Uninstalling Chrome so i write chrome package name which i viewed on phone.

Success message appears on Command Prompt It means I Uninstalled Chrome Browser Successfully.

If this blog is Helpful for you please like and for such more tech related tips and tricks Follow me.
If you have any doubt or suggestions write a comment!
Happy Learning😊

Front-End vs Back-End

Ram Krishna Jha — Tue, 14 Feb 2023 04:35:11 +0000

Front-End and Back-End are two of the most used terms in development world.
So, let's talk about the differences between two terms.

Key Difference Between Front-End and Back-end

Front-End developers focus on user-facing aspect of a web application.
Back-end developers handle the application logic and data management.

What is Front-End Development?

Front-End Development, also known as clint-side development is the development of the graphical user interface of a website there user can interact with them directly. Front end developers work in languages like HTML, CSS, JavaScript.

HTML - HTML stand for Hyper Text Markup Language. it's the standard markup language for creating the structure of webpages.
CSS - CSS stands for Cascading Style Sheets. it is a style sheet language to define the style of web pages in terms of font, colors, background and more.
JavaScript - JavaScript is a scripting language used to make web pages interactive and dynamic. it is an interpreted programming language with object-oriented capabilities.

Front end also works in its own set of frameworks and libraries. Here are just a few of the frameworks and libraries a front end developer would work with:

AngularJS
ReactJS
jQuery
Sass

What is Back-End Development?

Back-end development involves working with applications, databases, and servers to handle the application logic and data management functionality of a web application. These technologies interact with the front-end, often using APIs, to form a full technology stack. Back-end developers work in languages like PHP, Java, Ruby, Python, JavaScript, and Node.js.

Back-End Framework and Database

Express
Django
MySQL
SQL Server
MongoDB