DEV Community: Md Alfaz Hossain

JavaScript Objects Unleashed: A Journey into Properties, Methods, and Prototypes

Md Alfaz Hossain — Mon, 08 Jan 2024 18:24:00 +0000

Hello, enthusiastic developers today I will take a deep dive into the JavaScript object. Let's start.....

First of all, in JavaScript Object is called king. Anyone who can understand object property can understand JavaScript easily.
An object in JavaScript is a collection of key-value sometimes called name-values. Each key-value pair is called a property. A property can be a function, an array, an object itself, or any primitive data type such as an integer, or string.

const player = {
 firstName: "David",
 lastName: "Cameron",
 age:30,
 fullName: function(){
    return this.firstName + "  "+ this.lastName
   }
}

Way of access of object property:
There are two ways of accessing object property

1.Dot notation
2.Square bracket notation

Dot Natation

player.firstName // output is David
player.fullName() //output is David Cameron

Square bracket Notation

player["firstName"] // output is David
player["age"] //output is 30

*Notes: * Another way of accessing objects is

let x= "age"
player[x]

Delete object property:
To delete a property from an object we can use the delete keyword.

delete player.firstName//return true and delete firstName property

Let's see what happens if we try yo call the fullName method which uses both firstName and lastName property of the player object but we have deleted the firstName

console.log(player.fullName()) //output is undefined Cameron

output return undefined in firstName because we trying to access a property of the player object that does not exist.

Object Method:
A function that is used as an object property is the call method.

const player = {
 firstName: "David",
 lastName: "Cameron",
 age:30,
 fullName: function(){
    return this.firstName + "  "+ this.lastName
   }
}

here fullName() is an object method.

To check if an object has a property using the hasOwnProperty method. When the property is available in the object it will return true otherwise return false.

console.log(player.hasOwnProperty('firstName')) //output is true
console.log(player.hasOwnProperty('middleName')) //output is false

To loop through the properties of an object use normally for...in loop.

const player = {
 firstName: "David",
 lastName: "Cameron",
 age:30,
 fullName: function(){
    return this.firstName + "  "+ this.lastName
   }
}


for (let x in player) {
  console.log(player[x])
} 
//output is
David
Cameron
30
[Function: fullName]

A constructor function is a function that is used to create new objects with the same properties and methods.

function player(name,age){
 this.name = name,
 this.age =age
}

let x = new player ('Messi',35)
let y = new player ('Ronaldo',37)

function player(name,age){
 this.name = name,
this.age =age
}

let x = new player ('Messi',35)
let y = new player ('Ronaldo',37)

console.log(x)
console.log(y)

//output is 
player { name: 'Messi', age: 35 }
player { name: 'Ronaldo', age: 37}

Beyond Syntax: Exploring the Depths of JavaScript Functions

Md Alfaz Hossain — Fri, 05 Jan 2024 15:17:14 +0000

Hello, developers today I will dive into the JavaScript functions. Let's start.....

In JavaScript function is one kind of non-primitive data type. The function is also one kind of object in JavaScript because in JavaScript all non-primitive data types are one kind of object.
A JavaScript function is a block of code designed to perform a particular task. When we use the same logic randomly in our code then we often use function for it.

Function
In JavaScript, we can define a function using the keyword function. A function has the function keyword, followed by aq name and a parenthesis.
The code to be excited by the function is placed inside curly braces {}. A JavaScript function is executed when something invokes it or calls it.

function add(num1,num2){
  let num3 = num1+num2;
  console.log(num3) //output is 13
}
add(8,5)//function call

Function return
When JavaScript reaches a return statement the function will stop executing. When a function is invoked or called it will execute after finding the return it will return the value to the caller.
When a function does not return anything it will return undefined implicitly and come out from the function

function myCall(){
console.log("hello Bangladesh")//output is hello Bangladesh
}
let x= myCall();
console.log(x) //output is undefined

Function declaration and function expression
A function declarations means the normal function declaration like

function sleep(){
console.log("I am sleeping")
}
sleep()// output is I am sleeping

But function expression is a bit different. When a function is stored in a variable and called with a variable name is called a function expression

const a = function(){
console.log("Hello Bangladesh")
}
a() // output is Hello Bangladesh

This function is also called an anonymous function.

Function hoisting:
Hoisting is a JavaScript behavior of moving declaration on the top of the current scope. When a function is called before it is declared using the JavaScript hoisting method hosited the function at the top of the function call as a result it does not give any error.

add(8,5)//function call 
function add(num1,num2){
  let num3 = num1+num2;
  console.log(num3) //output is 13
}

But remember function defined using an expression are not hoisted and give an error

add(8,5)//function call 
const add = function(num1,num2){
  let num3 = num1+num2;
  console.log(num3) //give an error
}

Self-invoke functions:

When a function calls itself then it is called self invoke the function
(function(){
console.log("Hello Bangladesh");
})();

Function Parameters:
When parameters are more than arguments we passed then extra parameters will set value undefined.

function add(num1,num2){
  num3 =num1* num2 // here num1 is 8 ,num2 is undefined
  console.log(num3) //output is NaN
}
add(8,5)

Type Mastery: Understanding and Leveraging JavaScript's Data Types

Md Alfaz Hossain — Wed, 03 Jan 2024 04:24:14 +0000

Hello developers today I will describe in depth of data types in JavaScript. Let's start.....

Every Variable has a data type. Data types specify which kind of data has been stored in a variable. In the border concept, JavaScript has two kinds of data types.

1.Primitive Data
2.Non-primitive Data

Now these data types are subdivided into several data types.

Primitive Data Types:

Primitive data types are those data types which value once assigned can not changed. There are several primitive data types...

1.Number
2.String
3.Boolean
4.Undefined
5.Null
6.BigInt
7.Symbol

1. Number
The number is a basic data type in JavaScript that can hold decimals as well as values without decimals.

let x=20;
let x=25.52;

2. String
String data types represent textual data that are enclosed in single or double quotes.

let programmingLanguage = "Python"
let name="mr.x"

3. Boolean
Boolean data types represent logical values. It can store two values either true or false. Boolean is often used in conditional statements and comparisons.

let isRaining =true;
or
let isRaining=true

4. Null
JavaScript null means nothing. The types of null is an object. The null data type is the intentional absence of an object value.So if we want a variable to be empty but not undefined set its value to null without a quotation mark.

let name= null
console.log(name)// output is null

5. Undefined
A variable that was declared without value has the value or type undefined.

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

6. BigInt
BigInt is a new JavaScript data types which is used to store integer values that are too big.

let x = BigInt("123455777854565468987686546534658787")

7. Symbol
Symbol data types have been used to have a unique result every time they are constructed. You can think of symbols as a special kind of token that can guarantee uniqueness.

Non-primitive or Reference Data:
Non-primitive data types is also known as reference data types because it is not directly store the data value rather than store reference to objects in memory. There are three types of non-primitive data types...

1.Array
2.Object
3.Function

1. Array
JavaScript array is written with square brackets. Array items are separated by a comma. Array data types may contain elements of any data type including number, string, object and even another array. Array indexes are zero-based which means the first item is [0].

let programmingLanguage = ["c","c++","python"]
let oddNumbers =  [201,203,205]

2. Object
The object data type is a versatile and powerful data type in javascript.It allows to store collections of key-value pairs.

let person = {
name: "John Doe",
Age:25,
Profession: "Web Developer"
}

3. Function
The function is also considered a data type in JavaScript.The function is reuseable code that can be called, passed as a argument and returned as values.

function developer(name)
{
console.log("hello"+name);
}
developer("John Doe") //output is "hello John Doe"

Data Types Checking
To check the type of any variable just use typeof operator.

let x=16;
console.log(typeof x) //output is number
let name="John Doe";
console.log(typeof name) //output is string

Data Types Conversion
JavaScript allows both implicit and explicit data type conversion.

Implicit Conversion:
Implicit conversion means JavaScript automatically converts the type of data without instruction from the developer. One example is When adding a number and a string JavaScript will treat them as a string.

let x=16+"python"
console.log(x)//output is 16python

Explicit Conversion:
Explicit Conversion means the developer instructs to convert the value of one data type into another data type using a built-in function.

let numberString = "123"
let number = Number(numberString) //Explicitly convert string to number
cosole.log(number) //output is 123

A Comprehensive overview on let,const,var

Md Alfaz Hossain — Mon, 01 Jan 2024 18:28:32 +0000

Hello developers today I will describe the JavaScript variables let,var, const on an easy and comprehensive way. Let's start...

Table of Content

var
let
const
summary

In javascript there are 3 types of varibales.

var
let
const

The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keyeword were added to JavaScript in 2015.

A variable declared without a value will have the value undefined.
let fruit; console.log(fruit)//undefined

Var

Var is a global scope variable in JavaScript.Before ES6 var was vastly used in JavaScript.var is a type of variable that has been used both locally and globally. A variable declared with var always has a global scope and cannot have a block scope. When a var variable is declared it can be changed from anywhere. That creates a problem.

var a= 10;//the value of a is 10 var a=12;//the value of a is 12

Global Scope means a variable that is declared anywhere inside or outside the function and can be accessed from anywhere inside or outside those functions.
Block Scope means a variable that is declared inside a function can only access inside the function and cannot access from outside of the function. In an easy word, a block refers to anything within the curly braces {}.
Before ES6 JavaScript did not have a block scope function JavaScript has global and function scope.

Let
Let is a block scope variable and must be declared before use. As a block scope variable let cannot be accessed from outside of the block scope.

function call(){ let x=12; console.log(x)//the value of x is 12 } call(); console.log(x)//give an error

let is such kind of variable which is not redeclared in the same scope but redeclared in a different scope.

let x =10; let x=2//can not redeclared give an error

Now this situation

let x =10//the value of x is 10 { let x=5//the value of x is 5 }

let is a variable which value can be reassigned in same scope
let x =10 x=12; console.log(x)//output is 12

Const

Const is a block scope varibale.In modern JavaScript, most of the time variable declaration const has been used.A variable defined with const can not be redeclared and reassigned.

const x =10; x=x+10;//this will give an error

Const variables must be assigned a value when they are declared.

const x; x=10;//this will give an error

Always declare a variable with const when you know that the value should not be changed.Use const when you declare:

Array
Object
Function

The keyword const is a little tricky because does not define the constant value rather it is defined constant reference to a value.
For this reason, when we use const cannot

Reassign a constant value
Reassign a constant array
Reassign a constant object

But we can:

Change the element of a constant array
Change the properties of a constant object

const fruit =["mango","Orange","Apple"] const[0]="Watermelon"//you can change an element fruits.push("strawberry"//you can add an element

But can not assign
const fruit =["mango","Orange","Apple"] fruit =["mango","Orange","Apple","Watermelon"]//give an error

Variable hoisting

A variable defined with var is hoisted to the top and can be initialized at any time which means one can use a variable before it is declared;
console.log(fruit)//output is Apple var fruit="Apple";
A variable defined with let and const is also hoisted to the top but not initiated as a result when using a const or let variable before it was declared to give a ReferenceError.
One point noted for const it will already give syntaxError because in const must declare with value without it will give syntaxError before referenceError.
console.log(fruit)//give an error const fruit="Apple";
When to use var, let or const

Always use const if the value should not changed.
Always use const if the type should not changed.
Use let when can not use const.
Use let when the variable needs to be reassigned.
Use var when needs to reassign,redeclare and hoisting.

Variable Lifetime

**Global variables **live until the page is discarded, like when you navigate to another page or close the window.
Local variables have short lives. They are created when the function is invoked and deleted when the function is finished.

Summary
In the end in one word we can say that-
var:global-scoped and can be redeclared, or reassigned.
let:block-scoped and can not be redeclared but can be reassigned.
const:block-scoped and can not be redeclared, or reassigned.