Skip to main content

Command Palette

Search for a command to run...

Javascript Basics -> Basics of giving life to a website.

Updated
5 min read
Javascript Basics -> Basics of giving life to a website.

Introduction

What is Javascript?

Have you ever wondered, when you click on a button for example pay button, you are taken to a form and then you fill the form on the website, and the payment is made, my friend that is nothing but Javascript working behind the scenes of the web application or web site 😱. Yes, you heard it right Javascript is the one that makes the website interactive for users. Now you know that, we will look into some of its basics and features.

Welcome to the magic world of Variables

A thought must have come to your mind, what are variables, in layman's terms variables are nothing but containers where you can store your data or values. They are also known as identifiers.

Here you can see various containers or boxes and their values.
There are two ways of declaring variables: the Implicit and the Explicit ways.

Explicit way

The word explicit itself says that we are specifying a keyword/identifier before the variable name.

There are three ways in which you can declare a variable in JavaScript. var let and const. Before getting to that, we should know how to declare variables and follow certain standards.

Var

var a = 10;

when we console.log here we will get the value of a is 10. Var is the global scope, which means when we declare a with the var keyword, it is accessible everywhere in the javascript program.

But var is loosely scoped, which means it can be re-declared or re-assigned, what it did was it caused problems in behaviour, bugs, and memory leaks, especially in large-scale projects and complex codebases.

var name = "ojas"

console.log(name);

function greet() {
console.log(`Welcome ${name}`}
}
greet(); // When I call greet function here it is taking the name reference from the top.

The limitation of var is used to show unexpected behaviour in the program, which results in bugs, mostly in large and complex projects. To solve that two identifiers were introduced in Javascript standards and those were let and const.

let

let identifier was introduced in ES6 standards, it is re-assignable, block-scoped, optionally initializing each to a value.

// demonstrating this through a code snipet
let x=10; 
console.log(x)  // initialized with a value 10.
// let x = 20; 
// Uncaught SyntaxError: redeclaration of let x . What this says is you cannot redeclare x again.
// we are also able to change the value here
x = 20;
console.log(x) // so here it will give you x = 20 here. so we can change the value of x which is declared by using let keyword.
// But there is more, when we declare x again inside a curly braces , then lets see what happens
{
 let x = 30;
 console.log(x) // x = 30;  here something thing happened, we were able to re declare the x variable and assign different value to it.
}

const

const identifier was also introduced in ES6 standards, It is block scoped local variable. The value of const cannot be changed/reassigned but if it is an object then the values can be added, updated or removed.

const x; // We need to initialize the value of a const, it cannot be kept uninitialized
const x = 20;
x = 30; // in this case this will give an error which will tell value of const cannot be reassigned.

const names = ['Abhijit', 'Bipin', 'Ojas'];
names.push('Aniket') // here we are adding Aniket in the array which is behind the scenes an object so, we can add this value in the array even if it is defined using a const keyword.

Implicit Declaration

When a user declares or assigns a value to a variable which is not declared by using var, let or const, Javascript declares that variable for you, but caution, when you declare a variable implicitly then it is always global scope, even if it is declared in a function body.

// example of declaration of variable implicitly
name = "Abhijit"
console.log(name) // this will print Abhijit in the console.

Difference between var let and const.

Featurevarletconst
ScopeFunction scope or global scopeBlock scopeBlock scope
HoistingYes, hoisted and initialized to undefinedYes, hoisted but not initializedYes, hoisted but not initialized
ReassignmentAllowedAllowedNot allowed
RedeclarationAllowed within the same scopeNot allowed within the same scopeNot allowed within the same scope
Temporal Dead ZoneNoYesYes

This is a brief introduction to variables in JavaScript and how they work.

Datatypes in Javascript

There are two main sets of data types in JS, those are primitive and non-primitive data types.

Primitive data types

  • String: Represents a sequence of characters, for example, "Hello, World!".

  • Number: Represents both integer and floating-point numbers, for example, 42 or 3.14.

  • Boolean: Represents a logical entity and can have two values: true or false.

  • Undefined: A variable that has been declared but not yet assigned a value.

  • Null: Represents the intentional absence of any object value. It is treated as falsy for boolean operations.

  • Symbol: A unique and immutable primitive value used as the key of an object property. For example, Symbol('description').

  • BigInt: Represents integers with arbitrary precision. It can handle values larger than the Number type. You can create a BigInt by appending n it to an integer, for example, 123n.

Non-primitive data types

  • Objects

  • Arrays

// Object data type
const person = {
name:"Abhijit",
age:"20",
}

// array data type
const fruits = ['Apple', 'Banana', 'Grapes']

This is a brief introduction to data types in JavaScript.