Think beyond console.log()

While working with javascript we often use this popular method console.log(). During debugging when we need some insight about the happenings we use console.log(). There are a lot more methods to debug your code alternative to console.log(). These alternative console.log() methods are useful in data visualization, debugging etc.,

Alternative to console.log():

1.console.table()

This console.table() method is useful when we want to get a visual form of a group of objects that can be represented in a tabular form. It takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns. For example let us take 2 employee details and see in console.log() and console.table() methods

Using console.log():
const employee = [{id:101, name:'Anna'},
                    {id:102,name:'Tom'}];
console.log(employee);
Using console.table();
const employee = [{id:101, name:'Anna'},
                    {id:102,name:'Tom'}];
console.table(employee);

2.console.assert()

This console.assert() is great for debugging process. It takes an assertion and writes an error message when the assertion is false. If it is true nothing happens. Mainly used while debugging code. For example lets check whether a number is even and throw an error message if it is not.

const isEven = n => n % 2 === 0;
for (let i = 0; i < 3; i++) 
{
    console.assert(isEven(i), '%s is not even!', i);
}

3.console.count()

console.count() is used to count the number of times the line has been called.

for (let i = 0; i < 3; i++){
    console.count();
}

4.console.trace()

console.trace() helps you output the current stack trace at the location where you call it from. This helps in displaying a trace that show how the code ended up at a certain point.

function a() {
  b();
}

function b() {
  c();
}

function c() {
  console.trace();
}
a();

5.console.error()

console.error() is the second most popular method. It displays the error message.

console.error('This is an error message');

6.console.dir()

This method console.dir() will display the interactive view of the objects we want to log.

const employee ={
    name: 'Anna',
    age:'22',
    id:'101'
}
console.dir(employee);

7.console.warn()

console.warn() displays the warn message in yellow color.

console.warn('This is a warning message');

8.console.time()

console.time() is used to measure how long a particular operation in a program takes. This starts a timer you can use to track the time of a particular operation

console.time();

for (let i = 0; i < 100; i++) {
  // some code
}
console.timeEnd();

9.console.group()

console.group adds a level of indentation to any methods that comes after it. console.groupEnd() resets the indentation to the level it was before.

console.group('group 1');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 1');

console.group('group 2');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 2');

Difference between var, let and const in Javascript

The var, let and const are the keywords basically used in Javascript to declare variables. Among them var is the oldest way of declaring a variable. Other two let and const are introduced in ES2015 (ES6) update. Nowadays let and const are used more frequently in modern javascript compared to var.

In this article, we will try to understand the difference between them in respect to their scope.

Before getting into the difference first we need to know what is function scope and block scope.

Function Scope – Created by declaring a function

Block Scope – Created by if statement, for loops, while loops etc.

var in Javascript:

Var declarations are globally or functionally scoped. The var is globally scoped when it is declared outside a function and it is available for the whole program. Var is functionally scoped when it is declared inside a function.

Example of var with global scope:

Output:

2

2

The scope of variable a is global and it can be accessed anywhere in the program.

Example of var with function scope:

Output:

2

Reference Error: a is not defined

The scope of variable is within the function so if we try to access outside the function it shows error.

Limitation with var:

Var variable can be redeclared and updated. If we accidentally declared a new variable with the same name, it will override the existing value of that variable.

Output:

7

Last assigned value 7 is updated to the variable a.

If we use the var variable before declaration it is initialized with undefined value.

Output:

Undefined.

Let in javascript:

It is an improved version of var keyword. Let does not allow variable redeclaration.

Output:

Syntax error: Identifier ‘a’ has already been declared.

Scope of let:

Let is block scoped.

Output:

20

10

Now try to access b outside the function.

Output:

Reference Error : b is not defined.

If we use a variable before declaration it is not initialized with undefined just returns an error.

Output:

Reference Error: Cannot access ‘a’ before initialization

const in javascript:

Const variables maintain constant values. They share some similarities with let.

Like let declarations, const are block scoped. The difference is that unlike let, const cannot be updated or re-declared.

Output:

Type Error: Assignment to constant variable

User cannot change the properties of const object but they can change the value of properties of const object.

Output:

Type Error : Assignment to const variable.

Points to remember

varletconst
Function scopedBlock scopedBlock scoped
Allow duplicate identifiersDoes not allow duplicate identifiersDoes not allow duplicate identifiers
Value can be updatedValue can be updatedValue cannot be updated
Hoisted and initialized with undefinedHoisted but error if we try to access before declarationHoisted but error if we try to access before declaration