DEV Community 👩‍💻👨‍💻


Posted on

Starting Vanila Js as a noob....if you want get along on this journy. (1st day)

JS or JavaScript is a scripting language completely different from java. Js is used to add functionality or logic in html.
Below is the first thing you have to know which is console. Simply right click in your browser and click inspect. Here you can see the console. It is used to debug or test purpose in browser for js.

Below is the code snippet of different types of console log.
console.time('Your code took: ')
console.log('hello console');
console.log({himanshu:'this', marks: 34});
console.table({himanshu: 'this', marks:34});
console.warn('This is warning');
console.timeEnd('Your code took: ');
console.assert(566<189, 'Age >189 does not exist');
console.error('This is an error');

As you can see there are different type of consoles.

  1. console.log(value) will print the value as it is.
  2. console.table(value) will print the value in table format.
  3. console.warn() will raise a warning massage in console tab.
  4. console.time(identifier variable) & console.timeEnd(same identifier variable as in "console.time()") will return the time taken to execute the block of code within these two perameters.
  5. console.assert(value) will give a assertion(similar to warning) if condition not met.
  6. console.error() will give error massage.

Ok......So, I hope everything above should be as clear as water to you guys. Lets jump into next topic which is variables.

Variables are basically containers which hold the different values like numbers, letters or words. For example in maths when we solve algebra there is a most common problem we all might've faced "Find x" (don't worry you won't get your ex back...sheesh pj :) ). Anyway there are variables in algebra like x and y with values like x=4 or x=5y something like that. So basically variables can store different types of values. I am bored now. Lets talk about real deal.

Moving forth there are three types of variables as far as I know till now in js.

  1. var
  2. let
  3. const
//Variable in js
//var, let, const
var name = 'Himanshu';
var marks = 3456;
var channel;

console.log(name, channel, marks);

//Rules for creating Javascript variables

1. Cannot start with numbers
2. Cannot start with letter, numbers, _ or $(can start with _ or $ but these use as identifires in many frameworks
    which will give error eventually)
3. Are case sensitive
var $example ='example'

const ownerName = 'Himanshu';
owerName = "Hari"
//const is a constant variable. is immutable
// cant in left undefined

//let has block level scope

var city = 'Delhi'; // global scope

    let city = 'Dubai';


const arr1 = [12,34,23,54];
arr1.push(45);//in const variable array can push the value but can't redefine

/* Most common programming case types:

1. camelCase
2. kabab-case
3. snake_case
4. PascleCase


Enter fullscreen mode Exit fullscreen mode

First lets talk about var.

Var is a global variable in js which can be accessed from anywhere in the code. But most developers try not to use var due to it's nature. Suppose we have 1000 lines of code and we used var with same name. It will raise a exception which might take us an eternity to identify.
In a nutshell var can be redefined means we can change the value of var.


Let variable has block level scope and {..this is scope..} all the things written within curly braces{} is in scope. We can redefine the let value out of the scope but it will give different value then the value which is defined in scope.


Const variable is immutable by nature means once defined can't be changed through out the the code. If we need a value to be static we use const. Like fields in a column or sirname etc.

Bonus tip: We can declare global values in a block by using window object.

for example
{ window.value = 100;}

What are the restrictions while initializing a vaiable?

We can use _ or $ to initialize a variable in js but it is recommended not use these because when we work with different libraries it may cause bugs.
Also we can't use * or number(1, 2, 3.....) to initialize the value.

Sorry for the long post. Here's a potato.

Image description

Top comments (1)

adityakrcodes profile image
Aditya Kumar

You explained everything so clearly 🔥!

Keep learning ✌🏻

We are hiring! Do you want to be our Senior Platform Engineer? Forem is hiring a Senior Platform Engineer

If you're interested in ops and site reliability and capable of dipping in to our Linux stack, we'd love your help shoring up our systems!