DEV Community: Tilak Khatri

Confused about Virtual DOM (ReactJS)

Tilak Khatri — Sat, 13 May 2023 04:59:00 +0000

First of all let me talk about DOM (Document Object Model)is abstraction of the HTML of web page. We can also say that,In web technology this is programming interface that allow javaScript code to interact with html and css of web page. It represents a whole web page as tree like structure and each element of web page are called nodes.

This is image of DOM structure in Web.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <h1>Welcome to my web page!</h1>
    <p>This is some example text.</p>
    <div>
      <img src="example.jpg" alt="Image">
    </div>
  </body>
</html>

JavaScript code can access and manipulate the DOM tree using the document object, which represents the Document node. For example, to change the text of the h1 element in the example above, you could use the following JavaScript code:

document.getElementByTagName('h1')[0].innerHTML = 'I changed content';

I think you get something :)

Some of disadvantages of DOM.

Performance: manipulating the DOM can be slow and resource-intensive
Security: the DOM can be used to access sensitive information on a web page
Browser compatibility: different browsers can have different implementations of the DOM API
Accessibility: poorly designed web pages that rely on the DOM can be inaccessible for people with disabilities
Maintenance: as web pages grow in complexity, managing and maintaining the DOM can become difficult.

I will continue for Reactjs later...

DBMS with mysql. Without using GUI...

Tilak Khatri — Fri, 30 Dec 2022 03:41:40 +0000

How to do like above. Is it difficult to do? How to start playing with terminal as hacker :) just kidding.

I am so bored when creating database and it's different table with Graphical User Interface (GUI). That's why I will help those who want to dirty their hands with command line.

Here it goes with answer of How to start?

Configure all environments (xampp) / any mysql
type mysql in cmd
type mysql -u user_name -p password
after successfull

mysql>

To list database type the following command

mysql>show databases;

output:

+--------------------+
| Database           |
+--------------------+
| coronadb           |
| ecomm              |
| ecommerce          |
| information        |
| information_schema |
| mysql              |
| performance_schema |
| phpmyadmin         |
| test               |
| test1              |
| testdatabase       |
| user_login         |
+--------------------+
12 rows in set (0.001 sec)

To use these database and to list available tables type the following two commands:

mysql>use user_login;

Now list tables:

mysql[database_name]>show tables;

output

+---------------------------+
| Tables_in_mysql           |
+---------------------------+
| columns_priv              |
| db                        |
| func                      |
| help_category             |
| help_keyword              |
| help_relation             |
| help_topic                |
| host                      |
| proc                      |
| procs_priv                |
| tables_priv               |
| time_zone                 |
| time_zone_leap_second     |
| time_zone_name            |
| time_zone_transition      |
| time_zone_transition_type |
| user                      |
+---------------------------+
17 rows in set (0.00 sec)

These are command line sql for starting in command line instead of GUI.

Read sql docs and start future operation like insert,delete,filter,etc.

I will continue and help you guys to explore more on this topic.
Thanks for reading.
Recommend me any suggestion or how to improve. Or any topic?
Happy hacking.
Sign out for today.

Javascript cheatsheet part-1

Tilak Khatri — Sun, 04 Dec 2022 13:18:37 +0000

These are very important to remember and will help you become a better developer.
Start learning with following concepts.

Array Methods

By https://developer.mozilla.org/en-US/docs/Web/JavaScript/

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

These are most important array operation used during working.

Map

Map allows you to take an array and create a function to change each individual object in a certain array.

Example

let arrayExample = [1,2,3,4];
const newArray = arrayExample.map(x=>x*2);
console.log(newArray);

Filter

Filter allows you to sort through the array and return all objects which follow the set of rules stated into a new array.

Example

let arrayExample = [14,25,33,48];
const newArray = arrayExample.filter(x=>x > 20);
console.log(newArray);

// exapected output: Array [25, 33, 48]

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Reverse

Reverse allows you to rearrange the array from the back to the front.

Example

let arrayExample = [14,25,33,48];
console.log(arrayExample.reverse());

// expected output: Array [48, 33, 25, 14]

Ternary Operator

The ternary operator is sort of like an if statement, however the syntax is different. The ternary operator will check if a statement is true, and if so it will render the first statement. Else it will render the next statement.

Syntax

statement === true ? render this : else render this

Example

const user = false;
user === true ? <h1>Your are welcome </h1> : <h2>Please log in here </h2>

// expected output: Please log in here.

Think of the “?” as an if. If user is true , then render an h1. Else ( think of the “:” as else) render the h2.

Arrow Functions

Arrow functions allow you to remove many elements from the traditional function syntax and really clean up your code to make it less cluttered.

Traditional function
syntax

function function_name(args){
    //code
}

function multiplyItems(x){
    let resutl = x*2;
    return result;
}

Arrow functions allow you to remove the word “function” and the function name. You can also remove the parentheses from the input, however sometimes it is helpful to keep it as it makes reading the code
easier.
syntax

const var = (args) => {
    //code
}

const res = (x) => x*2;

Your comments will appreciates.
For more programming and JavaScript tips be sure to follow. Thank you for reading!
Stay tuned..

Know these fundamental concepts to become JavaScript developer.

Tilak Khatri — Sun, 04 Dec 2022 12:41:40 +0000

JS fundamental part-1

These are the important topics that accelerate JavaScript concept.
Some of the questions with answers for the JS interview.

Why do we call JavaScript a dynamic language?

JavaScript is a dynamic language that means data types of the variables can change during the runtime.

example

var x = 90;
x++;
console.log(typeof (x)); // number
x = "string";
console.log(typeof (x)); // string
... so on.

how does JavaScript determine data types?

JS determines data types depending on the value assigned during run time.

Example

let x = true;
let datatype1 = typeof (x);

let y = "string";
let datatype2 = typeof (y);

let z = 0;
let datatype3 = typeof (z);

console.log("1." + datatype1, "2." + datatype2, "3." + datatype3);

What are different datatypes in JavaScript?

Explain Undefined Data types and null?

Undefined means the variable has been declared but no value is assigned to it.

Example

var x = 100;
var word = "Hello";
// These above are defined with some values
var y;

console.log(x);
console.log(word);
console.log(y);

output:
100
Hello
undefined

Null indicates the intentional absence of data. Null indicates its not ZERO, it's not empty it's just an absence of data.

Example

var x = 100;
var word = "Hello";
// These above are defined with some values
var y = null;

console.log(x);
console.log(word);
console.log(y);

output:
100
Hello
null

Undefined Vs Null

clear with example

var x = 100;
var word = "Hello";
// These above are defined with some values
var y;
var n = null

console.log(x);
console.log(word);
console.log(y);
console.log(n);

output:
100
Hello
undefined -> Here variable has been created but the value is not assigned.
null -> we assign the value Null, which indicates an absence of data.

What is Hoisting?

It’s a mechanism where variable and function declarations are at the top of the scope.

Demo

console.log(y); // before execution: undefined
var y = "Ram";
console.log(y); // after execution: Ram

// for a function
getName(); // fuction declared here
console.log(getName);
function getName() {
    console.log("Curry");
}

var VS let

Demo

var name = "John";
let name1 = "Doe";

Above confusion about function and block scope.

First of all, What is Scope?

Scope

‘scope’ means which variable is accessible and up to which point it is accessible.
Local scope and global scope
- Global scope
  
  In JS whole document is the global scope which contains other functions and variables.
- Local scope
  
  variables declared inside the functions are considered to be of the local scope and it is further divided into function scoped and block scope.
  - Function Scope
    
    When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function.
    
    var is called function scope.
  - Block Scope
    
    A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop. To be concise the variables declared inside the curly braces are called within block scope.
    
    let & const are also called block scope.

function Demo() {

    if (true) {
        var a = "hello";
        let b = 90;
        const c = "world";
        console.log("inside scope");
        console.log(a);
        console.log(b);
        console.log(c);
    }
    console.log("outside scope");
    console.log(a); // function scope
    console.log(b);
    console.log(c);
}
console.log(a); // outside function it is not defined
Demo();

output:
inside scope
hello
90
world
outside scope
hello
d:\Js\frontEnd\jsInterview.js:14
    console.log(c);
                ^

ReferenceError: c is not defined
d:\Js\frontEnd\jsInterview.js:15
    console.log(c);
                ^

ReferenceError: c is not defined

As the output shows when we try to access the variables b and c outside the if statement it gives an error as not defined. same for a variable when trying access outside the function.

What are Closures and why do we need Closures?

Closures are functions inside function and it makes a normal function stateful. closure gives you access to an outer function’s scope from an inner function.

function sum(a) {
  return function (b) {
    return function (c) {
      // outer functions scope
      return function (d) {
        // local scope
        return a + b + c + d ;
      };
    };
  };
}

console.log(sum(1)(2)(3)(4)); // 10

Closures are

Self-contained modules.
Self-contained state.

IIFE (Immediately Invoked Function Expression)

This is nothing but an anonymous function which invoked immediately. This is also called a function without a name.

demo

var x = 0;
(function(){
var y = 30;
console.log("I am anonymous function");
})();
// any variable within iife is local to it.

What is name collision and how can you remove it?

Name collision happens when the same name function names and
variable names are declared.

demo

function hello(a,b){
var sum = 0;
 console.log(sum+a+b);
}
var hello = "hey result is ";
hello();
// error: hello() is not a function

By using the anonymous function we can easily remove it.

(function (a,b){
var sum = 0;
console.log(sum+a+b);
})();
var hello = "hey result is ";

// error: hello() is not a function

What are the various ways to create JavaScript objects?

We can create an object in three different ways:

Using object literal
By creating an instance of an Object directly
By using the constructor function
ES6 class

1. Using object literal

Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces.

Example

const student = {
                name: "xyz",
                faculty:"cse",
                department: function(){
                             console.log("from computer department");
                            }
           }

console.log(student);
console.log(student.name);

2. By creating an instance of an object directly

The Object. create() method creates a new object, using an existing object as the prototype of the newly created object.

Example

const student = {
                name: "xyz",
                faculty:"cse",
                department: function(){
                             console.log("from computer department");
                            }
           }

const s1 = Object.create(student);
console.log(s1);
console.log(s1.name);

3. By using the constructor function

One of the easiest way to instantiate an object in JavaScript. A constructor is nothing but a function and with help of a new keyword, the constructor function allows to create of multiple objects of the same flavor as shown below:

Example

const student = {
                name: "xyz",
                faculty:"cse",
                department: function(){
                             console.log("from computer department");
                            }
           }

const s1 = new student();
console.log(s1);
console.log(s1.department);

//simple function with argument
function vehicle(name,maker,engine){
    this.name = name;
    this.maker = maker;
    this.engine = engine;
}
//new keyword to create an object
let car = new vehicle('GT','BMW','1998cc');
//property accessors
console.log(car.name);
console.log(car.maker);
console.log(car['engine']);

4. ES6 class

ES6 supports class concepts like any other Statically typed or object-oriented language.

Example

class Student {
               constructor(name,age,faculty){
                     this.name = name;
                     this.age = age;
                     this.faculty = faculty;
}
  }

const s1 = new Student("xyz",21,"cse");
console.log(s1);

Remaining Concept you will learn.

OOP Concepts
How can we do inheritance in JavaScript ?
What is prototype in JavaScript ?
Explain Prototype chaining ?
What is Let Keyword?
Are Let variables hoisted ?

Explain Temporal Dead Zone?

Temporal Dead Zone (TDZ) is a state of variables where variables are named in memory, but they are not initialized with any value.

console.log(x); // error can't access 'x' before initialize
// This is TDZ
// This is TDZ
let x = 10; // End of TDZ

Thankyou for reading.
Your comments appreciates me to improve my writing. Hope this helpful. Next part will soon... stay tuned.

Beginner to Master JS.

Tilak Khatri — Fri, 18 Nov 2022 11:32:54 +0000

How to learn JavaScript? Learn from here…

There are so many JavaScript resources available out there, it’s hard to understand how much of it overlaps and how much is redundant. Not to mention the process of weeding out bad information. Most JavaScript learning resources neglect two of the most important topics in JavaScript: prototypal inheritance and functional programming.

There are many possible paths, several good paths, but few great paths.

Here is one clear path to JavaScript mastery:

JS Learning Resources

Everyone is learning different programming languages and want to be good command at them. As I started learning JS for web development and want to be good at this language. It’s hard and there are so many learning resources all over internet. So, which one would follow and how to be good at that makes me confused. As I learned from different resources from them some of great resources that I would like to share are as follows.

Here it goes.

The internet is awash in information. What you probably need is quality, not quantity. Here are some resources that take you from zero to hero. These are structured ways to learn with practice exercise.

Learning Resources

This is a FREE course that covers all the critical aspects of javascript Eloquentjavascript click here
Coding Experts click here
JS for Cats click here
JavaScript Basics click here
JavaScript Info click here
Codecademy (https://www.codecademy.com/learn/intr...)
Fullstack Academy (https://www.fullstackacademy.com/intr...)
Team Tree House (JavaScript Basics Course (How To) | Treehouse (teamtreehouse.com)
JD Documentation(https://developer.mozilla.org/en-US/d...)
khan Academy (https://www.khanacademy.org/)

From above I will highly recommend starting with learn-js(https://learn-js.org) Because It has hands-on exercises.

Starting learning any language by reading and practicing every
topic parallelly is the best way to learn to program.

DEV Community: Tilak Khatri

Confused about Virtual DOM (ReactJS)

DBMS with mysql. Without using GUI...

How to do like above. Is it difficult to do? How to start playing with terminal as *hacker *:) just kidding.

Javascript cheatsheet part-1

Array Methods

Map

Filter

Reverse

Ternary Operator

Arrow Functions

Know these fundamental concepts to become JavaScript developer.

JS fundamental part-1

Why do we call JavaScript a dynamic language?

how does JavaScript determine data types?

What are different datatypes in JavaScript?

Explain Undefined Data types and null?

Undefined Vs Null

What is Hoisting?

var VS let

What are Closures and why do we need Closures?

IIFE (Immediately Invoked Function Expression)

What is name collision and how can you remove it?

What are the various ways to create JavaScript objects?

1. Using object literal

2. By creating an instance of an object directly

3. By using the constructor function

4. ES6 class

Explain Temporal Dead Zone?

Beginner to Master JS.

How to learn JavaScript? Learn from here…

How to do like above. Is it difficult to do? How to start playing with terminal as hacker :) just kidding.