Beginner way of Solving JavaScript Error, try, catch and debugging

Code or program always doesn’t run the way we want them to run. In our programming life we have to face error too often. Today I am trying to share my error handling and debugging strategy. And I also try to explain try and catch block of JavaScript in a beginner way. Without any further ado, let’s get to the point.

Strategy 1. Rewrite code block:

Most of the times beginner programmer made typing mistake and could not find why their code isn’t working. I face this problem many times, but it is not easy to find where I made that mistake. Later I started to rewriting the code block and to able to find mistake easily. I might be unable to explain this clearly to you. Follow the code block to get a clearer view.

const numbres = [1,3,4,5,6,7,8]
const odd = numbers.filter(num => num % 2 !== 0)
console.log(odd)
return Uncaught ReferenceError: numbers is not defined

So Here I start to rewrite this code this way-

// const numbres = [1,3,4,5,6,7,8] I comment out the first line, write it again and rerun the code
const numbers = [1,2,3,4,5,6,7,8]
const odd = numbers.filter(num => num % 2 !== 0)
console.log(odd)
return [1,3,5,7]
and magically my error is gone!

This example may be not that great, but you can start this way for complex function too.

Strategy 2. console.log()

When we write a function with several steps, and get a error, we beginner often failed to where we made the mistake. In fact, finding our own mistake is the hardest things to do. So, I use a lot of console.log() function to avoid and find the mistake. Here is a code example trying to make it easier to understand.

function drive(age){
 if(age > 16){
   return ('you can drive')
 }else if(age > 30){
   return ('you probably drived before')
 }else {
  return ("you can't drive")
 }
}
drive(32); // "you can drive"

Here our expected out is the second one, but the function would never return the second condition? Why? As a beginner you might have to face similar situation. Specially working with condition.

JavaScript try…catch:

Sometimes we make mistake or our user give wrong input or there could thousand other reason to break our scripts. JavaScript try and catch are there to handle this error.

try{
  const email = user.email;
  sendMail(email, message);
}catch(err){
  alert('please provide a valid email')
}

JavaScript Types:

There is a proverb, ‘Everything in JavaScript is a Object’. Although it is not absolutely correct, it is almost correct. There are two main types in JavaScript. Primitive and Object.

1. Primitive Values:

There are just seven primitive values in JavaScript. They are —

a. Undefined: (undefined) used for defining some missing values

b. Null: (null) also used for intentionally missing values.

c. Booleans (True and False): This two values used for logical value

d. Numbers (10, -25, 3.5, 0): Numbers types used for math operations.

e. Strings (‘alohomora’, ‘hello’): used for text information.

f. Symbol (unknown): This type used to hide implementation details.

g. Bigint (unknown and new): This is used for math big numbers.

2. Object:

Except those above items, everything in JavaScript is Object (and function type).

a. Object: Object {} and others (Array) are used to group related data and functions.

b. Function: const double = num => num * 2 is used to refer code.

Function Default Parameter:

Many times we need to use parameters in function. We can set a default value for those parameters too. Here is an example.

function calculateTax(value, rate = 10){
   return value * rate;
}
calculateTax(225) // return 22.5 
calculateTax(225, 20)// return 45

Spread Operator:

Spread Operator (…) or rest operator use to spread or copy properties of an object or an array.

const odds = [1,3,5,7]
const numbers = [...odds, 2,4,6,8] // [1,3,5,7,2,4,6,8]
function total(first, ...rest){
  return rest;
}
total(2,5,8,9)// return [5,8,9]

You can used these to de-structure, and copy object easily.

Quick Introduction of ES6:

ES6 or Ecma Script 6 is the JavaScript version of 2015. Here are some of the main feature of ES6.

1. var, let, const: In ES6, var is replaced with two keyword. let and const. const variable is immutuable. You can not reassign it after declaring. On the other let is used to declair a varibale.

let num = 23;
num = 33;
const birthdate = '21,05,98'
birthdate = '30,04,00' // return error

2. Arrow Function:

ES6 introduced us arrow function. Which is the shortest way to declare a function.

const arrowFunction = (x)=> x * 2;

In one line, you would not need to use return keyword to return something from a arrow function.

3. Block level Declaration and Binding: In ES6, JavaScript allows us to declare block level variable. We can declare some variable inside a function and it won’t be available outside the function.

let name = 'Amigo';
function greet(){
  let name = 'Emma Ahmed'; // name isn't available outside function
  console.log('Howdy', name);
}
console.log(name) // "Amigo"
greet() // "Howdy Emma Ahmed"

That’s all for today. Wish to see you in another blog in another day. Until then keep calm, focused and healthy.