DEV Community: Sahiba Kumari

Nullish Coalescing Operator(??)

Sahiba Kumari — Fri, 03 Jun 2022 16:07:36 +0000

Hello everyone so today I'll write about Nullish Coalescing Operator .

Nullish Coalescing Operator is a logical operator that returns the left-hand operand as the result or returns the right-hand side operand when the left-hand side operand is null or undefined.

Syntax:

leftExpression ?? rightExpression

For eg:

const a = null ?? 'hello neogrammer';
console.log(a); // output: hello neogrammer

const b = 'hi' ?? 'hello'
console.log(b); //output: hi

So if you run the above examples you can see that the value of "a" will be "hello neogrammer" as the left-hand operand is null.
While in the second example value of "b" will be "hi"
as the right hand value is now not null or undefined.

Why Nullish Coalescing Operator???

As we know we were having OR operator for this kind of operations but there was as an issue with this operator as being a Boolean logical operator, the left hand operand is forced to a boolean for the evaluation and any falsy values like 0, NaN, "", null, undefined was not returned, and this may cause issues for you if you consider these falsy values as valid values.

For example:

const c = 0;

const result = c || 50 ;
console.log(result); //output: 50

Here, the output will be 50 not 0

To overcome this issue Nullish Coalescing Operator comes into the picture, this operator works well with falsy values unlike OR operand.

For example:

const d = 0;

const res = d || 'hii programmers' //output: hii programmers
const res2 = d ?? 'hii everyone' //output: 0

So, if you run the above example you'll see that we have taken 0 (a falsy value) and the OR operand is not accepting the falsy value and returning the second operand while the Nullish Coalescing Operator works fine with the falsy value and returns 0.

So, in short if you want to work with these kinds of falsy values you can use this amazing operator.

Thank you.
Happy Learning!!!

Temporal Dead Zone

Sahiba Kumari — Fri, 14 Jan 2022 14:53:15 +0000

Hello Everyone, So today I'll talk about the** Temporal dead Zone** in JavaScript.

Temporal Dead Zone(TDZ) is basically refers to the duration between a variable declaration and it's initialization. TDZ occurs when we use const and let for declaring our variables.

Let's look into some of the examples that explains this concept.

This concept of TDZ in JavaScript comes from the concept of hoisting let & const variables.
Like var, let & const are also hoisted but in a different way.

Hoisting example for var:
console.log(a); //undefined no error
var a = 10;

Here in the above examples explains the concept that no matter your variable after declaration is being initialized or not, it will get a value of undefined during execution if you haven't assigned that variable.

Hoisting example for let variables:
console.log(b); 
let b = 20;

Here in the above example you'll get a reference error, this is because a let variable is being allocated memory in separate space [unlike var variable that is being allocated memory in the global object (i.e; the window object)] which we can't access until we assign some value to that variable. That means let variables can't be accessed until assigned some value to it.

Same goes with the const variables also if you try to access them before initialization it will throw a reference error.

So, the basic idea is let and const variables remains in TDZ until it gets some value assigned to it, once the initialization is done TDZ ends for that specific variable.

Tip: To avoid TDZ always try move all your declaration and initialization part to the top of your program so that before the main logic the execution hits the initialization part.

So, that's it for this time. I hope I made the points clear.
Thank you!!!

Happy Reading!!!

var Vs let Vs const

Sahiba Kumari — Fri, 03 Sep 2021 15:29:39 +0000

Hello everyone!!!!!

This time I'll discuss about the difference between the basic three types of variable in JavaScript var , const and let. Basically I'll discuss about the three major difference between them i.e.; their scope, their reassigning and redeclaration and their hoisting.

var

1. Scope : var if used inside a function then it is said to be function scoped or locally scoped variable but if it is used outside any function it is said to be globally scoped variable.

var msgOne="Good morning";

function greet () {
var msgTwo= "Good day";
}

console.log(msgTwo);

So, if you will run the above example you'll get an error msg that the msgTwo is not defined, this is because the msgTwo variable is defined and declared inside a function and is non accessible outside that function greet().

2. Reassigning and Redeclaration : This variable can be reassigned or redeclared within the same scope.

function welcome(){
var message = "hii";
var message = "hello";
 console.log(message);
}
welcome();

In the above example, you can see that if you'll run this piece of code you'll get the message as hello ,this shows that the var variable can be redeclared and reassigned within same scope.

3. Hoisting: var variables are hoisted at the top of their scope before the code execution and also is initialized with a value undefined.

let

1. Scope : let is also a blocked scoped variable that is non accessible outside that block i.e.; the curly brackets {}.

let count = 3 ;

if( count < 5){
let output = "hello";
console.log(output);
}

console.log(output);

So, if you will run the above example you'll get an error msg at line number 8 that output is not defined, this is because the output variable is defined and declared inside a block and is non accessible outside that block.

2. Reassigning and Redeclaration : This variable can be reassigned but cannot be redeclared.

function number(){
let digit = "hii";
digit = "hello";
console.log(digit);
}
number();

function draw(){
let art = "hii";
let art = "hello";
console.log(art);
}
draw();

In the above example, you can see that if you'll run the first piece of code you'll get the digit as hello , this shows that the let variable can be reassigned, but if you'll run the second piece of code
you'll get an error that identifier "art" is also declared , this shows that let cannot be redeclared.

3. Hoisting: let variables are also hoisted at the top of their scope before the code execution but are not initialized with any value like var.

const

1. Scope : const is a blocked scoped variable that is non accessible outside that block i.e.; the curly brackets {}.

const count = 3 ;

if( count < 5){
const output = "hello";
console.log(output);
}

console.log(output);

So, if you will run the above example you'll get an error msg at line number 8 that output is not defined, this is because the output variable is defined and declared inside a block and is non accessible outside that block.

2. Reassigning and Redeclaration : This variable can neither be redeclared nor reassigned.

function welcome(){
const message = "hii";
const message = "hello";
console.log(message);
}
welcome();

function draw(){
const art = "hii";
art = "hello";
console.log(art);
}
draw();

In the above example, you can see that if you'll run this piece of code you'll get the message as the the identifier message has been already declared ,this shows that the const variable cannot be redeclared and if you run the second piece of code you'll get an error that assignment to constant variable error, this shows that it cannot be reassigned as well.

3. Hoisting: const variables are hoisted at the top of their scope before the code execution but are not initialized with any value like var.

Happy Reading!!!