DEV Community: Ankita Bagale

JavaScript: Errors, Types, Properties

Ankita Bagale — Sun, 21 Mar 2021 11:14:29 +0000

In this blog, I am going to talk about types of errors in Javascript. So grab a seat, have popcorns ready.

Javascript throws runtime errors and today we are going to see how to read, understand and use those errors in your code

Error:

In JS, an Error is an object. It has a Class Error, which has a constructor Error(). This is the generic error class in JS.

There are various types of errors that means there are various Classes of Errors.

So we can create Error objects from such constructors.

The generic constructor Error takes one argument (a message that will be used to describe the error)

//as Error is an object we can create it from its class' constructor
let newError = new Error("MyMessage for the error");
//now this newError is an instance(object) of class Error

So yes, you are right, if it's an object and also it has a Class, it should have properties too.

Standard Properties of Error Object:

1. name -

By default, Error instances are given the name "Error". All the instances of Class Error will have a name property as "Error".

2. message -

The message property is a human-readable description of the error. Contains brief information of the error.

3. toString-

You might be thinking we have the toString method for Objects too. But the Error object overrides the Object.prototype.toString().
In the background, it combines the name and message and converts them into a string.

These are 3 standard properties, there are other non-standard properties too but they might not be supported by some browsers.

Let's check below example

console.log(newError)
Uncaught Error: MyMessage for the error
    at <anonymous>:1:13

See the 1st word in the above error- Uncaught: it means your error was not handled using the catch keyword.

Next word is- Error: It is the value of the name property of the Error.

The next part is - MyMessage for the error: It is the value of the message property in the Error.

The next part is - at <anonymous>:1:13: This is the very important part, this is a stack trace, it shows where the error occurred, will talk about this in detail in later part of the blog.

So the above statement is just all the properties of Error showed together.

toString():

toString method when called on Error, will return a string like - name: message

If the name property value is undefined, it returns the string with name value as Error
if the message property value is undefined, it returns the string with message value as an empty string ""

We will see one example of the toString() method.

var error1 = new Error('Bad operation');
console.log(error1.name) //Error 
//As it is an instance of Error class
console.log(error1.message) //Bad operation
console.log(error1.toString()); // 'Error: Bad operation'

var error2 = new Error('Bad operation');
error2.name = undefined;
//assigned undefined to error2 name property
console.log(error2.toString()); // 'Error: Bad operation'
//toString will return "Error" for undefined name

var error3 = new Error('Bad operation');
error3.name = 'hello';
error3.message = undefined;
//assigned undefined to error3 message property
console.log(error3.toString()); // 'hello'
//toString will return empty string for undefined message

Other than the generic Error constructor, there are other core error constructors in JavaScript. We will learn some of them in this blog.

1. RangeError :

The RangeError object is thrown when a value is not in the set or range of allowed values.

Constructor: RangeError()

Properties:

message: RangeError should provide its own message property
name: by default RangeError name property has the value "RangeError". Both the properties are inherited from the Error class

function checkAge(n)
{
    try{
        if( !(n >= 18) )
        {
            throw new RangeError("Age must be greater than 18 to sign up")
        }
    }catch(error) { 
         console.error(error);
    }
}
checkAge(13)
// RangeError: Age must be greater than 18 to sign up
// at checkAge (<anonymous>:6:19)
// at <anonymous>:1:1

2. ReferenceError:

ReferenceError object is thrown when a non-existing variable is referenced or used in your code.

Constructor: ReferenceError()

Properties:

message: ReferenceError should provide its own message property
name: by default ReferenceError name property has the value "ReferenceError". Both the properties are inherited from the Error class

let name="Ankita"
function printFullName( ) {
    try{
         console.log(`${name} ${surname}`);
    } catch( error ){
         console.error(error)
    }
}
printFullName( );
//ReferenceError: surname is not defined
//  at printFullName (<anonymous>:4:33)
//  at <anonymous>:9:1

3. SyntaxError:

The SyntaxError object is thrown when a program contains syntactically invalid code.

Constructor: SyntaxError()

Properties:

message: SyntaxError should provide its own message property
name: by default SyntaxError name property has the value "SyntaxError". Both the properties are inherited from the Error class

const printName = (){
    console.log("Ankita");
}
//Above arrow function has fat arrow missing, it will throw below error
//Uncaught SyntaxError: Unexpected token ')'

4. TypeError:

The TypeError object is thrown when an operation could not be performed, mostly when a value is not of the expected type.

Constructor: TypeError()

Properties:

message: TypeError should provide its own message property
name: by default TypeError name property has the value "TypeError". Both the properties are inherited from the Error class

// This is 1st kind of TypeError, where we try to change a value that cannot be changed
const marks = 200;
const totalMarks = 250;
marks = marks * 100 / totalMarks;
//Uncaught TypeError: Assignment to constant variable.
//   at <anonymous>:1:7

//This is 2nd kind of TypeError. If an operand/argument is passed to a operator/function whose type is not compatible with the operator/function.
//below code tries to apply spread operator on a number, hence it throws an TypeError
let number = 9;
let numberSpreaded = [...number];
// Uncaught TypeError: number is not iterable
//   at <anonymous>:1:26


//This is 3rd kind of TypeError, when a value is used in an inappropriate way
//below reduce method can be called on array, but instead we are calling it on a number, it will throw an TypeError
let arr= 9;
arr.reduce((sum,num)=>sum+num, 0);
// Uncaught TypeError: arr.reduce is not a function
//    at <anonymous>:2:5

5. URIError:

URIError is thrown when a global URI method is used in a wrong way.

e.g. The decodeURI() function takes encoded URI as an argument, it throws an URIError when the encoded URI contains invalid character sequences.

Constructor: URIError()

Properties:

message: URIError should provide its own message property
name: by default URIError name property has the value "URIError". Both the properties are inherited from the Error class

try {
  let a = decodeURI('%AN%KI%');
} catch(e) {
  console.error(e);
}
//URIError: URI malformed
//    at decodeURI (<anonymous>)
//    at <anonymous>:2:11

Selective Catching

Let's see an example, where we handle the error using try-catch block. What if we want to handle only the TypeError and not the syntax error.
We can do that easily, as we know all the errors are instances of their class. we can check their class and find out which type of error our try block has.

function sumOfNumbersInArray (arrayOfNumbers) {
    try{
       return arrayOfNumbers.reduce((sum, num)=>sum+num, 0);
    } catch(error){
        if (error instanceof TypeError)
        console.error("Invalid type. This function works with arrays only!");
        else
        throw error
    }
}
sumOfNumbersInArray(3);
// Invalid type. This function works with arrays only!

function sumOfNumbersInArray (arrayOfNumbers) {
    try{
       return arrayOfNumbersss.reduce((sum, num)=>sum+num, 0);
    } catch(error){
        if (error instanceof TypeError)
        console.error("Invalid type. This function works with arrays only!");
        else
        throw error
    }
}
//In the above code I miss-typed the arrayOfNumbers variable, it throws an error(else block), as that error is ReferenceError and is not an instance of TypeError
//Uncaught ReferenceError: arrayOfNumbersss is not defined
//    at sumOfNumbersInArray (<anonymous>:3:8)
//    at <anonymous>:1:1

Stack Trace

Let's talk about stack trace now.

consider below example. It has 3 functions, function A calls B, and function B calls C.

function A () {
    try{    
        console.log("I am A, I will handle the error, and invoking B");
        B();
    } catch(error){
        console.error(error);
    }
}
function B () {
    console.log("I am B, and invoking C");
    C();
}
function C (){
    console.log("I am C and I have an error");
    throw new Error("fatal error");
}
A();
// I am A, I will handle the error, and invoking B
// I am B, and invoking C
// I am C and I have an error
// Error: fatal error
//    at C (<anonymous>:15:11)
//    at B (<anonymous>:11:5)
//    at A (<anonymous>:4:9)
//    at <anonymous>:17:1

In function A we are handling the error, but in C error is thrown, as soon as the error is thrown in C, it stops executing further and control comes to the point where it was invoked, that means in function B. Function B also stops executing and control comes to the point where it was invoked, that means in function A. Now function A sees the catch block and the error gets caught there and now program runs further without any interruption.

Now that error tells information about type of error, message of the error and stack trace.

Stack trace information is stored in the stack property and can be helpful when trying to debug a problem. it tells us the function name where the error occurred and which functions made the failing call. States what all things are there in the stack at the time when the error occurred.

So this was all about errors in javascript. Let me know in the comments if you found this blog helpful !!

I thank my mentor Tanay Pratap who was the motivation behind this blog.

References:

Introduction to JavaScript Selectors

Ankita Bagale — Thu, 14 Jan 2021 18:24:45 +0000

We have many DOM methods to save html elements in JS variables.
In this blog, I will be explaining how method "querySelector" works. And how we can select elements more specifically using this method.

How querySelector() works?

Consider a simple html code as below-

<!-- html -->
<html>
    <body>
        <input type="number">
        <input type="number">
        <input type="number">
    </body>
</html>

If we need to store input element in JS variable, we use querySelector.

//JS code
var inputJS = document.querySelector("input");

console.log(inputJS)
//Output: <input type="number">

The above code in simple language means- querySelector() goes through the html document from top to bottom and selects 1st element with input tag, and returns it which gets saved in variable inputJS.

What is Selector?

What if we need to select 2nd input element instead of first, in such cases selectors are useful to call out specifically which element to select.

Whatever we write inside querySelector brackets is called as CSS string. It should have valid CSS syntax, if written incorrectly, it gives syntax error.

querySelector() method, searches for the element whose CSS selector matches with the CSS string specified in brackets. If no match is found it returns null.

We have some basic syntaxes-

querySelector("TagName")
querySelector(".ClassName")
querySelector("#idName")
querySelector("[Attribute]")

Lets check out one example:

<!-- html -->
<html>
    <body>
        <input class="inputNumber">
        <input id="idName" >
        <input type="number">
    </body>
</html>

// JS code
var element1= document.querySelector("input");
var element2= document.querySelector(".inputNumber");
var element3= document.querySelector("#idName");
var element4= document.querySelector('[type="Number"]');

First querySelector searches for element with input tag in html document and returns <input class="inputNumber">, and it gets stored in variable element1.
Second querySelector searches for element with class inputNumber ('.' represents class) in html document and returns <input class="inputNumber">, and it gets stored in variable element2.
Third querySelector searches for element with id idName ('#' represents id) in html document and returns <input id="idName">, and it gets stored in variable element3.
Fourth querySelector searches for element with attribute type and its value as Number ('[ ]' represents attribute) in html document and returns <input type="number">, and it gets stored in variable element4.

Multiple Selectors:

var element = document.querySelector(".inputNumber , #idName");

We can specify selectors comma separated. querySelector() searches for element who has either class inputNumber or id idName.

Negate Selectors:

var element = document.querySelector("input:not(.inputNumber)");

We can specify selectors inside brackets of :not() which we don't want to be selected. querySelector() searches for element who has input tag but that input element should not have class of inputNumber.

querySelectorAll():

var elementsArray = document.querySelectorAll("input");

querySelectorAll() searches for all the elements matching the CSS string and returns all those elements in an array.

Here it will return array of all the elements with tag input. We can store that array in variable.

This was just a basic understanding of selectors in JavaScript. Using this, you can build complex CSS strings. Here's a small quiz for you to check your understanding. Please write your answers in comments section.

<!-- html -->
<h1 class="mainHeader">Heading</h1>

<div class="main">
    <h1>Heading Main</h1>
    <p class="para">Paragraph</p>
    <input type="text">
    <p class="content">Content</p>
</div>

<div class="section">
    <input type="text">
</div>

Write CSS string if we want to select all elements with p tag having class "para" or "content"
Write CSS string if we want to select an element with h1 tag and that element should not have "mainHeader" class
Write CSS string for element with p tag having class "para" and parent class "main"
Write CSS string if we want to select an element with input tag having attribute type="text" which does not have parent class "main"
Find the output:

var array = document.querySelector("p")
console.log(array[0]);

Let's Learn Functions in Javascript

Ankita Bagale — Thu, 14 Jan 2021 12:23:36 +0000

Suppose there is a task which needs to be done again and again in your program. You will have to write the code again and again. It's a lot of repetitive work. Can this effort be saved? Yes. Functions come to your rescue!

Let us begin!

What is a function?

Basically it is a piece of code which needs to be written once but can be used any number of times. Let's see how to define and use them in our programs.

Syntax for Function Declaration-

It is same as we declare variables and assign value to it.

var age = 50;

In function declaration we are assigning a program statements as a value to it.

function functionName(parameter1, parameter2, andSoOn){
// program statements
}

A function can have multiple or no parameters. Parameters are the variables that are used in the program statements inside the function declaration.

Syntax for using the declared function(calling Function):

Defining a function does not execute it. Defining it simply names the function and specifies what to do when the function is called.

Earlier we declared a variable age and now we can use it in our program.

age=age+1;
console.log("my age next year will be "+age)

In the same way, we have to call function to use it.

functionName(argument1, argument2, andSoOn);

Arguments are the the actual values passed to the function parameters. Here argument1 is an actual value which is assigned to the parameter1 to use in the program statements inside function.
It will look like below on calling the function.

functionName(parameter1=argument1,.....){
//program statements
}

Consider below example:

//function declaration
function ageNextYear(age){
console.log(age+1);
}
//function call
ageNextYear(50);

The above statements will get executed as below-

ageNextYear(50) searches the function ageNextYear definition in our program, then saves 50 in parameter 'age' and then uses that 50 in place of age in program.
like-

ageNextYear(50){
console.log(50+1);
}

Hence gives the output as printing 51 on console.

Understanding return( ):

Some functions produces output and some functions don't. For example above function is just printing age next year in the console. But sometimes functions while execution of the program statements evaluate some values and returns it.

In short function takes the input, process it in program statements and returns the output. So this output is returned in a special statement called as return statement.

When control comes across return statement, it immediately jumps out of the function program and gives the output(value written next to return) to the code that called the function.

//function declaration
function square(x){
return x*x ;
}
//function call
var squareOfNumber = square(4);
console.log(squareOfNumber);
//→16

When the function reached return (4x4=16), it puts 16 value in place of function call (square(4)) and that value gets assigned to variable squareOfNumber.

More about Parameters and Arguments

What if we do not pass any value to parameters in function call, can we give a default value to execute the function's program?

The answer is yes, we can. We can assign default values to parameters in function declaration.

//function declaration
function square(x=3){
console.log(x*x);
}
//function call
square();
//→9
square(5);
//→25

When square is called with no value passed, square function's parameter is defined with value 3 and that gets used in program statements execution.

function square(3){
console.log(3*3);
}

And if we pass any value like 5, then x gets re-assigned with new value 5.

function square(5){
console.log(5*5);
}

What if we pass more values in function call, which one of them will be taken by parameter? And answer is extra arguments gets ignored.

//function declaration
function multiply(x,y){
console.log(x*y);
}
//function call
multiply(5,6);
//→30
multiply(5,6,7);
//→30

x saves 5, y saves 6 and extra values passed(7) will be ignored.

function multiply(5,6){
console.log(5*6);
}

Arrow Functions

What if we want our function to look compact and not bulky.
In such cases we use arrow functions. Arrow function is just a syntax/notation to declare a function. Instead of the function keyword, it uses an arrow (=>) made up of an equal sign and a greater-than character.

var functionName = (parameter1, parameter2, andSoOn) => {
//program statements
//return statement
}

Now how do we use this function. It is same as earlier:

functionName(argument1, argument2, andSoOn)

Let's see an example-

var square = (x)=>{
return x*x;
}
console.log(square(2))
//→4

If we have only one statement in our program inside function we can exclude the { } braces.
In such case, statement written after the arrow will be considered as return statement.

var square = (x) => x*x;
console.log(square(2))
//→4

We can exclude ( ) bracket if we have only one parameter.

var square = x => x*x;
console.log(square(2))
//→4

If we do not have any parameter, we have to write empty () brackets as part of syntax.

var printWelcome = () => console.log("Welcome");
printWelcome();
//→Welcome

Functions are one of the fundamental building blocks in JavaScript. I hope this article helped you in understanding Functions better and to use them in your programs.

What is API....

Ankita Bagale — Fri, 04 Dec 2020 16:43:49 +0000

Ever wondered how travel booking sites are able to list thousands of flights and hotels for a destination and showcase the cheapest option...
The answer is API.

In technical terms, API is Application Programming Interface. The name itself says it's an interface between two programs.
APIs let your application communicate with other applications without having to know how they’re implemented.

Why API?

Consider you are developing translation app which takes user input in English and shows translated text in Korean language. Now to implement this if you go on developing the whole program which will translate user words in Korean, you will end up making your code more complex and will spend a lot of time.
Instead, if you use API for translation, you just need to program to take user input and display translated output. You don't need to know how the translation is taking place. Another application will have program to translate it and API will get that translated text for you.
This can simplify app development, saving time and money. Let's see how API works.

How does API work?

Consider you are at a restaurant and you requested Noodles to waiter. Waiter will go to the kitchen(where your Noodles are being prepared) and get your order from kitchen back to you. You may not even know how to prepare the noodles.

In this above example, waiter is API. You are your translation app. Noodles are translated text for user's English input. Kitchen is another application(which have program to translate to Korean language).

API allows software applications to talk to each other. but how do API transfer information then?
There are four types of actions an API can take:

1. GET: Requests data from server

GET requests are the most common and widely used methods in APIs and websites. The GET method is used to retrieve data from a resource. Like in translation app, translation app requests for translated text for user input text. GET method of API brings response from server of that actual translating app. This response content is transmitted in the XML/JSON files.
See below screenshot, if GET method successfully brings response(translated text), it gives success code 200. If server is down or server is not found, it gives error code 400 in response.

Since a GET request is only requesting data and not modifying any resource, it's considered a safe and idempotent method.
Idempotent means making multiple identical requests must produce the same result every time until server content is not changed.

2. POST: Sends new information to a server

In web services, POST requests are used to send data to the API server to create new data in resource.
Consider you are filling a sign up form, when you enter your personal information and click on sign up, it takes entered data in format of XML/JSON/query parameters as POST request to the server where all the signed up users data gets stored.
If personal information is successfully stored in server, then we get 200 status code for POST request in response.
POST request is not idempotent. Every time we send data to store using POST request, it creates new data in resource.

3. PUT: Makes changes to existing data on server

PUT request is same as POST request. Difference is PUT request is idempotent. Every time we send data using PUT request to the API server to create data in resource, it checks if the data in resource is already present, if present then it updates the existing data in resource. If not present, it creates data in resource.

4. DELETE: Removes existing info from server

DELETE operations are idempotent. If you DELETE data, it’s removed from the resource. Requesting DELETE data second time will return a 404 error code in response.

It is important that we know what basically happens when we include anything new in our programs. I hope beginners will find this article helpful when working with APIs.

Use Git - Simplified For Beginners

Ankita Bagale — Sun, 29 Nov 2020 10:39:58 +0000

When we start to code for any project it is important to keep track of all our project versions and changes in source code files. Hence, knowing how to use git is important.
This is a beginner friendly article to help you with basic workflow of git.

How Git works?

Suppose we have a project. Its first version has file1 and file2. Git stores these two files as snapshots.
Now as part of Second Version of the project, we modified file2.
Now git will not store the file1 again. Instead, it will just refer to file1 snapshot from version1 as "version2 file1" is identical to "version1 file1".
And as file2 is modified, it will store file2's snapshot.
This way git keeps track of versions of the project.

Git has main 3 states in which file goes through:

Modified: A file is modified when we modify it but did not store it to local database.
Staged: A file is staged when we marked a modified file in its current version which is ready to store into local database.
Committed: A file is committed file when we safely store it in local database.

These states lead to 3 main sections:

Working tree: This is your workspace, where you copy files(of current version) from remote repository and use or modify those files to make changes for next version.
Staging area: It is a file in your git directory, that stores modified files which we want to store into local database.
Git directory: It is kind of a folder which stores the information and files of your project.

Basic workflow in git:

We modify files in working tree.
Selectively stage just those changes which we want to be part of our next version.
We do a commit, which takes files from staging area and stores as snapshots permanently in Git repository.

In short:

If particular version of a file is in git directory, it is considered as committed
If it has been modified and added in staging area, it is called as staged
if it is changed since its last checkout and has not been staged, it is modified

Go through below steps to use git in command line:

If you have your project repository in github and you want to update your code in your system and push the code changes again to your github account, that's when git commands can be used.

Install Git:
You need to install git in your machine before using it. Open the terminal window and type below command for ubuntu/debian:

$ sudo apt install git-all

for other OS please click here to check out the commands.

Login in Git:
The first thing you should do when you install Git is to set your user name and email address.

$ git config --global user.name “DummyUsername”
$ git config --global user.email “demoEmail@mail.com”

You can always check if your information is saved. Use gedit command. This will open a text file having username and email id.

$ gedit .gitconfig

Create Git Directory:
You will need a workspace(New folder) to copy your github repository in your machine. So we are going to use mkdir command to create workspace. We will make newly created workspace as current directory to proceed.

$ mkdir DummyName
$ cd DummyName/

If you already have a project directory and you want to start controlling it with Git, you first need to go to that project’s directory and initialise it with git.

$ cd ProjectDirectory_path
$ git init

Clone Remote repository:
To work on your project present in github account, you will need to get a copy of your project's git repository in your system. For this, use Clone command to copy repository in your workspace.

$ git clone “Enter here url of your remote repository”

You can check that new folder with project's repository name is created inside the workspace folder by using ls command.

$ ls

Make our newly created repository folder as current directory to proceed.

$ cd DumyRepoName

You are ready to code now. You can open the folder(newly created repository in workspace) in code editor. You can create/update your files and write/update your code.
This code will be saved in your desktop only. When we are done with the coding, we will want to update code in our github account.

Final Step: add, commit, push
Using a add file_name command you can add your code changes to staging area. This command states that you want to include file_name's changes included in your next commit.

$ git add .

. is used to include all files

You can use status command to check the files state.

$ git status

Use commit command to commit the code with comments. This will take files from staging area and store the files snapshots in git repository using git push command.

$ git commit -m “your comment goes here”
$ git push

Yay! We have our files updated in git repository. It was that easy if we understand the concepts and git commands.
I will recommend you to go to official documentation and always use git help command for more information: