Essential JavaScript Features

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

Client-side storage

There are a few methods as we use mostly-

  • Cookies
  • Local Storage
  • Session Storage

Cookies

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

Local Storage

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

Session Storage

//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

Most cases Javascript types are-

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

Number

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

String

const name = "Jon doe";

Booleans

Boolean(16 > 7)
// returns true

Object

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

Null

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

undefined

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

Symbol

ref:mdn

Comparison Operator

Equality operator

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

Strict Equality operator

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

Type of Operators

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

Instance Operator

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

//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

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

The Delete Operator

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

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

setInterval

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

The Scopes

  • Global scope
  • Local scope

Global scope

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

Local scope

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

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 Important?

  • 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?

  • Cookies, touch input in mini devices.
  • fonts, images size, layout,
  • Responsive in a different screen, and orientation.

Front End Developer