Forem: Srijan

What is the Internet? - Part 1

Srijan — Sat, 10 Sep 2022 11:15:35 +0000

This article was first published on hackinbits.com

The Internet is a global network that is designed to move information. It links billions of devices (desktops, laptops, mobile phones, wristwatches, video game consoles, thermostats, etc.) together all around the world and enables information sharing between them. Let’s see how the Internet works under the hood.

Internet connects devices across the world! So, it must be a very complex system and have a very complex infrastructure! Right? Yes and No. To understand any complex system we hack it into understandable bits. We can follow the same approach to understanding The Internet.

In this article, we will learn about the underlying infrastructure that makes the Internet possible.

Connecting computers

The Internet is all about connecting computers with each other. So, let’s start by connecting two computers. We can easily connect two computers with a cable. But can we do the same thing with eight computers? How about a hundred? How many cables and connections would be required to connect all the computers to each other?

If we try to add more computers to this network, the wires required increase enormously. Also, the length of cable to achieve this become quite long if the computers are far away from each other.

Router

This is where we take the help of a special device called the Router. The Router will make sure that the message sent by a given computer reaches the right destination computer.

Let’s connect all computers to a router. The router will now take care of forwarding the message to the right destination computer in our network. Now, if we visualize the network, it becomes quite manageable as it grows bigger.

Our home network is ready now! Oh, wait, how can I connect this network with my friend's network living in another city? 🤔 Can we make use of already existing infrastructure like the telephone network?

Modem

For connecting our home network to the already existing telephone infrastructure, we can take the help of a special device called the Modem. The Modem transforms your message into a format that can be transmitted and managed over the telephone infrastructure.

Now our message can travel far! Wow, but wait, I need to send it across the world to another country, how can we do that? 🤔 We take the help of an Internet Service Provider(ISP) for this.

ISP

ISPs are organizations that provide services for accessing and using the Internet. ISP manages special routers that connect with other ISPs, thus facilitating information exchange between them. ISPs are further divided into different tiers, we will look into it in a different article.

Our message to a friend in another country would travel from our home network to different ISP networks until it reaches the destination network to our friend’s computer.

Finally, my friend in another country can receive my message. But wait, how are we 100% sure that only my friend’s computer will receive my message and not my aunt’s or some other unknown person connected to the network? We will answer these questions in our next article.

What is React?

Srijan — Tue, 15 Mar 2022 15:15:10 +0000

React is a free and open-source JavaScript library. You can build fast and interactive user interfaces with React. React is maintained by Meta and React community (consisting of individual developers and companies).

React is generally used for building single-page applications, mobile apps, and server-rendered applications. React is very popular with 184k stars on GitHub and is usually the first choice of a developer working on SPA’s these days.

Let’s learn about the features that make React stand out among the front-end libraries.

React is Component-based

Components are isolated pieces of code that represent a piece of user interface like buttons, text box, navigation bar, etc. It is a JavaScript function or class which accepts properties (props) and returns a react element.

React element is a lightweight description of what to render. React takes the description (React element) and displays the result (component).

React is declarative

React follows the declarative paradigm. When we instruct React what to render for each state, it will update the right components when the data changes. It simplifies stuff and makes your code more predictable and easier to debug.

JSX

JSX is a syntax extension to JavaScript. It describes what UI should look like in each state thus helps in writing declarative code. It also shows more useful error and warning messages.

const element = <h1>coding varsity</h1>

Don’t worry about the syntax, we will look into JSX in more detail in another article.

React allows only one-way data flow

React apps consists of a series of nested components. Data is passed in one direction - from the parent to the child component using props.

React allows only the unidirectional flow of data. But what if a child component wants to update something in the interface? We will learn about how to do this in another article.

React is fast

React does not work on the DOM directly. Instead, it creates a virtual DOM in memory and compares it with the original DOM. If there is a difference, react update only the part of DOM which is changed. It does not render the whole web page again.

Summary

React is a free and open-source JavaScript library. You can build fast and interactive user interfaces with React.
React is generally used for building single-page applications, mobile apps, and server-rendered applications.
React is component-based.
You write declarative code when working with React. It makes your code more predictable and easier to debug.
React allows only one-way binding.
React is fast. It only updates part of DOM that is changed instead of rendering the whole page again.

HTML Tags, Attributes and Elements

Srijan — Sat, 21 Aug 2021 15:09:50 +0000

In this article, we will learn about HTML tags, attributes, and elements. If you are just starting with web development and HTML, you should be clear about these terms.

HTML Tags

We have already covered tags in the article: What is HTML - HyperText Markup Language.

Tags give special meaning (semantics) to the text they enclose.

To annotate a text as the most significant heading we can use the <h1> tag and annotate text as a paragraph we can use the <p> tag.

<h1>I am the most significant heading</h1>

<p> I am a paragraph</p>

Opening and closing tags

Tags that need to wrap the content have a closing tag. For example, paragraph <p> and headings <h1> - <h6>.

<p> I am a paragraph </p>

<h2> I am a heading </h2>

Tags that do not wrap the content, for them, the closing tags are not required. They are called self-closing tags. Examples are line break <br/> and horizontal rule <hr/>.

HTML Attributes

Attributes are extra information about the tags. They are always specified in the opening tag. Attributes have a name and value. For example, for the <img> tag we need to specify the source (path of the image) which can be done using the src attribute. Same way for specifying the alternate text we use the alt attribute.

<img src="/media/user/profile-pic.jpg" alt="profile pic"/>

HTML Elements

The opening tag, closing tag, and content together create an HTML Element. For example, a paragraph element can be a simple <p> tag with some content or a nested element with other elements like <a> or <span>.

<p> I am a paragraph<p>

<p> 
  To read this article, visit 
   <a href=”/link-to-article”>coding varsity</a>
</p>

Tags, attributes, and elements are the foundation of any HTML document.

Summary

Tags give special meaning to the text they enclose in a document.
A closing tag is needed if the tag needs to wrap any content. Example of closing tags are <p>, <h1> etc.
Attributes are extra information about tags. For example, the <img> tag has src and alt attributes.
HTML tags along with the content they enclose are called HTML elements.

What is HTML - HyperText Markup Language?

Srijan — Fri, 20 Aug 2021 16:01:44 +0000

HTML stands for Hypertext Markup Language. The browser uses it to structure content on a web page. HTML also describes the basic layout of a web page.

What is HyperText?

HyperTexts are texts that link a page to another page on the same website or another site. By default, links are underlined and have blue text color.

I am a HyperText

HTML is a Markup Language

HTML is not a programming language but a markup language. HTML uses tags as markup to annotate different types of content in a web page. For example, HTML has the <img> tag for an image, and for a paragraph, it has a <p> tag.

<p> I am a paragraph</p>
<img src="/media/codingvarsity-logo.jpg" alt="coding varsity logo" />

HTML Tags

HTML Tags give special meaning (semantics) to the text they enclose.

<h1>
  I am the most significant heading
</h1>

<p>
  I am a paragraph
</p>

<html>
  I contain whole HTML Document 
</html>

All HTML Tags are case insensitive. You can write them as you like <TITLE> or <title> or even <Title>. All versions are correct.

HTML Document

Let’s go through a simple HTML document and learn about few tags that we can use to create a web page.

<!DOCTYPE html>
<html>
  <head>
    <title>I am a title</title>
  </head>
  <body>
    <h1>I am a heading</h1>
    <p>I am a paragraph</p>
    <img src=”/media/codingvarsity.jpg” alt=”codingvarsity logo”/>
  </body>
</html>

`<!DOCTYPE html>`

<!DOCTYPE html> is the required preamble in all HTML documents. Its purpose is to tell the browser to render the document in the latest version of HTML.

`<html>`

<html> tag is the container for all HTML elements and is the root of an HTML document.

`<head>`

<head> tag contains meta-information about the web page. These pieces of information are not displayed on the screen but are used by the browsers and search engines to understand the content of the document.

`<title>`

<title> tag is used to add the title of the document.

`<body>`

<body> tag contains the main content of the document and is displayed in the browser window.

`<h1>`

<h1> tag is used to add the most significant heading in the document. A web page should contain only one <h1> tag.

`<p>`

<p> tag is used to add a paragraph in the document.

`<img>`

<img> tag is used to embed an image in the document.

We will learn about every tag in more detail in another article.

Summary

HTML stands for HyperText Markup Language.
Hypertexts are texts that one web page to another web page.
HTML tags give special meaning to the text they enclose. For example, to create a paragraph we use the <p> tag.
All HTML tags are case insensitive.
<!DOCTYPE html> is required in all HTML documents to instruct the browser to render the document in the latest version of HTML.

Date Object in Javascript

Srijan — Mon, 22 Jun 2020 19:50:15 +0000

This article is first published on hackinbits.com

In this article, we will learn about the Javascript Date Object. Date Object stores the date-time and also provides methods for working with them.

In Javascript, the Date is stored as the number of milliseconds elapsed since 1st January 1970 midnight. This date is also known as UNIX Epoch.

Creating a Date Object

We use the new keyword to create a Date Object. There are several ways to create Javascript dates using the Date Object:

new Date()
new Date(milliseconds)
new Date(date string)
new Date(year, month, date, hours, minutes, seconds, milliseconds)

new Date()

new Date() without any arguments will return the current date-time.

let date = new Date();
console.log(date);
//return current date-time
// format: Thu May 14 2020 00:41:03 GMT+0530 (India Standard Time)

new Date(milliseconds)

new Date(milliseconds) creates a Date object with date-time equal to the total number of milliseconds elapsed since 1st January 1970 UTC+0.

The time elapsed in milliseconds from 1st January 1970 is known as a timestamp.

let unixEpoch = new Date(0);
console.log(unixEpoch);
// Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)

let unixEpochAnd2Days = new Date(2 * 24 * 3600 * 1000);
console.log(unixEpochAnd2Days);
// Sat Jan 03 1970 05:30:00 GMT+0530 (India Standard Time)

To create a Date object with a date earlier than 1st January 1970, we pass negative timestamp to the Date constructor.

let ADayBeforeUnixEpoch = new Date(- 24 * 3600 * 1000);
console.log(ADayBeforeUnixEpoch);
// Wed Dec 31 1969 05:30:00 GMT+0530 (India Standard Time)

new Date(year, month, date, hours, minutes, seconds, milliseconds)

You can create a Date object for a given year, month, and other parameters using Date constructor. The first two parameters are mandatory.

let date = new Date(2019, 00, 30, 01, 01, 01, 0);
console.log(date);
// Wed Jan 30 2019 01:01:01 GMT+0530 (India Standard Time)

let date = new Date(2019, 00)
console.log(date)
// Tue Jan 01 2019 00:00:00 GMT+0530 (India Standard Time)

If you have passed only one parameter, Date object will take it as milliseconds.

Parameters:

year: year must have 4 digits, for example, 2016.
month: In javascript month starts from 0, so January will be 0, February will be 1, and so on.
date: date of the month, if not provided, default is set to 1.
Defaults for all other parameters: hours, minutes, seconds, and milliseconds are taken as 0 if not provided.

new Date(date string)

new Date(date string) creates a Date object from the date string.
We will discuss the date string in detail in the next article.

Exercise

Let's practice what you have learned above.

Create a date object with the date equal to one week hence 1st January 1970.
Create a date object with the date equal to one week before 1st January 1970.

Let us know your answers in the comments. Have a nice day.

Getters and Setters in Javascript

Srijan — Fri, 19 Jun 2020 10:52:15 +0000

This article is first published on hackinbits.com.

In Javascript, getters and setters are used for defining Object Accessors(Computed Properties). Accessor uses a function to get or set the value of an Object. Accessors are useful when some operations are needed to be performed automatically before setting or retrieving an object’s value, like reformating strings, accessing private properties, triggering events, etc.

Getter

To keep it simple, let’s consider a common scenario, where we wanted to get a user’s full name from the below object.

let user = {
  firstName: 'John',
  lastName: 'Doe',
}

We can achieve this by concatenating the firstName and lastName properties of the user object.

let fullName = `${user.firstName} ${user.lastName}`;
console.log(fullName);
// 'John Doe'

The above code works fine, but there is a better way to achieve the same. Let’s look at the example below:

let user = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName () {
 return `${user.firstName} ${user.lastName}`;
  }
}

We defined a getter named fullName in the above object to return the complete name of the user. Now full name can be accessed like any other properties of the object.

console.log(user.fullName)
// 'John Doe'

So, in the above example, we achieved our requirement of concatenating two properties of an object before retrieving the required value i.e. fullName.

Setter

The setter is used to do some required operations before setting the value of an object.

For example, you have an input field for the user’s name. But, the object in which the value needs to be stored is having firstName and lastName.

let user = {
  firstName: 'John',
  lastName: 'Doe'
}

To achieve this, we will use setter.

let user = {
  firstName: 'John',
  lastName: 'Doe',
  set fullName (name) {
    let [fName, lName] = name.split(' ');
    this.firstName= fName; 
    this.lastName = lName;
  }
};

Now to set the value of firstName and lastName, we can simply assign fullName like an object property and our setter function will handle the rest.

user.fullName = 'Peter Parker'

console.log(user.firstName);
//Peter
console.log(user.lastName);
//Parker

In the next article, we will learn how to define setter and getters for already defined objects using Object.defineProperty(). Have a nice day!

Truthy and Falsy Values in Javascript

Srijan — Tue, 16 Jun 2020 09:04:25 +0000

This article was first published on hackinbits.com

When a value is truthy in Javascript, it does not means that the value is equal to true but it means that the value coerces to true when evaluated in a boolean context.

function truthyOrFalsy(value){
  if(value){
    console.log("Truthy Value");
  } else {
    console.log("Falsy Value");
  }
}

The above function evaluates the passed value in a Boolean Context(if condition) and checks if whether the passed value is truthy or falsy.

Falsy Values

Most of the values in javascript are Truthy, so it is better to list the Falsy value where we have only a limited number of cases. There are a total of 8 falsy values in Javascript:

undefined
NaN
null
false
"" (Empty String)
0 (0 is an alias for +0)
-0
0n (BigInt)

We can validate whether the above values are falsy or not by passing them as a parameter to the truthyOrFalsy function we defined at the starting of this article.

truthyOrFalsy(undefined); // Falsy Value 
truthyOrFalsy(NaN);       // Falsy Value
truthyOrFalsy(null)       // Falsy Value
truthyOrFalsy("");        // Falsy Value
truthyOrFalsy(false)      // Falsy Value
truthyOrFalsy(0);         // Falsy Value
truthyOrFalsy(-0);        // Falsy Value
truthyOrFalsy(0n);        // Falsy Value

Truthy Values

Despite we might think that the empty array( [] ) or empty object( {} )should be falsy values, but they are actually truthy values in Javascript.

truthyOrFalsy([]);  // Truthy Value
truthyOrFalsy({});  // Truthy Value

//some more truthy values

truthyOrFalsy(42);          // Truthy Value
truthyOrFalsy(new Date());  // Truthy Value
truthyOrFalsy(“Welcome”);   // Truthy Value

I hope this article helped you learn about truthy and falsy values in javascript. Please share your experience in using these in your codebase which may help everyone get some more clarity of the concept.

Understanding Map in Javascript - Part 1

Srijan — Tue, 16 Jun 2020 07:06:35 +0000

This article was first published on hackinbits.com

What is Map

Map is a collection of key and value pairs, similar to Object. The main difference between a Map and an Object is that Map allows key on any type either primitive or an object.

Let’s learn how to create a Map and do operations on it.

Creating a Map

You can create a Map by using the new keyword

let map = new Map();

This will create an empty Map.

Add a new element to Map

To set a key with the value we use map.set(key, value)

map.set("1", "my key is a string");
map.set(1, "my key is a Number");
map.set(true, "my key is a boolean");

Map allows keys with different datatype rather than converting them to string. So, in above example, "1" and 1 are two distinct keys.

We can also use objects as keys in Map.

let myObj = {name: "John Doe"};
map.set(myObj, "my value");

Access an element in a Map

To get the value, we use map.get(key) method.

//output: "my key is a string"
console.log(map.get("1"));

//output: my key is a Number
console.log(map.get(1));

We should not access Map using object syntax: map[key]. This will make Map behave similar to a javascript object with all the limitations of an object.

Remove a key-value pair in Map

To delete a key-value pair from a Map we use map.delete(key).

map.delete(true)

Remove all key-value pairs from Map

To remove all key-value pairs from Map we use map.clear()

map.clear()

Count number of elements in a Map

To count the number of elements in Map we use map.size

let map = new Map();
map.set(1, "one");
map.set(2, "two");

//output: 2
console.log(map.size)

Check if a key exists in a Map

To check if a key-value pair exists in Map we use map.has(key)

//output: true
map.has (1);

In this article, we learned basic operations that we can perform on Map. In the next article, we will learn how to iterate over Map and convert it to array and object and vice versa.

Understanding Set in Javascript

Srijan — Mon, 15 Jun 2020 15:08:32 +0000

Set is a new Object type introduced in ES6. The Set allows you to create a collection of unique values. Values stored in a set can be of any type - primitive or object.

Set is a collection of unique values.

You can also store NaN and undefined in a Set. Although in javascript, [NaN!==NaN], but a Set will equate it and store only unique values.

Creating a Set

Set is created using the new keyword. You can pass an iterable to the Set constructor and, it will copy the passed elements in the newly created Set.

let set = new Set();
// Set(0) {}

let set = new Set([1,2,1,2]);
// Set(2) {1, 2}

let set = new Set([NaN, undefined, Nan, undefined]);
// Set(2) {NaN, undefined}

Adding an element to a Set

To add a new element to a set, you can use set.add(value) method.
The add method add the passed value to the set and returns the set itself.

let set = new Set([1,2,3,4]);
set.add(5);
console.log(set);
// Set(5) {1, 2, 3, 4, 5}

let newSet = set.add(6);
console.log(newSet);
// Set(6) {1, 2, 3, 4, 5, 6}

Deleting an element from a Set

Set has a method set.delete(value) to delete the value passed to it from the set. It returns true if the set has the value passed to it prior to the call and false otherwise.

let set = new Set([1,2,3,4,5]);
let isDeleted = set.delete(5);

console.log(set);
// Set(4) {1, 2, 3, 4}

console.log(isDeleted);
// true

Checking if a value exists in a Set

To check if a value is present in a Set, we can use set.has(value) method. It returns true if the value is present in the set and false if it does not exist.

let set = new Set([1,2,3,4,5]);
let isPresent = set.has(3);
console.log(isPresent);
// true

Removing all elements from a Set

Set also provides a method set.clear() to delete all elements from the set.

let set = new Set([1,2,3,4,5]);
console.log(set);
// Set(5) {1, 2, 3, 4, 5}


set.clear();
console.log(set);
// Set(0) {}

Get count of elements in a Set

To get the count of element in the Set, we can use set.size property of the Set.

let set = new Set([1,2,3,4,5]);
console.log(set.size);
// 5

Summary

In this article we learned:

Set is a collection of unique values.
We can use the new keyword to create a new Set.
We can add an element to a set using set.add(value).
We can delete an element from a set using set.delete(value).
We can check if a value exists in a set using set.has(value).
We can remove all elements from a set using set.clear().
We can get the count of elements in a set using the set.size property.

This article was first published on hackinbits.com

Introduction to Javascript Symbol Type

Srijan — Sun, 14 Jun 2020 18:42:32 +0000

The symbol is a primitive datatype introduced in ECMAScript 2015. It is different from other data types in Javascript as its value is always unique and kept private for internal use. Symbols are only accessible from its reference after it is created.

Creating a Symbol

A symbol is created by calling Symbol() global factory function.

const mySym = Symbol();

Symbol() takes one optional parameter, which is a description of the symbol itself. Specifying a description while creating Symbols helps identify it during debugging.

const mySym = Symbol('name of person');
//Symbol(name of person)

The new keyword is not supported by Symbol(). The below code will throw a type error.

let sym = new Symbol()

// Uncaught TypeError: Symbol is not a constructor
// at new Symbol (<anonymous>)

Equality

Symbols are unique identifiers and are never equal to each other.

console.log(Symbol() === Symbol())
//false

Symbols are useful for creating object properties as they are always unique, never equal to each other, thus avoiding name clashes.

const LESSON = Symbol()
const subject = {
  [LESSON]: 'Symbols on javascript'
}

subject[LESSON];
// "Symbols on javascript"

The symbol also prevents the overwriting of properties, intentionally or unintentionally as values created by Symbol() method is always unique.

Iterating over Symbol

Symbols are not enumerable i.e. they are not accessible by for...of or for...in methods. They will not be listed.

let obj = {} 
obj[Symbol('one')] = 1
obj[Symbol.for('two')] = 2
obj['three'] = 3
for (let i in obj) { 
console.log(i) 
// three
}

Using typeof operator on Symbol

Using typeof operator you can identify symbols.

let sym = Symbol();
typeof sym;
// 'symbol'

Summary

In this article, we learned:

The symbol is a primitive datatype.
Symbols are always unique.
You can create a symbol by using Symbol() factory function.
Symbols are not enumerable.
You can use typeof operator to identify symbols.

This article is first published on hackinbits.com

What is React JS - Introduction

Srijan — Sat, 13 Jun 2020 08:36:20 +0000

React is a Javascript library used for building fast and interactive user interfaces. It is developed by Facebook in 2011. Today, React is very popular with 144k stars on Github.

React is a Javascript library used for building fast and interactive user interfaces.

React is used to build single-page applications or mobile applications. You can create complex user interfaces using small isolated pieces of code called components.

Components in React

Components are building blocks of a React App. A component represents a piece of User Interface like buttons, textbox, etc. It is a javascript function or class which accepts properties(props) and returns a react element that describes how a section of UI should appear.

A Component is a javascript function or class which accepts properties(props) and returns a react element that describes how a section of UI should appear.

Props and State

There are two types of "modal" data in React:

props and,
state

Props: Props are used to send data to the component, it is equivalent to the arguments of the javascript function. Parent component can pass data to the child component using props.

State: State is a javascript object that is initialized and managed by the component. It is like a data store for the react component.

Virtual DOM

When the state or props of a component change, react renders the component using new data(props and state). However, react does not work on the DOM directly. Instead, it creates a virtual DOM in the memory and compares it with the original DOM. If there is a difference, react updates the real DOM to sync with the virtual DOM.

React updates only the part of DOM which is modified instead of rendering the whole page again.

In the next article, we will discuss some of the core features of React JS.

Additional Resources

Intro To React (reactjs.org)

If you liked this article, please upvote and recommend it. Feel free to ask any questions in the comments below.

This article was first published on hackinbits.com
We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels (twitter, Facebook, LinkedIn).

Comparing values using Object.is() in Javascript

Srijan — Wed, 10 Jun 2020 08:35:43 +0000

In Javascript, using Object.is() you can determine if two values are equal or not. Object.is() helper function is introduced in ES6.

Syntax

Object.is(val1, val2)

Parameters

Values to compare val1 and val2.

Return Value

Object.is() returns a Boolean which indicates if val1 is having the same value as val2 or not.

Value Comparision

val1 and val2 are same in case of Object.is() in case of following conditions:

val1 and val2 are both null

let val1 = null;
let val2 = null;
Object.is(val1, val2)
// true

val1 and val2 are both undefined.

let val1 = undefined;
let val2 = undefined;
Object.is(val1, val2)
// true

val1 and val2 are both NaN

let val1 = NaN;
let val2 = NaN;
Object.is(val1, val2)
// true

val1 and val2 are both of the same Boolean value i.e. true or false.

let val1 = true;
let val2 = true;
Object.is(val1, val2)
// true

let val3 = false;
let val4 = false;
Object.is(val3, val4)
// true

let val5 = true;
let val6 = false;
Object.is(val5, val6)
// false

val1 and val2 are referencing the same object.

let val1 = { name: "Object comparison" };
let val2 = val1;
Object.is(val1, val2)
// true

let val3 = { name: "Object comparison" };
let val4 = { name: "Object comparison" };
Object.is(val3, val4)
// false

val1 and val2 are both non-zero numbers and have the same value.

let val1 = 42;
let val2 = 42;
Object.is(val1, val2)
// true

val1 and val2 are both either +0 or -0.

let val1 = +0;
let val2 = +0;
Object.is(val1, val2)
// true

let val3 = -0;
let val4 = -0;
Object.is(val3, val4)
// true

let val5 = +0;
let val6 = -0;
Object.is(val5, val6)
// false

Note on Object.is(), "==" and "==="

Object.is() works differently than "==" operator as it does not apply coercions before comparing the values.

console.log(1 == [1]);
// true
console.log(1 == "1");
// true

console.log(Object.is(1, [1]));
// false
console.log(Object.is(1, "1"));
// false

Object.is() also works differently than "===" operator as the "===" operator treats +0 and -0 as equals and NaN as not equal to itself.

console.log(+0 === -0);
// true
console.log(Object.is(+0, -0));
// false

console.log(NaN === NaN);
// false
console.log(Object.is(NaN, NaN));
// true

Cover Image: Image by Martin Pyško from Pixabay

This article was first published on hackinbits.com

Forem: Srijan

What is the Internet? - Part 1

Connecting computers

Router

Modem

ISP

See also

What is React?

React is Component-based

React is declarative

JSX

React allows only one-way data flow

React is fast

Summary

HTML Tags, Attributes and Elements

HTML Tags

Opening and closing tags

HTML Attributes

HTML Elements

Summary

What is HTML - HyperText Markup Language?

What is HyperText?

HTML is a Markup Language

HTML Tags

HTML Document

<!DOCTYPE html>

<html>

<head>

<title>

<body>

<h1>

<p>

<img>

Summary

Date Object in Javascript

Creating a Date Object

new Date()

new Date(milliseconds)

new Date(year, month, date, hours, minutes, seconds, milliseconds)

new Date(date string)

Exercise

Getters and Setters in Javascript

Getter

Setter

Truthy and Falsy Values in Javascript

Falsy Values

Truthy Values

Understanding Map in Javascript - Part 1

What is Map

Creating a Map

Add a new element to Map

Access an element in a Map

Remove a key-value pair in Map

Remove all key-value pairs from Map

Count number of elements in a Map

Check if a key exists in a Map

Understanding Set in Javascript

Creating a Set

Adding an element to a Set

Deleting an element from a Set

Checking if a value exists in a Set

Removing all elements from a Set

Get count of elements in a Set

Summary

Introduction to Javascript Symbol Type

Creating a Symbol

Equality

Iterating over Symbol

Using typeof operator on Symbol

Summary

What is React JS - Introduction

Components in React

Props and State

Virtual DOM

Additional Resources

Comparing values using Object.is() in Javascript

Syntax

Parameters

Return Value

Value Comparision

`<!DOCTYPE html>`

`<html>`

`<head>`

`<title>`

`<body>`

`<h1>`

`<p>`

`<img>`