DEV Community: SURAJITSHAW

Reference VS. Primitive Values

SURAJITSHAW — Fri, 21 Jan 2022 17:02:47 +0000

Do you know there is two types of values in JavaScript ?

> primitive values and reference values.

You maybe know that but do you know what are the difference between those 2 types ? How they stores in memory ?

> if your answer is "no", not to worry, we are gonna discuss all this in details. Just keep reading this blog 😊

In ECMAScript 2015 we were introduced more two primitive data types. There's a saying Everything in JavaScript is a Object, well almost everything except Primitive data types.

Now let's see how Primitive values differs from Reference values :

If you come from different languages ( e.g : C/C#, Java ) you probably know the concept of 'PASS BY VALUE' & 'PASS BY REFERENCE'.

In simple terms...

"Passing by value"_ means that you pass the actual value of the variable into the function. So, in your example, it would pass the value 9._
"Passing by reference" means that you pass the variable itself into the function (not just the value). So, in your example, it would pass an integer object with the value of 9.

In JavaScript you can consider Primitives with Pass by value and Reference values with Passing by reference. Also in code snippet you can clearly show when change the value of obj1, changes are reflects to copied obj2 as well. But in case of primitives you just pass a copy of original value so after when you change the original it doesn't affect the copied value.

Primitives : We store the actual value.

Reference : Here variable store the address where the data in heap memory is located. This doesn't store the actual value like primitives, instead a pointer or a reference to data.

SUMMARY

PRIMITIVES VALUES :

Value types are immutable.
value types are compared by value.
value types are copied by value.

REFERANCE VALUES :

reference types are mutable.
reference values are copied by address to memory or reference.

If you find this blog helpful make sure to give it 💛, also can follow me on Twitter for more helpful resources and tips.

JS Event Loop and Call Stack

SURAJITSHAW — Thu, 20 Jan 2022 05:35:02 +0000

Hello everyone 👋, I hope you are doing great.

So, today you are going to learn An Overview of what JavaScript event loop and call stack are, and how JavaScript work visually.

Many JavaScript developers don't know how JavaScript works. If you are new to JavaScript, then this article will help to learn how JavaScript works.

⚙️ JavaScript Engine
The JavaScript engine is a program that executes your JavaScript code. A popular example of a JavaScript engine is Google's V8 engine.

⚙️ V8 Engine
The V8 engine is an open-source, high-performance JavaScript and Web Assembly engine written in C++. The V8 engine is used inside Google Chrome, Node.js, and electron, among others.

Event Loop : The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading. Let’s take a look at what happens on the back-end.

Call Stack : The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

Event Queue : The event queue is responsible for sending new functions to the track for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution.

Whenever an async function is called, it is sent to a browser API. These are APIs built into the browser. Based on the command received from the call stack, the API starts its own single-threaded operation.

An example of this is the setTimeout method. When a setTimeout operation is processed in the stack, it is sent to the corresponding API which waits till the specified time to send this operation back in for processing.

Where does it send the operation? The event queue. Hence, we have a cyclic system for running async operations in JavaScript. The language itself is single-threaded, but the browser APIs act as separate threads.

The event loop facilitates this process; it constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

Thanks for reading! My name is Surajit Shaw; I love to share my learning with others. You can follow me on Twitter if you’d like to learn about web development and JavaScript.

Here's a link where I explain how JavaScript work much briefly Understanding of JavaScript Function Executions.

Starting With Tailwind CSS

SURAJITSHAW — Fri, 19 Nov 2021 08:58:57 +0000

What is Tailwind CSS?

CSS framework made up of utility classes
Much lower-level than Bootstrap, Materialize etc

Using Tailwind CSS

Install Tailwind CSS using npm (node package manager)
You'll need node.js installed in your computer

To check if node is already installed or not, open up your terminal and write below command :

node -v

if you get some sort of number like that v14.1.0 you are good to go otherwise you can just download Node from here : Install Node.JS

How Tailwind Works

When we use tailwind we create a src file where we import all tailwind core styles or functionality and also we can write our own CSS styles then we use Tailwind to process it and output into Vanilla CSS file, and can link it to our index.html

Now let's start with Tailwind CSS :

1. Install Tailwind via npm
open up your terminal and run below commands

npm install tailwindcss

2. Add Tailwind to your CSS
Create a CSS file if you don’t already have one, and use the @tailwind directive to inject Tailwind’s base, components, and utilities styles

@tailwind base;
@tailwind components;
@tailwind utilities;

That's all for the initial setup now you can use tailwindcss classes in your index.html to style it, before that you had to run this command in terminal

tailwindcss build src/style.css -o public/style.css

Or you can add a script for this and also for production in package.json

If you have any sorts of problem with the process you can checkout official documentation Tailwind Docs,
Or you can comment down below I'll try my best to resolve it.