Basic JavaScript
Truthy and Falsy:
If throw a single value or variable into an if condition without a comparison operator then javascript look into the variable or value and if it is not true or false already, then javascript convert it to true and false when encountered in a boolean context.
0 / “” (empty string) / null / undefined / NaN → false
Any number (incuding Negative) / Non empty string / all types of array and objects → true
Null vs Undefined:
Undefined means a variable has been declared but has not yet been assigned a value.
const name;
console.log(name) // undefined
null is an assignment value. It can be assigned to a variable as a representation of no value.
const count = null;
console.log(count); // null
console.log(typeOf count); // object
undefined is a type itself where a null is an object.
Different ways to get undefined
- Uninitialized variable: variable without assigning a value is undefined.
- accessing a non-existing property.
const person = {
name: “sazzad”,
}
console.log(person.age); // undefined
3. The function parameter implicitly default to undefined.
4. Javascript function returns undefined without a return statement.
== & ===
“==” used to the comparison between two values without checking their type.
if(0 == “0”){
// print true
}
“===” used to the comparison between two values with checking their type.
if(0 === “0”){
// print false
}
Scope:
Scope in javascript refers to the current context of the code, which determines the accessibility of the variable to JavaScript. There are two types of scope.
- global: outside of a block.
- local: inside of a block.
Block Scope:
The area between {curly brackets} is known as a scope.
Closure:
The closure is created every time when a function is created. Closure gives you access to an outer functions scope from an inner function.
function person(){
const name = “John”;
function personName(){
console.log(name);
}
}
Private Variable:
variable that cannot be accessible from the outside of a class is known as a private variable.
class PrivateVariable{
#name = “John”; // not accessible from outside of a class;
}
This Keyword:
This is a property of an execution context and is always a reference to an object. In which context function or methods are called that defined its execution context.
Example: it returns the whole function as an object.
const myObj = {
name: “Mr. John”,
getFullName: function () {
console.log(this);
return this.name;
}
}
console.log(myObj.getFullName());
Example 2: Its context is always run according to the left side of the dot(.)
const myObj = {
name: “Mr. John”,
getFullName: function () {
console.log(this);
return this.name;
}
}
const myObj2 = {
name: “Bill Gates”,
}
myObj2.getFullName = myObj.getFullName;
console.log(myObj2.getFullName())
Example 3: If there is no dot(.), it is run according to window context.
function add(a, b) {
console.log(this);
return a + b;
}
console.log(add())
setTimeOut:
The setTimeOut function calls a function or evaluates an expression after a specified number of milliseconds.
setTimeout(()=> {
console.log(“I called after 2 seconds”)
},2000);
setInterval
setInterval executes function continuously after a certain millisecond of time.
setInterval(() => {
console.log(“I called continiusly after 3 seconds”)
}, 3000);
The Call Stack:
The call stack is a Lifo queue (Last in First Out).
The event loop continuously checks the call stack to see if there’s any function that needs to run. if it finds any function call in the stack then executes it in orders.
Difference between bind, call, apply:
if we want to use one method to another object then we need to use bind, call and apply
* in a bind we need to pass the object name as an argument,
* Un call we need to pass the object name and all argument by comma separation
* in apply we need to pass the object name as a first argument and 2nd argument is an array of method arguments
Bind:
const vehicle = {
name: “Car”,
brand: “Jaguar”,
price: 1500000,
getFullName: function () {
console.log(`name: ${name}, brand: ${brand}`)
},
netAmount: function (discount) {
this.price = this.price — discount;
console.log(this.price);
}
}
const zip = {
name: “zip”,
brand: “Marcedis”,
price: 9900000000,
}
const netAmountZip = vehicle.netAmount.bind(zip);
netAmountZip(50000);
Call:
const vehicle = {
name: “Car”,
brand: “Jaguar”,
price: 1500000,
getFullName: function () {
console.log(`name: ${name}, brand: ${brand}`)
},
netAmount: function (discount, tax) {
this.price = this.price — discount + tax;
console.log(this.price);
}
}
const zip = {
name: “zip”,
brand: “Marcedis”,
price: 9900000000,
}
vehicle.netAmount.call(zip, 20000000, 10000);
zip.netAmount;
Apply:
const vehicle = {
name: “Car”,
brand: “Jaguar”,
price: 1500000,
getFullName: function () {
console.log(`name: ${name}, brand: ${brand}`)
},
netAmount: function (discount, tax) {
this.price = this.price — discount + tax;
console.log(this.price);
}
}
const zip = {
name: “zip”,
brand: “Marcedis”,
price: 9900000000,
}
vehicle.netAmount.apply(zip, [300000000, 100000]);
zip.netAmount;
Event bubble:
when clicked an element, it checked if there is an event in the child element or not (capture phase), when it reached the last element in the child then execute the event first, then goes to the parents after one another and executes them (Bubble Phase). this is known as an event bubble.
Event delegation:
We need to handle a lot of events in a similar way, instead of assigning a handler to each of them we put a single handler on their ancestor. Then we can able to access each of the items using event.target. It is used to where the event actually happened and handle it.
Javascript Features:
- Light Weight Scripting language
- Dynamic Typing
- Object-oriented programming support
- Functional Style
- Platform Independent
- Prototype-based
- Interpreted Language
- Async Processing
- Client-Side Validation
- More control in the browser