DEV Community: Shashank Soni

Null vs Undefined in Javascript

Shashank Soni — Sat, 12 Feb 2022 18:23:23 +0000

Null is an assignment value. It can be assigned to a variable as a representation of no value:

There are two features of null you should understand

null is an empty or non-existent value.
null must be assigned
When you assign null to a variable, you are declaring that this value is explicitly empty.

 let age = null;
 console.log(age); // null

Undefined usually means a variable has been declared, but not defined.

When you try to access a property of an object that doesn't exist you will get undefined in return.

const shashank = {
    name : 'Shashank',  
}

console.log(shashank.age) // undefined

Both nulland undefinedare primitive values in JavaScript.
When you do loose equality check on both it returns true

null == undefined // true

because both are considered falsy values.

Summary

null is an assigned value. It means nothing.
undefined typically means a variable has been declared but not defined yet.
null and undefined are falsy values.
null!== undefined (strict equality) , but null == undefined ( loose equality)

A better way of importing Images (even SVGs) in React Js

Shashank Soni — Sun, 06 Feb 2022 13:16:51 +0000

Importing static images from your assets folder into a React component can become a tedious task if you have to import multiple images, and it also changes your overall component's aesthetics . Let's understand it by looking at an example

and now you want to convert it into a React component
Our traditional approach might be like this

here we are using multiple import statements, suppose if we have more icons , our import statement may increase as well , and it will become messy & visually unpleasant (at least for me),
So I wanted to change this , and found a better way to deal with this situation.
I created a javascript file inside my assets folder, and imported all the images, related to project, into this file.

Here I have created a file called images.js which contains path of images as an object

You have to use .defaultafter require statement for importing SVGs otherwise it will not display the SVG . and for png/jpg/jpeg you can remove .default
and now , to use it, all you have to do is, import this images.js file and use the image using . notation,

Understanding 'this' in Javascript

Shashank Soni — Sun, 06 Feb 2022 11:00:09 +0000

The this keyword is an extremely important concept to understand in Javascript ,and many beginners, like me, find it difficult to understand.

this keyword/variable is a special variable that is created for every execution context(the 'environment' a function executes in).

So what is stored in 'this' keyword ?

In General terms , the this keyword will always take the value of the owner of the function in which the 'this' keyword is used.
or we can say that it points to the owner of the function.

Which means the value of this keyword is not static, it depends on how the function is actually called, and its value is only assigned when the function is actually called.

let's analyze different ways in which function can be called

1. As a Method

means as a function attached to an object.
When we call a method, the this keyword inside that method will simply point to the object in which the method is called. Or in other words, it points to the object that is calling the method.
Ex.

const shashank = {
    name : 'shashank',
    year : 1998,
    findAge: function (){
        console.log(this) // this = shashank object 
        return 2022 - this.year;
    }
}

shashank.findAge(); // 24

here the value of this keyword inside findAge method is shashank object, because shashank object is calling this method.

2. Simple Function Call

means not as a method & not attached to any object.
In this case the this keyword will be undefined (Only in Strict Mode),
if you're not using 'strict mode'( which you should not be doing), the this keyword will simply point to global object - meaning the window object,
(another good reason to use 'strict mode' )

function findUserAge () {
    console.log(this)
}
findUserAge();

the reason for getting undefined in second line is because function findUserAge() is not returning any value,

'use strict'
function findUserAge () {
    console.log(this)
}
findUserAge();

the reason for getting two undefined is because we are using strict mode so this is undefined and in second line its because function findUserAge() is not returning any value,

3. Arrow Function.

Arrow function do not get their own this keyword , if you use this in an arrow function it will simply be the this keyword of the surrounding function ( or parent function)
In technical terms this is called the lexical this keyword because it simply gets picked up from the outer lexical scope of the arrow function.

const shashank = {
    name : 'shashank',
    year : 1998,
    findAge: () => {
        console.log(this) // Window object
        return 2022 - this.year;
    }
}

shashank.findAge(); // NaN ( Not a Number)

4. Function is called as an Event Listener

Then the this keyword will always point to the DOM element , that the handler function is attached to

What is Not the `this` keyword

this does not point to the function itself and also not the variable environment of the function

There are also some other ways to call a function using call apply & bind method, calling the function using these three methods is called explicit binding .

Summary


Method	`this` = Object that is calling the method
Simple Function Call	in strict mode `this` = undefined, otherwise this = window object
Arrow Function	`this` = surrounding of function , also called lexical this
Event Listener	DOM element , where the handler is attached

DEV Community: Shashank Soni

Null vs Undefined in Javascript

Null is an assignment value. It can be assigned to a variable as a representation of no value:

Undefined usually means a variable has been declared, but not defined.

Summary

A better way of importing Images (even SVGs) in React Js

Understanding 'this' in Javascript

1. As a Method

2. Simple Function Call

3. Arrow Function.

4. Function is called as an Event Listener

What is Not the this keyword

Summary

What is Not the `this` keyword