# JavaScript Basics — Variables, Types, Operators, Conditions and Loops

Source: https://skills101.in/learn/web-development/javascript-basics — Skills101 free tutorial (Web Development). Updated 2026-11-09.

**JavaScript (JS)** makes web pages interactive — menus, forms, live updates. It also runs on servers through **Node.js**. You can try every example here in the browser console (F12 → Console) or with `node file.js`.

![The full stack: JavaScript runs in the browser (frontend) and, with Node.js, on the server (backend)](https://skills101.in/learn-img/web-development/web-stack.svg)

## 1. Variables: let and const

```javascript
const name = "Asha";      // can't be reassigned
let score = 80;           // can change
score += 15;
console.log(name, score);
console.log(`${name} scored ${score} marks`);   // template literal
```

```text
Asha 95
Asha scored 95 marks
```

- Use **`const` by default**, `let` when the value must change.
- **Avoid `var`** — it ignores block scope and causes surprises.
- Template literals use **backticks** and `${…}`.

## 2. Data types

```javascript
console.log(typeof 42, typeof 3.5, typeof "hi", typeof true);
console.log(typeof undefined, typeof null, typeof [1, 2], typeof { a: 1 });
console.log(0.1 + 0.2, 0.1 + 0.2 === 0.3);
console.log(Number("42") + 1, "42" + 1, "5" * 2);
```

```text
number number string boolean
undefined object object object
0.30000000000000004 false
43 421 10
```

- Primitives: `number`, `string`, `boolean`, `undefined`, `null`, `bigint`, `symbol`.
- Everything else is an **object** (arrays, functions, dates).
- `typeof null` is `"object"` — a famous historical bug.
- `+` with a string **joins** text; other operators convert to numbers.

## 3. == vs ===

```javascript
console.log(5 == "5", 5 === "5");
console.log(0 == false, 0 === false);
console.log(null == undefined, null === undefined);
```

```text
true false
true false
true false
```

`==` converts types before comparing (confusing). **Always use `===`** (strict: same type and value) and `!==`.

## 4. Truthy and falsy

Falsy values: `false`, `0`, `""`, `null`, `undefined`, `NaN`. **Everything else is truthy** — including `"0"`, `[]` and `{}`.

```javascript
const items = [];
console.log(Boolean(""), Boolean("0"), Boolean([]));
const user = null;
console.log(user?.name ?? "Guest");
```

```text
false true true
Guest
```

- `?.` (optional chaining) stops safely if something is null/undefined.
- `??` (nullish coalescing) gives a default only for null/undefined.

## 5. Conditions

```javascript
const marks = 72;
let grade;
if (marks >= 90) grade = "A";
else if (marks >= 60) grade = "B";
else grade = "C";
console.log(grade, marks >= 40 ? "pass" : "fail");
```

```text
B pass
```

`switch` works too (with `break`, like C and Java).

## 6. Loops

```javascript
for (let i = 1; i <= 3; i++) console.log("round", i);

const cities = ["Jaipur", "Pune", "Indore"];
for (const city of cities) console.log(city.toUpperCase());

const marksBy = { maths: 88, dsa: 92 };
for (const subject in marksBy) console.log(subject, marksBy[subject]);

let n = 1;
while (n < 100) n *= 3;
console.log(n);
```

```text
round 1
round 2
round 3
JAIPUR
PUNE
INDORE
maths 88
dsa 92
243
```

- `for…of` → **values** of an array/string.
- `for…in` → **keys** of an object.

## Common mistakes

- Using `==` and getting surprising results.
- Forgetting that `"5" + 1` is `"51"`.
- Using `var` (function-scoped) inside loops and blocks.

## Quick recap

- `const` by default, `let` when needed, no `var`.
- Types: number, string, boolean, undefined, null, object…; `typeof`.
- Always `===`; know the falsy values; use `?.` and `??`.
- for, for…of (values), for…in (keys), while.


Practice quiz and free certificate: https://skills101.in/learn/web-development/javascript-basics