JavaScript Basics (Very Important)

These topics are asked in almost every JavaScript and React interview.

---

1. Variables (var, let, const)

Variables are used to store data.

var

• Old way to declare variables
• Function scoped
• Can be redeclared
• Can be reassigned
• Hoisted with undefined

var name = "Dipak";
var name = "Rahul"; // allowed

console.log(name); // Rahul

Problem with var

if (true) {
  var age = 25;
}

console.log(age); // 25

var ignores block scope, which can create bugs.

---

let

• Introduced in ES6
• Block scoped
• Cannot be redeclared
• Can be reassigned

let city = "Kolkata";
city = "Delhi"; // allowed

console.log(city);

Block Scope

if (true) {
  let score = 90;
}

// console.log(score); // Error

---

const

• Block scoped
• Cannot be redeclared
• Cannot be reassigned
• Value must be initialized

const pi = 3.14;

Important

For objects and arrays, contents can still change.

const user = {
  name: "Dipak",
};

user.name = "Rahul"; // allowed

But:

// user = {} // Error

---

Difference Between var, let, and const

Feature	var	let	const
Scope	Function	Block	Block
Reassign	Yes	Yes	No
Redeclare	Yes	No	No
Hoisting	Yes	Yes	Yes
Temporal Dead Zone	No	Yes	Yes

---

2. Data Types

JavaScript has two main categories of data types.

---

Primitive Data Types

These store single values.

Type	Example
String	"Hello"
Number	10
Boolean	true
Undefined	undefined
Null	null
BigInt	123n
Symbol	Symbol()

Example

let name = "Dipak";
let age = 24;
let isActive = true;
let data = null;

---

Non-Primitive Data Types

These store collections of data.

• Object
• Array
• Function

Example

const user = {
  name: "Dipak",
  age: 24,
};

const skills = ["JS", "React"];

---

3. Type Conversion

Changing one data type into another.

---

String to Number

let num = Number("10");

console.log(num); // 10

---

Number to String

let str = String(100);

console.log(str); // "100"

---

Boolean Conversion

Boolean(1); // true
Boolean(0); // false

---

Implicit Conversion (Coercion)

JavaScript automatically converts types.

"5" + 1; // "51"
"5" - 1; // 4

---

4. Operators

Operators perform operations on values.

---

Arithmetic Operators

+  // addition
-  // subtraction
*  // multiplication
/  // division
%  // modulus

Example:

console.log(10 + 5);
console.log(10 % 3);

---

Comparison Operators

==
===
!=
>
<
>=
<=

Example:

console.log(5 == "5"); // true
console.log(5 === "5"); // false

---

Logical Operators

&& // AND
|| // OR
!  // NOT

Example:

true && false; // false

---

5. Conditions

Used for decision making.

---

if Statement

let age = 20;

if (age >= 18) {
  console.log("Adult");
}

---

if...else

let marks = 40;

if (marks >= 50) {
  console.log("Pass");
} else {
  console.log("Fail");
}

---

else if

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else {
  console.log("C");
}

---

Ternary Operator

Short form of if...else.

let age = 18;

let result = age >= 18 ? "Adult" : "Minor";

---

6. Loops

Loops repeat code multiple times.

---

for Loop

for (let i = 0; i < 5; i++) {
  console.log(i);
}

---

while Loop

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

---

do...while

Runs at least once.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

---

for...of

Used for arrays.

const arr = [1, 2, 3];

for (const item of arr) {
  console.log(item);
}

---

for...in

Used for objects.

const user = {
  name: "Dipak",
  age: 24,
};

for (const key in user) {
  console.log(key);
}

---

7. Functions

Functions are reusable blocks of code.

---

Normal Function

function greet() {
  console.log("Hello");
}

greet();

---

Function with Parameters

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

---

Arrow Function

Short syntax introduced in ES6.

const add = (a, b) => a + b;

---

Anonymous Function

Function without a name.

const greet = function () {
  console.log("Hi");
};

---

Callback Function

Function passed into another function.

function greet(name, callback) {
  console.log(name);
  callback();
}

greet("Dipak", function () {
  console.log("Done");
});

---

8. Arrays

Arrays store multiple values.

const fruits = ["Apple", "Banana", "Mango"];

---

Common Array Methods

push()

Adds item at end.

fruits.push("Orange");

---

pop()

Removes last item.

fruits.pop();

---

shift()

Removes first item.

fruits.shift();

---

unshift()

Adds item at beginning.

fruits.unshift("Grapes");

---

map()

Returns new array.

const nums = [1, 2, 3];

const doubled = nums.map((n) => n * 2);

---

filter()

Filters data.

const nums = [1, 2, 3, 4];

const even = nums.filter((n) => n % 2 === 0);

---

9. Objects

Objects store data in key-value pairs.

const user = {
  name: "Dipak",
  age: 24,
};

---

Access Object Values

console.log(user.name);
console.log(user["age"]);

---

Add New Property

user.city = "Kolkata";

---

Delete Property

delete user.age;

---

10. Scope

Scope defines where variables are accessible.

---

Global Scope

let name = "Dipak";

function test() {
  console.log(name);
}

---

Function Scope

function demo() {
  let age = 20;
}

// console.log(age); // Error

---

Block Scope

if (true) {
  let city = "Kolkata";
}

// console.log(city); // Error

---

11. Hoisting

JavaScript moves declarations to the top before execution.

---

var Hoisting

console.log(a);

var a = 10;

Internally:

var a;

console.log(a); // undefined

a = 10;

---

let and const

console.log(b);

let b = 20;

This gives:

ReferenceError;

Because of the Temporal Dead Zone (TDZ).

---

12. Template Literals

Used for dynamic strings.

Uses backticks ` `.

const name = "Dipak";

console.log(`Hello ${name}`);

---

Multi-line Strings

const msg = `
Hello
Welcome
`;

---

13. Difference Between == and ===

== (Loose Equality)

Checks value only.

"5" == 5; // true

JavaScript converts types automatically.

---

=== (Strict Equality)

Checks value and type.

"5" === 5; // false

---

Interview Tips

Frequently Asked Topics

• Hoisting
• Scope
• Closures
• Array methods
• Objects
• Event loop
• Promises
• this keyword
• DOM
• Async/Await

---

Best Practice

• Prefer const by default
• Use let when value changes
• Avoid var
• Always use ===
• Write small reusable functions