Categories
javascript

Beginner JavaScript – 7 – Introduction to Data Types

✨Beginner JavaScript – 7 -Introduction to Data Types 

Hey everyone 👋🏻,

In this article, let us discuss about the basic introduction to Data Types in JavaScript. This is the seventh part of my Beginner JavaScript Series on Dev.

Data Types in JavaScript – A complete picture

Alt Text

Any variable that we define in JavaScript has a data type.

For example, if you have a sentence then that sentence is a series of characters so in the programming language, it is referred as a string of characters. A word itself is a string as well because it is composed of several characters like ‘cricket’, ‘javascript’ etc. Any numerical figure will be of number data type.

So these are the data types that we have in JavaScript and we will understand briefly about them in this post.

  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined
  6. Symbols
  7. Objects

Numbers

In JavaScript, numbers are primitive data types. For example,

const a = 4;
const b = 34.44;

Unlike other programming languages, here you don’t have to specifically declared for integer or floating values using int, float as we do in C++, Java etc. With the variables of this data type, you can perform operations like addition, subtraction, multiplication, exponentiation etc.

String

A JavaScript string represents a series of characters like “Good Morning”. A string can be any text inside double or single quotes:

const stringOne = "Good Morning";
console.log(stringOne); // logs "Good Morning" to the console

We will learn more about strings in a separate post.

Boolean

A JavaScript Boolean represents one of two values: true or false.
So using a boolean, you can check the truthiness or false state of some expression. We will learn more on Booleans in a separate post. But let us see a real quick example to understand a boolean in a nutshell.

const day = "Monday";
const isMonday = day === "Monday"; // If day is Monday, this expression will resolve to true else it will resolve to false. 
console.log(isMonday); 

Null

The value null represents the intentional absence of any object value. The meaning of the word null is void or absence of something It is one of JavaScript’s primitive values and is treated as false for boolean operations. There is a little quirk here despite null representing the absence of a value yet the data type for it is object in JavaScript.
You can assign null to a variable to denote that currently that variable does not have any value but it will have later on. A null means absence of a value.

console.log(typeof null);          
// "object" (not "null" for legacy reasons)
let someVariable = null;
console.log(someVariable); // null 

Undefined

It is the default value of a variable when it is just declared but not assigned an initial value.

let name; 
console.log(name); // logs undefined to the console 

let age = 21;
age = undefined; 
console.log(age); // logs undefined to the console.

Comparing null and undefined

When comparing null and undefined using ==, they are considered equal. For example,

console.log(null == undefined); // logs true to the console.

The reason for getting true in the console for the above code snippet is that , == compares values by performing type conversion. Both null and undefined return false. Hence, null and undefined are considered equal.

However, when comparing null and undefined with strict equality comparison using ===, the result is false.

console.log(null === undefined); // logs false to the console

Symbols

A symbol represents a unique identifier.
A value of this type can be created using Symbol():

const newId = Symbol();
console.log(newId); 

You could optionally also pass an argument to the Symbol to provide it some description.

Symbols are guaranteed to be unique. So even if you create many symbols with the exact same description, they are still considered as different values. The description is kind of a label and it does not affect anything.

Object

It is also one of the data types that we have in JavaScript. An object is a collection of key-value pairs. So each object that you and I create can be represented using the Object Literal Notation and it takes on property names along with their corresponding values. So let us see an example for objects as well.

const user = {
  firstName: "Alex",
  lastName:"Jones",
  age: 21,
  eyeColor: "blue",
  programmingLanguages: ['Java','Python','JavaScript','Ruby'],
  isDeveloper: true
};

Check my video on Introduction to Data Types to get more understanding on these:

So this is it for this one. Thanks for reading !

Categories
javascript

Beginner JavaScript – 6 – Operators

✨Beginner JavaScript – 6 -Operators

Hey everyone 👋🏻,

In this article, let us discuss about Operators in JavaScript. This is the sixth part of my Beginner JavaScript Series on Dev.

Operators in JavaScript

What are operators ?

Just like other programming languages, we also have operators in JavaScript. An operator performs some operation on single or multiple operands (data values) and produces a result. For example 3 * 2, where * sign is an operator and 3 is left operand and 2 is right operand. * operator multiplies two numeric values and produces a result which is 6 in this case.

Categories of operators in JavaScript

  1. Arithmetic Operators
  2. Comparison Operators
  3. Logical Operators
  4. Assignment Operators
  5. Conditional Operators

Arithmetic Operators

Arithmetic operators are used to perform mathematical operations between numeric operands

+   Adds two numeric operands.
-   Subtract right operand from left operand
*   Multiply two numeric operands.
/   Divide left operand by right operand.
%   Modulus operator. Returns remainder of two 
        operands.
++  Increment operator. Increase operand value by 
        one.
--  Decrement operator. Decrease value by one.

Alt Text

Note:

  1. + operator performs concatenation operation when one of the operands is of string type.

Alt Text

Comparison Operators

Comparison Operators are those operators that compare two operands and return Boolean value true or false.

==  Compares the equality of two operands without considering 
        type.
=== Compares equality of two operands with type.
!=  Compares inequality of two operands.
>   Checks whether left side value is greater than right side 
        value. If yes then returns true otherwise false.
<   Checks whether left operand is less than right operand. If 
        yes then returns true otherwise false.
>=  Checks whether left operand is greater than or equal to 
        right operand. If yes then returns true otherwise false.
<=  Checks whether left operand is less than or equal to right 
        operand. If yes then returns true otherwise false.

Alt Text

Logical Operators

Logical operators are used to combine two or more conditions. In JavaScript, we have the following logical operators.

&&  && is known as AND operator. It checks whether two 
        operands are non-zero (0, false, undefined, null or "" are 
        considered as zero), if yes then returns 1 otherwise 0.
||  || is known as OR operator. It checks whether any one of 
        the two operands is non-zero (0, false, undefined, null or 
        "" is considered as zero).
!   ! is known as NOT operator. It reverses the boolean result 
        of the operand (or condition)

Alt Text

Assignment Operators

In JavaScript, we have assignment operators to assign values to variables. Let us go over them.

=   Assigns right operand value to left operand.
+=  Sums up left and right operand values and assign the 
        result to the left operand.
-=  Subtract right operand value from left operand value and 
        assign the result to the left operand.
*=  Multiply left and right operand values and assign the 
        result to the left operand.
/=  Divide left operand value by right operand value and 
        assign the result to the left operand.
%=  Get the modulus of left operand divide by right operand 
        and assign resulted modulus to the left operand.

Alt Text

Ternary Operators

JavaScript includes special operator called ternary operator : ? that assigns a value to a variable based on some condition. This is like short form of if-else condition.

Ternary operator starts with conditional expression followed by ? operator. Second part ( after ? and before : operator) will be executed if condition turns out to be true. If condition becomes false then third part (after : ) will be executed.

<some_variable> = <some_condition> ? <value_one_if_condition_comes_out_to_be_true> : <some_other_value_if_condition_comes_out_to_be_false>;

Alt Text

Check my video on Operators in JavaScript to get more understanding on these:

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 5 – Variables and Constants

✨Beginner JavaScript – 5 – Variables and Constants

Hey everyone 👋🏻,

In this article, let us discuss about Variables and Constants in JavaScript. This is the fifth part of my Beginner JavaScript Series on Dev.

Variables – A complete picture of var, let and const

Alt Text

What is a variable ?

Variable means anything that can vary or change. JavaScript includes variables which hold the data value and it can be changed anytime. JavaScript uses reserved keyword var to declare a variable.

Remember, A variable must have a unique name.

Let us see an example to understand more on variables. So in the below example, we declare two numbers – numberOne and numberTwo using the var keyword and then we define a sumTotal variable again using the var keyword and store the sum of the two numbers – numberOne and numberTwo.

Alt Text

Moving from var to let and const

let keyword

A variable defined using a let statement is only known in the block it is defined in, from the moment it is defined onward.
Variables declared using the let keyword are block-scoped, which means that they are available only in the block in which they were declare and NOT outside.

At the top level (outside of the function )

var rootVariable= 1242;
let blockScopedVariable = 2143;

console.log(rootVariable); // 1242
console.log(blockScopedVariable); // 2143

console.log(this.rootVariable); // 1242
console.log(this.blockScopedVariable); // undefined 
Inside a function (but outside of a block)

In this case, let and var will have the same scope.

(() => {
  var a = 2142;
  let b = 4443;

  console.log(a); // 2142 (scoped to a function)
  console.log(b); // 4443 (scoped to a block)
})();

// Outside the function, you cannot access both the variables. 
console.log(a); // ReferenceError: a is not defined
console.log(); // ReferenceError: b is not defined
Inside a block

Variables declared using let keyword inside a block can’t be accessed from outside that block.

{
  var a= 42;
  let b= 43;
  console.log(a); // 42
  console.log(b); // 43
 // Both a and b are declared within the block, hence can be accessed within the block.
}
// a is declared using the var keyword inside a block, it can be accessed from outside 
console.log(a); // 42
// b is declared using the let keyword inside a block, it cannot be accessed from outside the block because it's scope is limited to the block in which it is defined in. 
console.log(b); // ReferenceError: b is not defined
Temporal dead zone

Because of the temporal dead zone, variables declared using let can’t be accessed before they are declared. Attempting to do so throws an error.

console.log(a); // undefined
var a= 43;
console.log(b); // ReferenceError: b is not defined
let b = 42;

const keyword

const is quite similar to let—it’s block-scoped but we do have subtle differences between let and const as well. So let us discuss them first :

No reassignment

Variable declared using const can’t be re-assigned.

const a = 23;
a = 33; // TypeError: Assignment to constant variable

Note that it doesn’t mean that the value is immutable. Its properties still can be changed.
So in essence this means that the variable will always have a reference to the same object or primitive value, because that reference can’t change. Only the reference is immutable and not the value that is held by that variable.

Check my video on variables and constants to get more understanding on these:

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 4 – Host Environment in JavaScript

✨Beginner JavaScript – 4 – Host Environment in JavaScript

Hey everyone 👋🏻,

In this article, let us discuss about the Host Environment in JavaScript. This is the fourth part of my Beginner JavaScript Series on Dev.

Host Environment in JavaScript

Alt Text

What do you mean by a Host Environment ?

This essentially means that Javascript runs on a host environment,
so you can execute your JavaScript code in different environments. The most well known environment is the browser, modern browsers have Javascript engines built in and they’re therefore capable of executing Javascript code but you also can run Javascript in other environments, for example on the server side, so right on a computer without having a browser in between, so not inside of a browser but simply execute code like this on your machine using Node.js

Check this video where I explain Host Environment

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 3 – Dynamic, Interpreted and Weakly Typed Nature of the JS Language

✨Beginner JavaScript – 3 – Dynamic, Interpreted and Weakly Typed Nature of JS Language 

Hey everyone 👋🏻,

In this article, let us discuss about the Dynamic, Interpreted and Weakly Typed Nature of the JS Language. This is the third part of my Beginner JavaScript Series on Dev.

Dynamic, Interpreted and Weakly Typed Nature

Alt Text

Dynamic

Dynamically-typed languages are those (like JavaScript) where the interpreter assigns variables a type at runtime based on the variable’s value at the time. So in essence this means that value’s type is enforced, but the variable simply represents any value of any type.

Alt Text

Weakly Typed

Weakly typed means the compiler, if applicable, doesn’t enforce correct typing. Without implicit compiler interjection, the instruction will error during run-time.

Check this video where I explain Dynamic, Interpreted and Weakly Typed Nature of the JavaScript Language

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 2 – How JS Code is Executed in the browser ?

✨Beginner JavaScript – 2 – How JS Code is Executed in the browser?

Hey everyone 👋🏻,

In this article, let us discuss about how JS Code is Executed in the browser. This is the second part of my Beginner JavaScript Series on Dev.

How JS Code is Executed inside the browser ?

The source code that you and I write is first passed through a program called a compiler, which in turn translates it into something called as the bytecode which the machine can understand and execute.

Contrary to this, JavaScript has no compilation step. Instead, an interpreter in the browser goes over your entire JavaScript code, interprets it line by line, and then runs it.
Some of the more modern browsers use a technology known as Just-In-Time compilation, which compiles JavaScript to executable bytecode just when it is about to run.

Alt Text

Alt Text

Check this video where I explain How JavaScript Code is Executed in Browser

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
javascript

Beginner JavaScript – 1 – The Language and How Web Works ?

✨Beginner JavaScript – 1 – The Language and How Web Works ?

Hey everyone 👋🏻,

In this article, let us discuss about the JavaScript Language and How the Web Works. This is the first part of my Beginner JavaScript Series on Dev.

The Language and How the Web Works

JavaScript is a powerful, event-driven, dynamic and flexible programming language. It can execute on a web browser that allows us to make interactive webpages such as popup menus, animations, form validation.

So the moment you enter the URL address in your browser and hit ENTER, some things happen under the hood. Let us understand them.

Alt Text

  1. The first thing that happens is the resolution of the URL.
  2. An HTTP request is sent to the server of the website.
  3. The response of the server is then parsed.
  4. Finally the page is rendered and then displayed.

Check this video where I explain the Language and How the Web Works:

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Categories
binary trees data structures javascript

Data Structures Problem – Checking for Children Sum Property in a given Binary Tree 🌳

✨Data Structures Problem – Checking for Children Sum Property in a given Binary Tree 🌳

 

Hey guys 👋🏻,

I just released a new video on solving an interview problem :

Checking for Children Sum Property in a given Binary Tree

In this video, we will solve the problem of checking whether the given binary tree satisfies the children sum property or not.
We will first understand the approach that we will be taking to solve this problem and then we will write the code for the same problem together. Once we are done with the implementation, we will do a quick dry run for the code to understand and make complete sense of the output that we get. Here is the code from that video : 

// Children Sum Property in a binary tree

// We need the class for a node first
class Node {
  constructor(data) {
    this.data = data;
    this.left = null;
    this.right = null;
  }
}
let rootNode;

function isChildrenSumPropertySatisfied(node) {
  let leftChildData = 0;
  let rightChildData = 0;

  if(node === null || (node.left === null && node.right === null)) {
    return true;
  }else {
    leftChildData = node.left !== null *
  }
}

function isChildrenSumPropertySatisfied(node) {

  let leftChildData = 0;
  let rightChildData = 0;

  if (node == null || (node.left == null && node.right == null)) {
    return true;
  } else {
    if (node.left != null) {
      leftChildData = node.left.data;
    }
    if (node.right != null) {
      rightChildData = node.right.data;
    }

    if ((node.data == rightChildData + leftChildData) &&
      (isChildrenSumPropertySatisfied(node.left) != false)
      && (isChildrenSumPropertySatisfied(node.right) != false)) {
      return true;
    }else {
      return false;
    }
  }

}
const root = new Node(10);
root.left = new Node(8);
root.right = new Node(2);
root.left.left = new Node(3);
root.left.right = new Node(5);
root.right.right = new Node(2);

if (isChildrenSumPropertySatisfied(root) != 0) {
  console.log('The given tree satisfies the children sum property');
} else {
  console.log('The given tree does not satisfies the children sum property.');
}

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
javascript web development

Where to filter the data – backend or frontend ?

✨Where to filter the data – backend or frontend ?  

 

Hey everyone,

In this article, let us discuss about a very important question regarding filtering the data that we get from the database or API. So the question is : 

Where exactly should we filter the data ? 

🤔 Backend … ? 

🤔 Frontend … ? 

Well, the answer is : 

It depends. 

Let us discuss now : 

So if you have a a large amount of data, it is better to implement the filtering logic on the backend and let the database handle all the heavy lifting for us. Contrary to this, if you are dealing with less amount of data, you can do the filtering logic on the frontend.

In general, if you are working with a million recordset (as an example) and there are tons of users trying to access those records at the very same, then in such cases it does not make sense to send a million recordset to every user who is currently accessing the website. It simply does not make sense because it will simply bring your website down, so what we do in such cases is that we setup a record limit (kind of we send the data in batches) by using a features like database cursors. So kind of with the cursors in place, you can fetch the data in batches in some sort of pagination etc. Consider a big ecommerce website like Amazon, this is how they handle that amount of data in a nutshell.

For less amount of data, you could retrieve the data from the backend and then use the filtering logic on the frontend.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
html javascript vuejs web development

✨Top 5 resources to learn Vue.js [in no particular order]

✨Top 5 resources to learn Vue.js

Hey everyone 👋🏻,

In this article, I will be mentioning the top 5 resources that I highly recommend if you want to learn Vue.js.

PS : I am not an affiliate of any of these resources/courses. These are just some of my personal recommendations if you are looking to learn Vue.

Introduction

Alt Text

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Here are the top 5 recommendations (in no particular order) of the courses that you should definitely check out for learning Vue.

1. Build Web Apps with Vue 3 and Firebase by Shaun Pelling a.k.a The Net Ninja (rated 4.8)

image

Shaun is a gifted teacher. He knows how to explain stuff in a very easy and lucid manner. This course will definitely take your knowledge to the next level if you are looking to learn this specific technology.

Here is what this course covers

Learn how to create Vue 3 applications from the ground-up

Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc

Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)

Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)

Build & deploy 4 real-world web apps with Vue & Firebase
Learn how to implement an authentication system into your Vue js apps using Firebase Auth

Become a Vue 3 ninja!

Course Link :

https://www.udemy.com/course/build-web-apps-with-vuejs-firebase

2. Vue.js – The Complete Guide by Maximilian Schwarzmuller ( rated 4.8)

image

This course as the name can probably tell you covers the internals of Vue in great detail. The course starts from the very basics like What Vue.js is and how it works and later on moves to more complex and advanced topics

Here is what this course covers

What is VueJS and Why would you use it?

The Basics (including the basic Syntax, Understanding Templates and much more!)

How to Output Reactive Data & Listen to Events

Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)

Setting up a Development Environment and Workflow

Using Components (and what Components are to begin with)

A Deep Dive Look Behind the Scenes of Vue

Binding to Form Inputs

Sending Http Requests to Backend APIs

Authentication & Vue

How to make your App more Beautiful with Animations and Transitions

How to create an awesome Single-Page-Application (SPA) with Routing

How to improve State Management by using Vuex

How to Deploy the App

and more …

Course Link :

https://www.udemy.com/course/vuejs-2-the-complete-guide

3. Vue Mastery

This is a complete path for learning Vue.js from some prominent industry experts pertaining to the technology.

image

image

Here is what this course covers

Their courses are distributed in form of paths. You may want to try them out as well.

image

Course Link :

https://www.vuemastery.com/courses

4. VueSchool.io

image

Here is what this course covers

image

You may want to try their complete suite of courses to enhance your Vue.js Knowledge. So down below, you can find the link for their website :

Course Link :

https://vueschool.io/courses

5. Vue.js Documentation (a must thing to refer)

image

Docs link :

https://v3.vuejs.org/

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.