DEV Community: Aravindan07

Introduction to Javascript Universe part - 2

Aravindan07 — Sat, 12 Dec 2020 18:04:15 +0000

Recap of the last post

In the first part of the series, we saw about values and variables in JS.

Points to be remembered,

There are a total of 9 types of values in JS, categorized into
primitive values, and objects & functions.
Primitive values contain Undefined, Null, Numbers, Strings,
BigInts and Symbol.
Apart from the above types everything else is objects. e.g.,
Arrays, Date, regular expressions come under objects.
Primitive values are immutable (cannot be modified).
Objects and functions are mutable (can be changed).
A variable must represent a value it can hold any value from
the above types.

In this post, we are gonna concentrate on objects.

Introduction to Objects

Arrays, Dates, regular expressions, and other non-primitive values come under objects.

console.log(typeof({})); // "object"
console.log(typeof([])); // "object"
console.log(typeof(new Date())); // "object"
console.log(typeof(Math)); // "object"

We know that objects are non-primitive values which means that by default objects are mutable.

To create an object we need to use the { } object literal, which creates a brand new object value.

let newObj = {};
let anotherObj = {};
console.log(typeof(newObj),typeof(anotherObj)); // object object

In the above code, newObj and anotherObj are objects.

A diagrammatic representation of the above two variables will look like the below diagram.

From the above diagram, we can conclude that each of the two variables will have a brand new object value.

Properties in objects

An object contains properties that are basically key-value pairs.

let objectWithProperty = {
propertyOne: "This is property one",
propertyTwo: "This is property two"
}

propertyOne and propertyTwo are called keys. "This is property one" and "This is property two" are called values. A value can be of any type in this example I have a value in the string type but you can store literally any type of value in the values field.

To access the properties of an object we use either dot(.) notation or bracket ([ ]) notation.

let objectWithProperties = {
  propertyOne: "This is property one",
  propertyTwo: "This is property two"
}
console.log(objectWithProperties.propertyOne); // "This is property one" using dot notation
console.log(objectWithProperties[propertyTwo]); // "This is property two" using bracket notation

A diagrammatic illustration of the above code looks like this,

Properties have names. A single object can’t have two properties with the same name.
For example, let's say we have a property called name in an object. We can't declare another property with the same property name 'name' in the same object.

If we try to do it, then Javascript will take the last key-value pair and neglects the previous key-value pairs of the same names.

let person = {
  name: "Anne",
  age: 32,
  name: "Hathway"
}
console.log(person); // {age: 32, name: "Hathway"} 1st name property is neglected
console.log(person.name); // "Hathway" not "Anne"

In the above code snippet, the first name property is neglected and the last name property is taken.

The property names are always case-sensitive in Javascript. For example, name and Name would be two completely different properties from JavaScript’s point of view.

If we don’t know a property name ahead of time but we have it in code as a string value, we can use the [] “bracket notation” to read it from an object.

What about missing properties?

If we try to access the properties which are not defined in an object it will not throw an error instead it will return undefined as a value.
Example:

let person = {
  name: "Anne Hathway"
};
console.log(person.age); // undefined

Javascript follows certain steps while dealing with objects. They are:

Figure out the value of the part before the dot (.).
If that value is null or undefined, throw an error immediately.
Check whether a property with that name exists in our object.
If it exists, answer with the value this property points to.
If it doesn’t exist, answer with the undefined value.

Now consider the below code snippet,

let person = {
 name: "Anne Hathway",
};
console.log(person.address.city); // ?

What will be the output of the above code snippet?

If you thought that the answer would be an error, you are right.

But, How? Read rules 1 and 2, if the left side of the dot operator is null or undefined it will throw an error.

I hope I had given enough details about objects in Javascript Universe.

If you want to know more about objects read the MDN docs.

If you like the content connect with me on Linkedin.

See you all in my next post. Have a good day!

Introduction to Javascript universe

Aravindan07 — Fri, 11 Dec 2020 09:23:16 +0000

Introduction to Javascript

JavaScript is a lightweight, interpreted, object-oriented language and is best known as the scripting language for Web pages. Apart from this Javascript can also be used in non-browser environments. Thanks to NodeJs.
If you don't understand the above definitions bear with me till the end you'll understand everything.
In this post, we are going to concentrate only on the two most important and fundamental concepts - variables and values.

Values

In Javascript, not only numbers are values but also a few other things like objects and functions. Wait, what?! Did you just say objects and functions are values?

Yep! Objects and functions also hold some value in Javascript.

Types of values

After years of research by Javascript enthusiasts and computer engineers, they have found only 9 types of values in Javascript everything other than these 9 types is Objects.

What are those 9 types?

These 9 types of values are classified into two types, Primitive data values, Objects & functions.

Primitive Values

Undefined (undefined) - used for unintentionally missing values.
Null (null) - used for intentionally missing values.
Booleans (true and false) - used for logical operations.
Numbers (10,-20,etc) - used for math calculations.
Strings ("xyz","Hello world",etc) - used for text inputs.
Symbols - used to hide implementation details.
BigInts - used for math on big numbers.

Objects and Functions

Objects ( {} )
Functions ( () )

Apart from these everything else is an object. E.g Arrays, Date, Regular expressions are all Objects.

Consider the below examples

console.log(typeof([]));
console.log(typeof(new Date()));
console.log(typeof(/Hello World/));

Try it in your console and I am sure that you will get an object as a result.

I hope you are clear now. But also remember that primitive values are not objects everything other than that is objects.

Expressions

Expressions are questions that JavaScript can answer. JavaScript answers expressions with values not with any other types like objects and functions.

console.log(2+2); // 4 which is a value

This is enough about expressions now But surely there are a lot more things to do with expressions.

Primitive values are immutable

Wait, what?! Yeah, you read it correctly we cannot change the value of primitive values.

Consider the code snippet below

let test = "Test";
test[0] = "R";
console.log(test);

What will be the output of your program?

If you are in a strict mode this might throw an error otherwise the output will be Test.

Look at the error when we use "use strict",it says cannot modify read-only property of string.

I have taken the example of a string here, you can take any primitive values and try to modify them, it will either throw an error or it returns an unmodified value depends upon whether you are in strict mode or not.

Takeaway: Primitive values are immutable(cannot be changed).

Now consider the code snippet below

let numberTen = 10;
numberTen = "Ten";
console.log(numberTen); //what will be the output?

If you guessed the output as 10 or error you are wrong. The output will be Ten.

Now a question might arise in your mind, that primitive values are immutable but why the above line changed the values.

To answer that question look at the above code snippet once again.
We never changed the value of 10 we only changed the value of variable numberTen.

Takeaway: Variables are not values. variables point to values and thus we can control where we need to point the variable.

The above GIF explains what happens under the hood.

Now let's see the types of values one by one. We will start with the Undefined.

Undefined

There is only one value in type Undefined which is undefined.

console.log(typeof(undefined)); // "undefined"

It’s called undefined so you might think it’s not there — but it is a value and a very real one!

In JavaScript, it represents the concept of an unintentionally missing value.

We can assign a variable undefined like how we assign other values like 10, "Hello" to the variable.

undefined commonly occurs in a scenario like where we defined a variable but didn't get assigned to any value.

var getUndefined;
console.log(getUndefined); // "undefined"

Also, you cannot read a property from undefined as you do it in objects, strings, and arrays.

var car;
console.log(car.noOfWheels); // Uncaught TypeError: Cannot read property 'noOfWheels' of undefined

undefined is a regular primitive value, like 10 or "hello". Handle it with care.

Null

Null behaves almost similar to undefined. There is only one value for type Null which is null. null is used for intentionally missing values.

Like undefined in null also if you try to access properties it will throw an error.

let test = null;
console.log(test.marks); // Uncaught TypeError: Cannot read property 'marks' of null

However, if you try to get the type of null using the typeof operator you won't get null as a type you will get object as a type.

console.log(typeof(null)); // "object"

Don't worry about this behavior, it is because of a bug in javascript which cannot be fixed. Unfortunately, we have to live with this bug forever.
It is a primitive value, and it doesn’t behave in any way like an object.

Booleans

There are only two values for the Boolean type which are true and false.

Boolean values are used to perform logical operations.

var isTrue = true;
var isFalse = false;
var oppTrue = !isTrue;
var oppFalse = !isfalse;
console.log(isTrue && oppFalse); // true
console.log(isTrue || oppTrue); // true

That's it for booleans it is simply used to perform logical operations. And like null and undefined if we try to access the properties it will throw an error.

Numbers

Numbers in javascript are quite interesting. Javascript numbers don't behave exactly as regular mathematical numbers.

console.log(0.1 + 0.2 === 0.3); // false
console.log(0.1 + 0.2 === 0.30000000000000004); // true

This is because javascript doesn't follow regular maths it follows floating point math.

Floating-point math is similar. In real math, there is an infinite set of numbers. But in floating-point math, there is only 18 quintillion of them. So when we write numbers in our code or do calculations with them, JavaScript picks the closest numbers that it knows about — just like our scanner does with colors.

You can learn more about floating-point math here.

There are special numbers in Javascript which are Infinity,-Infinity, NaN, and -0.

let zero = 0;
let a = 1 / zero; // Infinity
let b = 0 / zero; // NaN
let c = -a; // -Infinity
let d = 1 / c; // -0

Let's look at NaN,

console.log(typeof(NaN)); // "number"

From a JavaScript perspective, NaN is a numeric value. It is not null, undefined, a string, or some other type. But in floating-point math, the name for that term is “not a number”. So it is a numeric value. It happens to be called “not a number” because it represents an invalid result.
Be careful with special numbers, they might come up due to a coding mistake.

Strings

Strings are text in javascript. We can write a string in three ways in javascript.

single quotes('').
double quotes("").
backticks.

console.log(typeof("text")); // "string"
console.log(typeof('text')); // "string"
console.log(typeof(`text`)); // "string"

Strings have a few built-in properties which we can access.
e.g

let text = "text";
console.log(text.concat("string")); // "textstring"

You can get to know more about the string built-in properties here.

BigInts

Regular numbers can’t represent large integers with precision, that's why BigInts are added to the javascript language.

let bigNumber = 9007199254740991n;
console.log(bigNumber + 1n); // 9007199254740992n
console.log(bigNumber + 2n); // 9007199254740993n
console.log(bigNumber + 3n); // 9007199254740994n
console.log(bigNumber + 4n); // 9007199254740995n
console.log(bigNumber + 5n); // 9007199254740996n

Notice n at the end, BigInts are represented using the leading n at the end.
BigInts are great for financial calculations, where precision is crucial. However, calculations made with larger numbers take more time and resources hence use them wisely.

That's it for this post there are some concepts we need to cover that we will cover in the next post.

If you read this completely please give me some suggestions.

Some of the points are taken from the Just Javascript series by Dan Abramov. I am writing this post from what I understood from that series.

If you like this post do follow me so that you won't miss anything. Thanks for reading!

Introduction to styled-components Part-1

Aravindan07 — Thu, 03 Dec 2020 11:27:27 +0000

Why styled-components?

I know what you are thinking right now I know bootstrap, sass, etc., and why the hell should I use styled-components. Bear with me till the end I am sure you are gonna love this awesome library.

Styled-components is one of the popular styling libraries for React.js and it is used by some of the tech giants like Google, Github, Spotify, Tinder, etc.,

The reason behind the popularity of styled-components is because of the React way of styling(component-based styling) i.e we can create a component by using CSS in JS and we can use it anywhere in the application.

Installation

Installation is super simple,
Install styled-components from your preferred package managers(npm or yarn).

npm install -styled-components --save

Advantages of using styled-components

Automatic critical CSS.
No class name bugs.
Easier detection of CSS.
Simple dynamic styling.
Painless maintenance.

Getting started

Create a react application by using create-react-app.
Install styled-components using npm or yarn npm install styled-components --save or yarn add styled-components
After the above steps you can see that in your package.json file as a dependency. Your package.json looks like this :

"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "styled-components": "^5.2.1",
    "web-vitals": "^0.2.4"
}

Creating our first styled-component

Now we have all the prerequisites to style our react app using styled-components.

Trust me it's simple and awesome!

In app.js add these lines of code

The lines with white dots or white lines are the newly added lines in the app.js file.

Now let's understand what we have written in this file.

import styled from 'styled-components';

In the above line, I have just imported the styled-components library as a default import named styled.

const FirstButton = styled.button`
  border: none;
  outline: none;
  padding: 10px;
  background: #15b996;
  border-radius: 5px;
  color: #ffffff;
  display: block;
  margin: 200px auto 0 auto;
  height: 50px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
`;

In this snippet, I have created a variable named FirstButton and used the styled-components library to create a Button component.

But where we define that we are going to create a button?

Look carefully in the first line of the FirstButton variable we have defined something like this

const FirstButton = styled.button`
...
`;

We have called the button object from the styled object as styled.button and that's how we defined that we are going to create a button component.

Note that after styled.button we used backticks(``) to write CSS inside the FirstButton variable. This is needed because we are writing CSS in JS and not CSS. Because styled-components utilize tagged template literals to style your components.

After that, we use the FirstButton component like any other Component in React.

In line 23, we used our button as a React component.

That's it we have created our first styled-component.

You can see the output of our styled component button above.😍

Using styled-components we can style any HTML element not only the button.
For example, if you want to style a div element you can do that by replacing styled.button with styled.div and likewise we can style all the HTML elements.

It is not possible to explain this awesome library in one post we will explore this in my upcoming posts!

For more details, you can explore the official docs of styled-components they have good documentation there.

If you like this post do follow me for more.If you find anything wrong do let me know.

Thanks for reading.