JavaScript a language which was developed only for the browsers to add interactivity to web pages. It was originally called Mocha and then renamed to LiveScript and then to JavaScript as a marketing strategy to use the popularity of Java at that time. The relation between Java and JavaScript is similar to the relation that Car has with Carpet.

However, over the years JavaScript has evolved into a powerful language used for both client and server side.

To get started we would start from the very basics of it like understanding the look and feel of it

Basic Requirements

We are going to have a small trip for the look and feel of JavaScript, you are expected to know:

what a programming language is
what do variables mean
what do data types mean

Declaration & Initialization

JavaScript is a case sensitive language, and it borrows most of the syntax from Java, C, and C++. JavaScript has three kinds of variables descriptions:

var: declares a variable, with the option to initialize the value later on.
let: declares a block-scoped, local variable, with the option to initialize the values later on.

const: declares a block scoped, with initialization at the time of declaration itself.

 //This is first declaration and then initalization
 let notInit
 notInit = 10

 //the is initialization at the time of declaration
 var x = "var used"
 let a = "let used"
 const b = "constant"

The keyword var is less likely used in modern JS and its usually advised by developers to use let instead.

Variable Hoisting

Hosting is a JS default behavior of moving declarations to the top of their scope (either global or function scope) during the compilation phase i.e. before the code is executed.

Hoisting for var, const and let could behave a bit differently, and here is how:

console.log(abc) //undefined 
var abc = 32
console.log(abc) //32

Behind the scenes, just before execution this is how JS sees it:

var abc;
console.log(abc); //undefined
abc=32
console.log(abc) //32

let and const are also hoisted but they are in a place called “temporal dead zone” (TDZ) from the start of the block until the declaration is encountered. Accessing them before the declaration give a ReferenceError and not undefined as it was in var

console.log(option) // ReferenceError: Cannot access "option" before initialization
let option =100;

Data Types

JS has eight data types, 7 of them are primitives and one is non primitive.

Primitive data types are those which are immutable and whose value cannot be changed, whereas non-primitive are mutable, stored by reference and can hold multiple values.

// Boolean: true / false values
let flag = true;
let unflag = false;

// Null: represents an intentional absence of value
//null is manually assigned to indicate "no value"
let tokenPresent = null;

// String: a sequence of characters representing text
let mood = "funny";

// Undefined: a declared variable that has not been assigned a value
//undefined is the default value of uninitialized variables
let xyz;
console.log(xyz); // undefined

// Number: integer or floating-point numbers
let num = 83;
let pi = 3.14;

// BigInt: large integers with arbitrary precision (add 'n' at the end)
let bigNumber = 9007199254740992n;

// Symbol: unique and immutable value, often used as object keys
let uniqueId = Symbol("id");

//NON PRIMITVE
//object
let obj ={name:"value"}

Data Type Conversions

JavaScript is a dynamically typed language which means it’s not required to specify the data type of a variable when you declare it.

let answer = 42;
answeer = "this is your answer"

Operators in JS

Js has a wide range of operators to perform operations on values and variables, below are the different operators:

Arithmetic Operators

Used for mathematical calculations

| Operator | Description | Example | Result | | --- | --- | --- | --- | | + | Addition | 5 + 2 | 7 | | - | Subtraction | 5 - 2 | 3 | | * | Multiplication | 5 * 2 | 10 | | / | Division | 5 / 2 | 2.5 | | % | Modulus (remainder) | 5 % 2 | 1 | | ** | Exponentiation | 2 ** 3 | 8 | | ++ | Increment | x++ | x + 1 | | -- | Decrement | x-- | x - 1 |
Assignment Operators

Used to assign values to variables

| Operator | Example | Shorthand | | --- | --- | --- | | = | x = 5 | — | | += | x += 3 | x = x + 3 | | -= | x -= 2 | x = x - 2 | | *= | x *= 4 | x = x * 4 | | /= | x /= 2 | x = x / 2 | | %= | x %= 2 | x = x % 2 | | **= | x **= 2 | x = x ** 2 |
Comparison Operators

Used to compare two values

| Operator | Description | Example | Result | | --- | --- | --- | --- | | == | Equal (loose) | 5 == '5' | true | | === | Strict equal | 5 === '5' | false | | != | Not equal | 5 != '5' | false | | !== | Strict not equal | 5 !== '5' | true | | > | Greater than | 5 > 3 | true | | < | Less than | 5 < 3 | false | | >= | Greater or equal | 5 >= 5 | true | | <= | Less or equal | 3 <= 5 | true |
Logical Operators

Used for Boolean (true/false) logic

| Operator | Description | Example | Result | | --- | --- | --- | --- | | && | AND | true && false | false | | | | | | | ! | NOT | !true | false |

Ternary Operator

it is the shorthand of if-else

 let age = 18;
 let status = (age >= 18) ? "Adult" : "Minor"; // "Adult"

Scopes in JS

Scope in JS could be simply explained as area of visibility, where a variable could be accessed or referenced. The different scopes and how different variables behave are mentioned below:

Global Scope

Declared outside any function or block

Accessible anywhere in the code

  let globalVar = "I'm global";

  function greet() {
    console.log(globalVar); // Accessible
  }
  greet();

Local Scope

Declared Inside a function

Accessible inside that function

  function sayHello() {
    let msg = "Hello";
    console.log(msg); // Accessible here
  }
  console.log(msg); // ReferenceError: msg is not defined

Block Scope

Only for let and const
Variables declared with let or const inside a block are only accessible within that block.

var is NOT block-scoped — it ignores block boundaries.

  if (true) {
    let mood = "Happy";
    const status = "Online";
  }
  console.log(mood); //  ReferenceError

  //var when used in block scope: 
  if (true) {
    var test = "Accessible outside";
  }
  console.log(test); //Works

There is one more type of scope also known as Lexical Scope where functions have access to variables in the outer scope where they are defined, not where they are called. This would be discussed when we are dealing with Function in JS

Conclusion

JavaScript is one of the most widely used language and it won’t be wrong to say that it is the language of the web, making it the most used language in the world. We would be learning more and more about JavaScript over time.

JavaScript Basics 101