Essential JavaScript Features

In these stories, we will jump some javascript features. That we must use in our codes.

Client-side storage

Away we know about the static websites and dynamic websites. most website is dynamic they store data into the server and serves data depending on a client request to display data into the client-side. But when we went to some of the data we need to store on the client base like shopping cart, website theme, color,font-size. This time helps us client-side storage. client-side storage work for storing data directly within the browser. Client storage is browser-independent.

  • Local Storage
  • Session Storage

Cookies

In the extremely older version website uses cookies for storing a simple piece of data. cookies have max 4kb capacity. Cookies have basic support in all major browsers. but cookies are sent from the server to the client-side and get back a response.there ways we store pure data within browser and server. Cookies HTML4/HTML5 supporter. also, you can access any browser window in this domain.we can set cookies expires time manually.

// Set Data
document.cookie = "name = Jobayer;";
// Read ALl Data
console.log(document.cookie); //name=Jobayer

Local Storage

Local storage began as a solution to the problems with cookies by offering a more natural and secure API for storing data key-value pairs within the browser. local storage capacity max 10MB.and it accessible form any window. local storage never expires. but a local storage location browser only.it’s never send the request to the server

//Set Data
localStorage.setItem("name", "Jon");
//Get Data
const name = localStorage.getItem("name");
console.log(name) //Jon
//Remove Data
localStorage.removeItem("name");

Session Storage

it is accurately the same as Local Storage, except that the data is only stored for the browser tab session. Once the user closes that browser tab, the data is cleared. Session storage capacity max 5MB.

//Set Data
sessionStorage.setItem("name", "Jon Doe");
//Get Data
const name = sessionStorage.getItem("name");
console.log(name); //Jon Doe
//Remove Data
sessionStorage.removeItem("name");

A Re-introduction to JavaScript

Javascript is a multi-paradigm, dynamic language with types and operators. it has a lot of built-in object methods. Javascript syntax design based on JAVA and C language.it’s supports OOP(object-oriented programming) with object prototypes. and functional programming.

  • String
  • Boolean
  • Symbol
  • Object (Function, Array,Date,RegExp)
  • null
  • undefined

Number

Javascript number Has some method to get results easily in mathematical trams. and JavaScript has only one type of number. Numbers can be written with or outdoors decimals.

const a = 312.2
//With decimals
const b = 234
//without decimals

String

JavaScript strings are used for storing plan data. A JavaScript string is written inside quotes.

const name = "Jon doe";

Booleans

Javascript boolean expresses two values true or false. You can use JS Boolean() function to get an instant return.

Boolean(16 > 7)
// returns true

Object

In javascript, almost everything is an object. you just a new keyword to see that. There are a few methods you can use to minupolure objects.

const country = {
name: "Bangladesh",
born:1971
}

Null

JavaScript null is “nothing”. It is assumed to be something that doesn’t exist. but null is an object data types in Javascript

let movies = {
name: "Thor",
heros: "Cris Hemsworth",
};
movies = null;
console.log(movies);
//null

undefined

Without value a variable in javascript it’s default value undefined.

let name;
console.log(name);
//undefined

Symbol

The symbol is a unique primitive type in ES6. Symbols are applied mainly as property keys, and one of its main characteristics is that they are unique, even if they have the same description. This means they will never have a name clash with any other property key that is a symbol or string.

Comparison Operator

In javascript, all of this operator returns a boolean value true or false. the most basic operator is the equality operator which is two equal signs. The equality operator compares two values and returns true if there equivalent or false if there are not. The compare operator has two ways of comparing the equality of values —

Equality operator

When two values consider equality if they refer to the same object or having the same value. To check equality uses the double equal sign.

const x = 5;
const y = "5"
console.log(x == 5)
//true

Strict Equality operator

When two values consider strictly equal if they refer to the same object or they are the same type and have the same value. In modern javascript, most of the cases use strict equality operator. To check strictly equal two value use ===three equal signs.

const x = 5;
const y = "5"
console.log(x === 5)
//false

Type of Operators

It’s important to be able to find out what type the variable is .it’s not static nearly it’s must be various. So what it types the fee to do this is using an operator called typeOf comes with javascript in order to identify. write typeOf and give it the name of the variable to see what type of it.

typeof("") //string
typeof(10) //number
typeof(true) //boolean
typeof(new Number)//object

Instance Operator

if we want to check object is of a particular class and it can be that using the instance operator and return a boolean value. if the object instance of the class then it returns true or if they don’t instinct of this class it’s return false.

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
class Mobile {
constructor(model, price) {
this.model = model;
this.price = price;
}
}
const p1 = new Person("Jon", 21);
const m1 = new Mobile("J7", 120);
const isValid = p1 instanceof Mobile;
console.log(isValid); //false

Type Casting Operator

Transforming one type of data value to different types is described as typecasting.

//Number to string
const x = 1312;
x.toString() //"1312"
String(123+10) //"133"
//Booleans to string
String(true) //"true"
//Dates to string
String(Date())
Date().toString()
//"Thu Apr 30 2020 13:19:53 GMT+0600 (Bangladesh Standard Time)"
//String to numbers
Number("3.12") //3.12
//Booleans to number
Number(false) //0
Number(true) //1

The Eval

Eval acts several security threats and is all fun considered as an eval function. In Javascript, eVal is basically a function that evaluates a block of string as a javascript command itself. eval executes the code in the local scope instead of the global scope. Instead of eval javascript, JSON parse is safer and more powerful which does not threaten any security threat.

console.log(eval('1 + 1')) // 2
console.log(eval(new String('5 + 5'))) //5+5

The Delete Operator

In javascript, we create different ways of an object with certain properties. and if we re-define properties with the undefined value it’s not removed this property. this property exists. Instead of we can use delete keyword to remove specific property from an object. this actually the right way to remove property from an object.

const person = {
name: "Jobayer Hossain",
age: 18,
};
console.log(person);
//{ name: 'Jobayer Hossain', age: 18 }
delete person.age;
console.log(person);
//{ name: 'Jobayer Hossain' }

setTimeout

The set timeout as the first argument we pass our function or code block and second argument accept milliseconds.it’s runs only once.

function print() {
console.log("Hello");
}
//After 1 second
setTimeout(print, 1000); //Hello
//After 5 second
setTimeout(print, 5000); //Hello

setInterval

The major difference between setTimeout function and setInterval function executes every loop of delay amount of time again and again until it’s canceled.

function print() {
console.log("Hello");
}
//Every 1 second
setInterval(print, 1000); //Hello
//Every 5 second
setInterval(print, 5000); //Hello

The Scopes

When a piece of code is running what variable do I have access to that’s the scope. Javascript has two different types of scopes something calls the global scope and local scope. That's means where we can use variables inside our code.

  • Local scope

Global scope

Global scope is a variable that has been declared in the root of the file and we can use it wherever we went inside the document.

let age = 18;
function getAge() {
return age;
}
console.log(getAge()); //18
console.log(age); //18

Local scope

Local scope is a little bit different within the global scope. inside a function declared a variable returns it inside the same function. the function returns the value perfectly. important things are we can’t access this inside variable from outside the local scope of the function.

function getAge() {
let age = 18;
return age;
}
console.log(getAge());
//18
console.log(age)
// age is not defined

Call Stack

Javascript is a single-threaded programming language that indicates there is only one main stack where all the lines are greeting forced and popped out. When starting a program there is an entry point. After starting a function that is pushed to the call stack.

console.log("Line No 1");
setTimeout(() => {
console.log("Line No 2");
}, 200);
console.log("Line No 3");//Line No 1
//Line No 3
//Line No 2

Extra: Cross-browser testing

Cross-Browser testing is a kind of non-functional experiment that gives you verify whether your website runs as intended when the client reached. It focuses on Different Browsers, Different OS unions, different Devices, assistive tools. Currently, BrowserStack & sauce labs are the several most popularly used platforms to work cross-browser testing.

Cross-Browser Testing is Important?

  • Compare the functionality and UI design across multiple browsers and multiple devices.
  • Cross-browser testing is to present logical expression and experience.
  • Classify the browsers and platforms both by reputation. for users to achieve activities.

What did you interpret in a Test?

  • To ensure basic functionality, dialogs box, forms, button
  • Cookies, touch input in mini devices.
  • fonts, images size, layout,
  • Responsive in a different screen, and orientation.

Front End Developer