Skip to main content

1. JavaScript Foundations (ES6+)

JavaScript is the language of the web, powering everything from simple websites to complex web apps, servers, games, and even AI. Mastering its foundations is essential for any modern developer. This guide covers the most important concepts, with clear explanations, annotated code, and real-world best practices.

1.1 Introduction​

What is JavaScript?​

JavaScript is a high-level, interpreted programming language that runs in browsers and on servers (Node.js). It enables interactive, dynamic web pages and is the backbone of modern web development.

Why JavaScript is Important​

  • Ubiquitous: Runs everywhere (browsers, servers, mobile, IoT)
  • Versatile: Build UIs, APIs, games, automation, and more
  • Community: Huge ecosystem, libraries, and frameworks

What Can JavaScript Do?​

  • Web: Interactive sites, SPAs (React, Vue, Angular)
  • Server: APIs, real-time apps (Node.js)
  • Mobile: Hybrid apps (React Native, Ionic)
  • AI & Data: ML libraries (TensorFlow.js)
  • Games: 2D/3D (Phaser, Three.js)

1.2 Getting Started​

Linking JavaScript​

Add JS to your HTML using the <script> tag:

<script src="main.js"></script>

Tip: Place scripts at the end of <body> for better performance.

Running JavaScript in the Browser Console​

Open DevTools (F12 or Ctrl+Shift+I) and use the Console tab to run JS interactively:

console.log('Hello, world!');

1.3 Variables & Keywords​

var, let, const​

  • var: Function-scoped, hoisted, avoid in modern code
  • let: Block-scoped, re-assignable (use for variables that change)
  • const: Block-scoped, cannot be re-assigned (use for constants)
let age = 25;
const name = 'Alice';
var legacy = 'old';

Variable Hoisting​

var declarations are hoisted (moved to the top of their scope), but not their values:

console.log(x); // undefined
var x = 10;

let and const are not accessible before declaration (Temporal Dead Zone):

console.log(y); // ReferenceError
let y = 5;

Scope Basics​

  • Global Scope: Accessible everywhere
  • Function Scope: Created with var
  • Block Scope: Created with let and const
if (true) {
	let blockVar = 'inside';
}
// console.log(blockVar); // ReferenceError

1.4 Logging & Interaction​

Console Methods​

  • console.log(): General output
  • console.info(): Informational messages
  • console.warn(): Warnings
console.log('Normal log');
console.info('Info message');
console.warn('Warning!');

User Interaction​

  • alert(): Show a popup
  • prompt(): Get user input
alert('Welcome!');
const name = prompt('What is your name?');
console.log('Hello, ' + name);

1.5 Data Types​

Primitive Types​

  • number: 42, 3.14
  • string: 'hello', "world"
  • boolean: true, false
  • undefined: Declared but not assigned
  • null: Explicitly empty
  • symbol: Unique, rarely used
let n = 10;
let s = 'text';
let flag = false;
let u;
let empty = null;
let sym = Symbol('id');

Reference Types​

  • object: Key-value pairs
  • array: Ordered list (actually an object)
let obj = { name: 'Bob', age: 30 };
let arr = [1, 2, 3];

Special Values​

  • NaN: Not a Number
  • Infinity: Result of dividing by zero
console.log(0/0); // NaN
console.log(1/0); // Infinity

1.6 Statements & Expressions​

Statements​

Perform actions (e.g., if, for, let x = 5;).

Expressions​

Produce values (e.g., 2 + 2, x > 5).

Statement vs Expression​

You can use expressions inside statements:

let sum = 2 + 2; // Expression inside a statement

Semicolons​

JS automatically inserts semicolons, but omitting them can cause bugs. Best practice: always use semicolons.

Comments​

  • Single-line: // comment
  • Multi-line: /* comment */

1.7 Operators​

Arithmetic Operators​

let a = 5 + 2; // 7
let b = 10 - 3; // 7
let c = 4 * 2; // 8
let d = 8 / 2; // 4
let e = 9 % 2; // 1

Assignment Operators​

let x = 10;
x += 5; // 15
x -= 3; // 12

Increment / Decrement​

let i = 0;
i++; // 1
i--; // 0

Comparison Operators​

console.log(2 == '2'); // true (loose equality)
console.log(2 === '2'); // false (strict equality)
console.log(3 != 4); // true
console.log(3 !== '3'); // true

Logical Operators​

let isAdult = age > 18 && hasID;
let canDrive = hasLicense || hasPermit;
let notReady = !isReady;

Bitwise Operators​

Rarely used in web dev, but useful for low-level tasks.

let bit = 5 & 1; // 1

Next: Strings in JavaScript