Difference between var, let & const

By using var old way of defining variables. But javascript still maintains this type of syntax so, that old written code can also be executed and run by language because after an update each code updates a crucial thing.

var p_name = "jhon";
console.log(p_name); // will print jhon
p_name = "Rahul";
console.log(p_name); // will print Rahul
var p_name="Ramesh";
console.log(p_name);

In the above code, you can see it different way of defining var. The var is globally scoped so, you can define its top, and can be modified anywhere wherever required let me explain by example.

var username = "Jhon";
var age = 24;
if (age > 23) {
    var usename = "Mosh"; 
}
console.log(usename) // Will print "Mosh"

In the above example, you can see that we have defined a username and in the if statement block is modified and can be accessed outside the block and able to print it. But in the case of let and const this will not happen because both are block scoped so, will able to access within the block the same thing let me explain to you by example.

let username = "Jhon";
let age = 24;
if (age > 23) {
     let usename = "Mosh"; 
}
console.log(usename) // Will print usename is not defined

If we print the username then will throw an error because we again define in if block and it is block-scoped and their scope ends there if we do not again initialize with let in if block then will not throw an error. You can initialize a single time and can modify the value anywhere.

The const works the same as the variable but the main difference is that their value can not be modified within the block or outside the block in this datatype you can add value a single time and will same throughout the execution.

const fullname = "Rakesh Kumar";
console.log(fullname); // Will print Rakesh Kumar
fullname = "Mahesh"; // TypeError: Assignment to constant variable.

Arrow function in JavaScript ES6

It’s the same as a normal function that we create we create as usual like below let’s take an example of the addition of two numbers this function will add two provided numbers and return it.

function add(n1, n2){
	return n1+n2;
}
console.log(add(5,2)); // Will print 7

In JavaScript, an arrow function is a shortcut for writing functions. Compared to a conventional function expression, it is syntactically more compact and has several specific features, particularly with regard to this binding. This can be written by using => (“fat arrow”) syntax same function converts into an arrow function. There is also no difference in calling.

const add = (a, b) => {
  return  a + b;
};
console.log(add(5,2)); // Will print 7

For more convenience, we can also remove “{}” from the function definition. But there is a different calling for single and multiple parameters let see the example for both and single and multiple parameters.

const add = (a, b) => a + b;
console.log(add(5,2)); // Will print 7

const doubler = x => 2 * x;
console.log(doubler(5)); // Will print 10

const say = () => 'Say Hello';
console.log(say()); // Will Say Hello

use case for arrow function:
This implementation in short inline actions, like array operations (map, filter, reduce)

Differences from Regular Functions:

Lexical this Binding: Arrow functions don’t have a context of their own. Rather, they inherit this from the global scope or surrounding function. When you wish to maintain the surrounding scope’s value during callbacks, this is quite helpful.

function counter() {
  this.increment = 0;
  setInterval(() => {
    this.increment++; // 'this' refers to the counter instance
  }, 1000);
}
let c = new counter();
console.log(c.age); // will print 0

In the above example, you can see it will print 0 because of this reference to global scope. If we
console.log(this.increment)
within the setInterval curly braces inside then will print. So, it’s globally scoped and block context.

Cannot be used as Constructors:
The arrow function can not be used as a constructor you can see in the above example like
let c = new counter();
But if we can try with same thing with the arrow function will print the below error.
TypeError: counter is not a constructor

Implicit return:
When creating a single argument function then return the keyword not required by default omitted.
const doubler = x => 2 * x;
In this example, you can see I have not used the return keyword.

Use Cases of arrow function in JavaScript ES6

The best implementation of the arrow function you can see in map, filter, and reduce.

Modules in JavaScript ES6

JavaScript modules were established through the ES6 module syntax, providing a standardized approach for importing and exporting code across different files. This modularity enables programmers to organize their code more effectively and facilitates the sharing of functionality among various components of an application.

To explain the module let’s take an example that already stated that modular means we can write code in different files and use any place so let me create three files.
user.js // contain user information
address.js //will contain details related to address
main.js // it's the final file in which call both above file code

Exporting from a Module

Default Export:

Now I have created first file user.js in which you can see it I have saved the user information in variable user and at the end I have added the line export default user; this code provides the ability to use method, variable, etc in another file. In default export, we can export only the single class, method, and variable in another file by import.

// Filename : user.js 
//---------------------------
const user = {
    username:"Jhon",
    email:"john@gmail.com"
}
export default user;

Named Exports:

Now move to 2nd file address.js in which handles user address-related information. Also will see the syntax for named export. To define named export we have to write export preceding to function, variable or class so that can be exported and used in another place. Help of named export we can export multiple function variables and classes.

// Filename : address.js 
//---------------------------
export let getCity = () =>{
    return "Noida";
}
export let addressId = 25;

Importing from a Module in JavaScript ES6

Note:
For importing modules in html file need to add a type module then the module feature will work and the file call should be from a sever like localhost or any server extensions that are available that can be used like Live server which is compatible with Visual Studio Code if you are using Visual Studio Code.

So, now we add the main file main.js their code explains further. This file will add the main execution and will use the code that is written in the file user.js and address.js. So, In the HTML file need to add a statement like below

<script type="module" src="main.js" ></script>

Named Imports:

you can see below code there is added statement
import {getCity, addressId} address from './address.js';
In which getCity, addressId are the function and variable and ./address.js path of the file in which function and variable are defined.

// Filename : main.js 
//---------------------------
import {getCity, addressId} address  from './address.js'; 
console.log(getCity()); // will print Noida
console.log(addressId); // will print  25

Renaming Imports:

For code readability or any purpose if need to rename the name of a function, variable, or class name then in the module feature you can do it same thing explored by below code.

import {addressId as id}  from './address.js';
console.log(id) //will print 25

Above code, you can see addressId changed as id and print the same.

Import All:

In the module import, you can import all function methods and variables in a single variable an object by using using * as so, that no need to import separately same thing explain by code.

import * as address  from './address.js';
console.log(address.getCity()); // Will print Noida
console.log(address.addressId); // will print id 25

Default import

Now let me show how can import the default exported module more and less it works like importing all but there is no need to write * as .

import user  from './user.js';
console.log(user.username); // will print Jhon

You can also rename in default import.

import u  from './user.js';
console.log(u.username); // will print Jhon

Benefits of Using Modules

• Encapsulation: Modules make code isolated, you can maintain a global namespace more freely by making block-scoped or module-based code.
• Reusability: The same method and variable can be used anywhere there is no need to define and write code again and again.
• Maintainability: Code becomes more organized and readable so that team members or code reviewers can easily understand the code and easy to maintain future.

class & object / oops concept in javascript es6

It is used in approximately all programming languages like PHP, Python, Java, and Javascript. Class-based code has many features like code reusability, readability also helps in memory optimization. It’s a blueprint for creating objects. This feature of javascript es6 is used by many popular frameworks like React, angular, and nextJs. Class code structure definition and calling are the same in all languages only syntax differences are there. Please check the below example for class.

class userDetail{
	// Default constructor
	constructor(n){
		this.name = n;
		this.source = "Default";
	}
	// Individual variable
	user_id = 10;
	// Arrow function
	address = () => {
		return {city:"Noida",state:"UP",country:"India"};
	}
}
let user = new userDetail("Jhon"); // Set default name by constructor
console.log(user.user_id); // Will print 10
console.log(user.name); // will print Jhon
console.log(user.address().city); // Will print Noida

We have defined a constructor which calls when the class is initialized and we can assign variable value. We can do all things in class that we can do in global space like define arrow function and define normal variables.

Class Inheritance in javascript es6

The code that is already defined or written needs to be reused in the context of inheritance. For example in the class userDetail the written method and variable need to be used and write the next code then it’s possible by Inheritance. The code extended by keyword extends then adds the class name like extends userDetail

class cart extends userDetail{

	getProducts(){
		return ["Apple Mobile","Boat Headphone","Mobile Charger"];
	}
}
let user = new cart("Jhon"); // Set default name by constructor
console.log(user.user_id);   // Will print 10
console.log(user.name); // will print Jhon
console.log(user.getProducts()[0]); // will print Apple Mobile

The variable user_id and name is not defined in the class cart but still print name and user_id because the code of existing class userDetail added or Inherited in class cart

Array and object Destructuring in in javascript es6

Assigning values from array or object to a variable or you can say unpack values from an array and assign them to variables.

const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;

console.log(first);  // Output: 'red'
console.log(second); // Output: 'green'
console.log(third);  // Output: 'blue'

In this, if want skip any variable you can do it by skipping assigned variable like below.

const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first);  // Output: 'red'
console.log(second); // Output: 'green'

Object Destructuring

You can assign properties to variables by unpacking them from an object utilizing object destructuring. Unless you provide an alternative name, the variable names must correspond to the property names.

const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, age, city } = person;
console.log(name); // Output: 'Alice'
console.log(age);  // Output: 25

// You can rename variable in object destructuring 

const person = { name: 'Alice', age: 25 };
const { name: personName, age: personAge } = person;
console.log(personName); // Output: 'Alice'
console.log(personAge);  // Output: 25

spread and rest operator in javascript es6

Both operators are represented by three dots ... with the help of these, we can collect the data and spread the next place and also provide flexibility to collect data for function.

Spread Operator

This operator spreads the value of the addition of value to the next variable it works with both array and object. Let’s understand by code.

let carBrand = ["Audi","Ferrai","Hudai"];
let autoBrand = [...carBrand, "Tata", "Nissan"];
console.log(autoBrand); // will print [ 'Audi', 'Ferrai', 'Hudai', 'Tata', 'Nissan' ]

let postAutoBrand = ["Tata", "Nissan", ...carBrand];
console.log(postAutoBrand); // will print [ 'Tata', 'Nissan', 'Audi', 'Ferrai', 'Hudai' ]

In the above code, we have defined three brands in variable carBrand. Now these three values spread in variable autoBrand by using … and with the use of spread, you can add values at the start and end of indexing.

Rest operator

It also works the same as the rest operator spread operator works for copy values but the rest operator works for the collection of multiple values or data.
Use Case :
Suppose a function needs to pass a dynamic parameter like below.

function userList(user1, user2, user3){
    return [user1,user2, user3];
}
console.log(userList("Jhon", "Ram", "Nick")); // [ 'Jhon', 'Ram', 'Nick' ]
console.log(userList("Jhon")); // [ 'Jhon', undefined, undefined ]

You can see that when we did not pass all three parameters in the second call. Then it added undefined on places 2nd and 3rd. So, to fix this issue we have to use the rest operator which collects values in an array format

function userList(...users){
    return users;
}
console.log(userList("Jhon", "Ram", "Nick")); // [ 'Jhon', 'Ram', 'Nick' ]
console.log(userList("Jhon")); //[ 'Jhon' ]

Now you can see there is no undefined error the values which you defined will collect it if not then no undefined.

Destructuring with Rest Operator

const fruits = ['apple', 'banana', 'cherry', 'date'];
const [first, second, ...rest] = fruits;

console.log(first);  // Output: 'apple'
console.log(second); // Output: 'banana'
console.log(rest);   // Output: ['cherry', 'date']

Refrence & premitive type variable assigning

In Primitive type data types (number, string, Symbol, bigint) these are immutable means in this variable the values are directly copied.

let x = 10;
let y = x; // y is now a copy of x's value
y = 20;    // changing y does not affect x

console.log(x); // 10
console.log(y); // 20

The reference type data type (array & object) not directly values are copied during variable assign there is referencing the pointer that is in memory it will more clearer from the below example.

let username = { name:"Rakesh Kumar" }
let username2 = username;
console.log(username);// Will print { name: 'Rakesh Kumar' }
console.log(username2); // Will print { name: 'Rakesh Kumar' }
username2.name="Jhon";
console.log(username);// Will print { name: 'Jhon' } but expected Rakesh Kumar
console.log(username2); // Will print { name: 'Jhon' }

In the above example the variable contains the name “Rakesh Kumar” Before manipulating the variable username2 was print { name: 'Rakesh Kumar' } but after changing the value in username2.name both are print { name: 'Jhon' } but we changed in username2 and username change itself. It happens because both are references to the same location. There is no direct copy of the values.

Now how can we fix this issue so that we can copy the values of one object to another and the original object should be the same or not any modification there? For this, we can use a spread operator.

let username = { name:"Rakesh Kumar" };
let username2 = {...username};
console.log(username);// Will print { name: 'Rakesh Kumar' }
console.log(username2); // Will print { name: 'Rakesh Kumar' }
username2.name="Jhon";
console.log(username);// Will print { name: 'Rakesh Kumar' }
console.log(username2); // Will print { name: 'Jhon' }

Array map and array filter in javascript es6

Array Map:

By giving each element of an existing array a function, the map() method generates a new array. Every element receives a new value from this method, which map() then aggregates into the new array. The original array and its values remain unchanged.

const numbers = [1, 2, 3, 4];
const multiplier = numbers.map(num => num * 2);
console.log(multiplier); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (original values unchanged)

Array filter

The name filter clearly states that the filter() used for filter the values of the array on the certain business logic or conditions. In this also original array and its values are not changed it creates a new array on the condition true.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
console.log(numbers);      // [1, 2, 3, 4, 5] (original array remains unchanged)

Conclusion

The complete post is written in keep min in javascript es6. It is a brief discussion about es6 concepts so that you can understand the latest framework and libraries like react, angular, Vue, and react. These front-end technologies are most popular those days but they all use modern javascript concepts. So, I hope you will enjoy the post and try to start learning new frameworks or libraries. Thanks for reading the article.

The post A Refreshing Dive into JavaScript ES6 Concepts appeared first on Postnidea.

“It is never too late to learn”. You know I am late to this experiment. Because people already implemented that. If you have a little bit knowledge of javascript or jquery you can easily create an app for google chrome web store. Web chrome store provides facility to peoples can upload their extensions & publish it publicly. Due to this chrome user have the chance to taste different types of app recipe. One week an ago I was working on an extension at this time I learned about the chrome extension development same thing I share with you.

File Structure

Before starting anything let me show you the structure of the extension

You can also directly browse my repository by using link https://github.com/rakeshkumar125/postnidea-weather-now

Header Information

Let me first explain the manifest.json file.

You can see the name, version, description is the fields that contain identification information.

Permission field contains the name of the fields for which you extension need permission to modify or access. Right now I have added only a single one storage but you can allow permission to other fields according to your needs. You can get more information using link

Icons are the field which contains the set of images which shows for the chrome extension logo on a different resolution.

“homepage_url” is the field which contains the publisher or developer website URL so that end user can get the information.

“browser_action” field contains the list of resources that will be called when the user performs the action on the browser like click on the chrome extension etc.  In my case, it contains the “default_popup” field in which I have defined the name of the file which is called when the user clicks on the chrome extension logo. “default_icon” field which contains images for different resolutions.

“manifest_version” is the field which contains the version of the manifest file.

Look & Feel or Client side design

Now let me start explanation another important file popup.html

In above you can see that I have added the HTML part of the extension which is shown when user click on the icon then the user will see the popup content. In the head, I have added two scripts files “jquery.min.js” and “popup.js”. The “jquery.min.js” is the library file which supports for the javascript with the help of that I can user jquery in the extension.

After that, you can see the body part you can see I have added the DIV with id “weather-report”. Initially, it has shown with loading image once data fetched from API then it’s loaded with the report.

Implement Extension Logic

Last but not least file “popup.js”. You can see the code is below.

You can see the I first checked that user is connected with the internet or not by using function “navigator.onLine”. If the user is online then start preparing the weather report otherwise it will just show the message for connecting to the internet.

If the user connects with internet then I got the current use latitude and longitude of the user by the API (https://ipv6.ip.nf/me.json) which is free. Once I got the user latitude and longitude then Trigger another API (api.openweathermap.org) for weather report which is also free. After getting weather JSON data then I create HTML using function “getReportHTML”.

Finally, load the report to the popup.

You can also check out above explanation using video.

You can also enjoy live demo by clicking on below URL

https://chrome.google.com/webstore/detail/postnidea-weather-now/jiapbdoeogpgpeggldgdhcdalhdchgae

If you have any query or suggestions you can share by comment.

The post Start develop chrome extension using javascript in 10 minutes appeared first on Postnidea.

In WordPress already so many hooks & filter available with the help of that you can customize the wordpress according to our needs. But there are some customizations that are required more tricky solutions. For handling ajax request WordPress already define our rules & standards but sometimes there is a need to performing ajax request on the default page saving. For the javascript WordPress uses js enqueue
function with the help of you can attach javascript files & functions. For creating ajax request action WordPress uses two below functions

When you calling the actions publically the use the below functions. There is no need requirement of the login.
admin_post_nopriv_{action_name}
If you want action to execute only when the user login.
admin_post_{action_name}

If you want to call an action on login or without login then use both functions. Now I show you how to call the action in our Ajax request.
http://your_host/admin-ajax.php
On above URL you can pass the action: name using a post or get request then execution of the action occurs. But some problem comes due to customization then there is a need a tricky solution. You can see the below problem.

Problem:

We need to add some extra fields (custom fields) on WordPress backend page. When a user clicks on “publish” button then we call the API & values fill with the response from the API then we submit WordPress page form. We implemented all but page always goes to Draft.

Solution:
In a below code post status select box I have check if there is user select “Draft” I set the draft otherwise we put the status the publish so that we have to fix that problem. The above-explained things done by function “check_status”.

$("#publish:button").click(function(){
	$.get("url").done(function(data){
		if(check_status()){} else{
		$("#acf-field-region").after("");
		}

		$(document).find("#publish").prop("type", "submit");
		setTimeout(function(){

		$("#post").submit();

		},100);

		return false;
	})
	event.preventDefault();
});

function check_status(){
	var status=0;
	jQuery("#post_status option").each(function(){
		if(jQuery(this).val()=="publish"){
			status=1;
		}
	});
	return status;
}

The post wordpress posts validation using ajax in backend appeared first on Postnidea.

Nowadays jquery or Javascript is more prominent. Every client wants their application to become faster & user interactive so they good user experience, get more customer. Whenever you complete our functionality with ajax request that makes attractiveness because user stays on the same page he sees there task also complete only dom element manipulation occurring. So I figure one common functionality required everywhere which form validation. Without form validation, you can not be complete our functionality of our requirement.

A few days ago I was written a PHP class that deal with validation you can review by click on that link Click. So in this validation, i write methods of different validation like blank, number, email, validation of field from database like a username. When you review code Click you will find there is no ajax no form code only a PHP class which shows validation. So require a javascript class that can use for process our request.

Implementation of jquery form validation using php with mysql database

Now we start to create a javascript class for processing form. For my javascript code, i have dependency with bootstrap which common CSS framework, with the usage of that framework you can complete our application with responsive design without any help of a designer.
I write a small chunk of code a form which is below.

In above code, form tag has two selectors like id, action both are required for the form processing. Action are required on which you form being processed. ID is required for pick values suppose if multiple forms then it will more helpful. Another is “Submit” button with their click event we fire a request & process it. After processing it will return JSON format response on the basis of that we can manipulate the DOM elements. So we require a function when we click on the submit button it will perform required function. Now below I write a code.

In above code “server_validation” its function for which need to pass the certain parameter on the basis of that it perform form processing. The parameter explanation is below

form_id:’add_form’ // its the Id of form
button_id:’add_button’, // its the Id button
after_success:load_success // its the name of function that call after success of form.

With the help of above code you can just validate form but if you want any callback function then call below function

In the above code, every thing is same only I added the “after_success” variable in which I pass the name of the function that needs to call after the success of form.

Demo code

The post jquery form validation using php with mysql database appeared first on Postnidea.