DEV Community: Thushara Thiwanka

Var, Let, and Const in JavaScript

Thushara Thiwanka — Thu, 01 Apr 2021 17:07:05 +0000

In JavaScript, var, let, and const are three ways of creating variables. Here, we will talk about the scope and difference between these three ways.

Bit of history on variable declaration

At the beginning of JavaScript, there was one way to declare a variable and, that is using the var keyword. Then let and const are introduced in ES6 but couldn't use it right away. Now, all the major browsers compatible with the let and const syntax, and most of the developers use let and const nowadays.

Var

Variables declared using var keyword scoped to the current execution context. This means If they are inside a function we only can access them inside the function. and If they are not they are part of the global scope which we can access anywhere. look at the example below to better understanding.

Here, Mango is scoped to function scope and Apple belongs to the global scope. If we try to access a global variable it is possible. but if we try to access a function scoped variable it is not possible. look at another example below.

One of the issues with using the var keyword is they can be redeclared inside the same scope. This will brings up some serious issues if we declare another variable using the same name inside the same scope, the new variable will replace the old one. var can be updated as well.

And another issue with var is these variables are not block-scoped which means if we have conditions statements those are not scoped to that statement but to the entire function or to the global scope.

Let

This is the improved version of var declarations. Variables declaration using this way eliminates all the issues that we discussed earlier. let creates variables that are block-scoped. Also, they can not be redeclared and can be updated. The below example shows it is the best choice to use let than var.

Check out the below example to understand more about the behavior of let in the block scope.

Const

Const variables are cannot be updated or redeclared. This way is used to declare constants. Same as the let declarations const declarations are block-scoped. Unlike var and let, If we are using const to declare a variable that must be initialized.

If we use const when object creating we can still update properties inside that object. Refer to the below example for better understanding.

I personally prefer to use let and const over var and use const to declare constant variables and always use let to declare variables if it is not a constant.

Introduction to Node.js Core Modules

Thushara Thiwanka — Sun, 21 Mar 2021 21:47:17 +0000

Node.js is an open-source environment to run JavaScript outside the browser which is built on Chrome’s V8 JavaScript engine by Ryan Dahl. Also, Deno is another JavaScript runtime environment developed by the same person (But we are not going to talk about that here). Node.js is used to build highly scalable server-side applications with asynchronous I/O features. Here we are going to discuss built-in modules in Node.js and their uses.

What are Node.js modules?

We can refer to modules as small encapsulated units which can be reused and shared with anyone. Easier to maintain and debug because they are separated pieces of code from each other. In Node.js, each module has its own context, which stops it from overlapping with other modules and global scope. Each module can also be stored in its own JavaScript file in its own folder. Then import that file when we need to use that module.

Node.js modules can be categorized into three types as core modules, user-created or local modules, and third-party modules.

Core modules — Inbuilt modules in the node.js
User-created modules — Modules created by the user
Third-party modules — Shared modules created and maintained by others

Core modules in Node.js

Basically, core modules are modules that are built into node.js these modules come automatically with the node.js installation. when you creating a node project these modules are available to use without any extra installations. before using core modules we need to import those modules into our project files using require keyword and I will mention how to import, use core modules in the next section.

There are lots of core modules out there. Here, I am going to discuss a few of the most important and most used among node.js core modules.

OS module

The os module provide methods and properties related to the current operating system.

Also, there are some other methods and properties to read about all the information, you can checkout os module documentation page here.

File System module

The file system module opens the doors to interacting with the file system of your device. In this scenario, we will see how to read from a file and how to write to a file using the file system module. To read and write there are two types of methods asynchronous/non-blocking way which we will be discussed and synchronous/blocking way. If you want to look into the synchronous way and other file system functionalities, check out this documentation page.

HTTP module

HTTP is one of the powerful modules in the node.js world that we use in networking applications. We can create a server that listens to HTTP requests in a certain port with this functionality we can create the backend for our application. Here, I will be creating a server that listens to a given port number.

In the browser, if you type localhost:3000 as URL Node.js is awesome will be displayed as the response. Also, there is much more to HTTP than this which you can find out using node.js HTTP documentation.

Evolution of Asynchronous JavaScript

Thushara Thiwanka — Mon, 15 Mar 2021 17:11:39 +0000

JavaScript is a single-threaded programming language which means the JavaScript engine can execute one statement at a time, line by line. Also, known as synchronous code. Here, I will discuss How the use of Synchronous, Asynchronous JavaScript changed from time to time and Asynchronous code uses using Callbacks, Promises, and Async/Await.

What is Synchronous JavaScript?

JavaScript by nature is a Synchronous programming language due to being single-threaded as mentioned above. which means JavaScript executes one statement at a time from top to bottom order. However, this behavior is not ideal for some times such as requesting data from API or Database. because this process can take some time and then other statements are waiting to execute after that process. This is where Asynchronous style code comes into play.

What is Asynchronous JavaScript?

Basically, Asynchronous style code means start executing now and finish it later. In the above scenario, when getting data from API or Database. We use Asynchronous functions instead of Synchronous functions. Then that function can start now and finish later once the data received. when executing code if there is Asynchronous code it will be removed from the call stack and the browser is going to tracks until finishes the task. then other statements can execute without any delay. Now I will explain it using the set timeout function which is asynchronous.

Here, we will discuss callbacks, promises, and async-await syntax. Basically, these are the ways to deal with asynchronous data.

Callbacks

Callbacks are functions that are passed as parameters to another function to execute later. If we have data received from API we can pass a callback function to be called and do somethings with that data once received. We can do that because JavaScript functions are executed according to invoked order not according to the defined order. Using callbacks we can delay the execution of a function until a particular time more used when getting data from somewhere that takes some time. Any function that receives another function as its arguments called a higher-order function and the function that passed as an argument is called a callback function. In the below scenario, someFunction is the higher-order function, sayWelcome is the callback function.

Regardless of if you were aware of the naming conventions the odds are you have used them before because they are so popular in JavaScript code. forEach, one of the most popular out of the bunch is mentioned below.

Multiple functions can be created independently and used as callbacks and these will create a multi-level function and when you have too many of these nested functions code becomes impossible to read. This drawback is called callback hell and let’s take a look at an example for better understanding.

Callback functions are useful for short asynchronous tasks. Due to this, promises were introduced to overcome this issue in ES6.

Promises

Promises, the name explains itself exactly. It is a promise to do something if something else is true and if it is not true then it won’t. Promises used to handle the asynchronous results of a task and a lot cleaner syntax than callbacks. In this scenario, isTrue is acting as a result based on the result resolve function or reject function will be called. Then, then method will be called on the promise if the resolve is called and the catch method will be called if the reject method is called. Anything inside then will be run for resolve and anything inside catch will be run for reject. Normally catch is used to handle errors.

Async / Await

Async/Await is really just syntactical sugar wrapped around making promises easier to work with. It is a way to write asynchronous code like synchronous code. When using the async keyword before the function that function will return a promise. This means, this takes a return value and automatically resolves it as a promise. Also, sets up a context to use the await keyword this will be work only inside the async functions. Here, we use try and catch for error handling.

Now, you know all the basics of Callbacks, Promises, and Async/Await and they’ve made reading and writing JavaScript code so much easier and more effective.

Write Less Code with SCSS Mixins

Thushara Thiwanka — Wed, 03 Mar 2021 16:21:42 +0000

Generally, in CSS we write a lot of redundant code in some situations. And to get around that we have to create helper classes and adding those classes to elements. To reduce effort, this is where CSS with superpowers comes in. SCSS, means Sassy CSS which known as SASS before which means Syntactically Awesome Style Sheets. SCSS is the most newer syntax and SASS is the older syntax. These are CSS preprocessors that allow us to write CSS rules more efficiently and more organized code using nesting, mixins, variables, and more. Then these rules will be compiled to CSS which the browser can understand. Here, I will walk you through how to use mixins to style a button that can change styles based on requirements.

SCSS mixins

Mixins are sets of CSS rules that can be applied to elements. These rules can be used throughout your project. Also, mixins help to modularize the code. The basic mixin structure is as below. Here, to create a mixin add any relevant name to mixin followed by the @mixin keyword then add pair of curly braces and write CSS rules inside.

Styling using mixins

Now, we will discuss how to add styles and include those styles in the button element. After writing CSS rules inside the mixin. we can apply those rules to any element. To add styles to the element that we want, just have to select the element and use the include and at symbol keyword along with the mixin name.

We can use mixins with variable parameters to get the most out of mixins. So that mixin will be dynamically adjustable using parameters. I will change the background and border-radius to be dynamic. In this scenario, $background and $border-radius variables passed as parameters and these variables are not mandatory to have the same name as the property but it is easier if we can have some name that indicates the property. Then when we including the mixin inside the button, we pass values as arguments. Just changing two properties we were able to achieve two different buttons using the same set of code lines.

Besides that, we also can mention the default values for passed parameters then we don't have to mention arguments in each button. If we didn't pass arguments when including the mixin default values will be automatically assigned to the properties. We can assign default values as shown below.

Finally, We can use this mixin throughout the whole project and generate different buttons according to requirements and this method will work for other elements as well.

Version Controlling with Git

Thushara Thiwanka — Thu, 25 Feb 2021 21:48:56 +0000

In simple terms, Git is like a history book of your code and is used for tracking changes of the code from start to finish. Here, I will discuss the basics of git and a bit of GitHub along with examples.

What are Git and Github?

First, We have to know Git and Github are not referring to the same thing. Git is the most popular version controlling system in the world. The version controlling system records the changes that we do to our code throughout the development process in the kind of database called a repository. Using the repository we can find out who has been done changes to the code and when and why. Also, revert to any stage that has been saved in the repository. Without version control, we have to do this process manually by creating various folders and saving the multiple versions of the code. That manual process can take a much longer time and If multiple people are working on the same project this will become a tedious task. Also with Git, multiple people can work together, and each member will have their own snapshot of the code since git is a distributed version control system. So that they can work separately. Git became so popular because it’s free, open-source, fast, and scalable.

On the other hand, Github is an online service that hosts our version-controlled codebase. It makes sharing and working together easy with other developers. Those developers can download the code and make changes to the code and then re-upload the code to the online repository in Github and If it is according to our requirements it can be merged with the main codebase. Gitlab, Bitbucket, Sourceforge are the alternatives for Github. The below diagram shows the nature of git version control.

Getting started with Git

Here, I will be using the windows terminal throughout this process also we can use options in the code editor to do the same that will depend on the editor. The first thing we need to do is initialize git in the project that we are working on and start tracking files.

Navigate to the project that you need to be version controlled and use the “git init” command to initialize an empty git repository inside that folder named .git. Also, this repository will be hidden.

Then add the files that you need to be tracked using the “git add” command. This will add files to the staging area that needs to be committed. If you need to add one file to the stage area then you can use “git add filename” or If you need to add all files at once use “git add .”.

After staging the files run “git commit -m “commit message” ” to commit the changes to git and use the meaningful message to recognize the changes. These commits will be milestones for our project. So then, If your code will change frequently it’s better to add small commits from time to time.

Now your files are version controlled with git. However, you can use .gitignore file to add paths to files that you don't need to be tracked. Git will automatically look at this gitignore file and filter out any files that matches.

Array Methods in JavaScript

Thushara Thiwanka — Wed, 24 Feb 2021 21:57:19 +0000

Basically, Array is a data structure that is used to store a collection of elements and an index is used to uniquely identifies an element. Arrays in JavaScript are created by using the Array class of a window object. Also, the length of an array or element type is not fixed in JavaScript. Here, I will discuss some of the methods that we can use in arrays.

Creating an array

In JavaScript, one array can hold up different types of elements. Using the array literal is the easiest way to create an array.

Adding, removing, and accessing elements

Using the push method we can add elements to the end of the array and the pop method removes elements from the end and returns the element.

Also, unshift and shift methods are used to add and remove an element from an array. unshift method adds elements to the array from the beginning and the shift method removes elements from the beginning also returns the element.

Then using an index we can access a specific element in the array, by mentioning the index inside the square brackets, array indexes are starting from 0.

Iterating through an array

Here, we are going to discuss two methods to iterate through an array, forEach, and map. In forEach method will execute the given function once in all the elements in the array. In this case, the arrow function contains the console log statement.

map method will execute the given function once in all the elements in the array and returns a new array. This will not modify the existing array.

Some useful other methods

In this section, we are going to talk about some useful methods that frequently used in arrays. The filter method is used for filtering elements by certain rule or rules in the callback function which is passed on. Based on that rule element gets selected or deselected. This also will not modify the existing array instead returns a new array. In this case, the below piece of code will return a new array excluding number 2.

The sort method will sort the array and the default sort order will be ascending. This method converts elements strings before comparing. Also, the sort will modify the existing array.

Lastly, we are going to discuss about find method, This will search the array elements and returns the first element that matches to condition given in the callback function. If it does not find the values, it will returns undefined.

If you are curious to know more methods this article will help you out.

What is "this" in JavaScript

Thushara Thiwanka — Mon, 22 Feb 2021 20:34:43 +0000

Generally, this keyword in JavaScript is confusing in some situations comparing to other programming languages like Java. Here, I will discuss some usages of this keyword and how it behaves in certain situations.

"this" keyword

Basically, this keyword in JavaScript is referring to the object that is executing the current function, also the parent object in some cases.

Behavior inside global scope

First, we are going to consider the behavior of "this" in the global scope. In the global scope, this keyword is referring to the window object itself. The window object represents the document page that is currently opened in the browser window.

Behavior inside methods

Then, we are going to figure out how this keyword behaves inside methods. Since the functions in JavaScript objects called as methods. If we invoke the print method it will be referred to the person object. That's because print is a method that attached to the person object. If we attach another method later to the object, it behaves like the same as below.

If we are going to iterate through an array using a callback function, inside that callback function, this keyword is referring to the window object. because that function not a method of the person object, it is bind to the window object because that is a regular function and not a method.

Behavior inside regular functions

In regular functions, this keyword is referring to the window object unless it is a constructor function. Here, these functions will be created as functions of the window object.

In constructor functions, this keyword is referring to the created object of that class. When creating an object of a Person "this" will be pointed to that empty object. then we can assign properties to the object using this keyword.

Behavior inside arrow functions

In arrow functions, "this" will always refer to the parent of the object that defined the arrow function. Here, this keyword inside the arrow function is referring the person object.

Behavior inside event listeners

This can be used in DOM as well. In event listeners, this keyword is referring to the element that the event happened.

However, we can figure out what is "this" by keeping eye on what is on the left side when the function that contains this keyword invoking. That means on what object that function will be invoked. Then that object will be the object this keyword is referring to, like if we are invoking "this" directly in global scope there is nothing on the left side that means "this" will be referring to the window object or If we are invoking the method which contains "this", then this keyword refers to the object that method is attached.