DEV Community: Guru

Scary Keyword In JavaScript

Guru — Wed, 07 Apr 2021 15:36:49 +0000

Yes i call this key word in JavaScript the most scariest keyword because it kept confusing me for long time even though i was already a JavaScript developer, i encountered this key word when i started my journey as a React developer, let us see how we can make it easier to understand.

Impoorrtant : this keyword behaves differently when we use it in function and and object methods.

let us create a simple file called thisKeyWord.js and add the following line of code

console.log(this) // {}

Inside the regular functions

let us create a function and do the following

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

myFunction();

in the console we can see that its an global window object

Inside the object methods

let us add the following code in the file

let person = {
    name : "Guru",
    age : 29,
    gender : "male",
    getDetails() {
            console.log(this);
    }

};

person.getDetails();

in the console we can see that its the object itself

Summary

Inside the regular functions , this keyword is an global object
Inside the object methods its the defined object itself

I have explained in my youtube video also , please like, share and subscribe to my youtube cahnnel if you like my content

Make Your Screen Look Like Hacker In Ubuntu

Guru — Tue, 06 Apr 2021 07:15:06 +0000

while i was searching for fun things we can do in Linux, i found one of the package named cmatrix, which will display a screen like hacker, so to start with we need to install the package by running following command in ubuntu

sudo apt-get install cmatrix

after this just run the following command in your terminal

cmatrix

Thats it, enjoy the screen.

if you want to see the demo , please watch my video on YouTube

I have made a video on Basic linux commands for beginners also if you are interested

Run if key changes but not on first render in react

Guru — Tue, 05 Jan 2021 04:45:33 +0000

As a developer we might get struck at a place where we do not want to run some specific block of code or some function on the first render of the component in react, and we want to run that function only on some key changes only. As we have useEffect where we specify our dependencies to watch for changes some thing like this

useEffect(() => {
    // the call back function or code if the stateVariable changes
}, [stateVariable]);

As we dont want this above code to run on initial render , we can create a custom hook some thing like this

import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;

Usage

To use the above component first we have to import it into the component you want to use

import useDidMountEffect from './path_to_UseDidMountEffect';


useDidMountEffect(() => {
  // react please run me if 'key' changes, but not on initial render
    myFunction()
}, [stateVariable]);

const myFunction = () =>{
   console.log('i am up and running');
}