Part 1: What is JavaScript

The Language That Powers the Modern Web

The Birth of JavaScript

Timeline of JavaScript:

1995: JavaScript created at Netscape (originally called "Mocha", then "LiveScript")
1996: Microsoft creates JScript for Internet Explorer
1997: ECMAScript 1 - First standardized specification
1999: ECMAScript 3 - Regular expressions, try/catch
2009: ECMAScript 5 - strict mode, JSON, Array methods
2015: ECMAScript 6 (ES2015) - Classes, modules, arrows, promises
2016+: Yearly releases with incremental improvements

What JavaScript Actually Is

javascript
// JavaScript handles memory automatically
const users = [];
for (let i = 0; i < 1000000; i++) {
    users.push({ id: i, name: `User ${i}` });
}
// Memory is allocated and freed automatically

javascript
let value = 42;        // value is a number
value = "hello";       // now value is a string
value = [1, 2, 3];     // now value is an array
value = { x: 1 };      // now value is an object

javascript
// This code is compiled to machine code by the engine
function hotFunction(n) {
    let sum = 0;
    for (let i = 0; i < n; i++) {
        sum += i;
    }
    return sum;
}

// Called many times, the engine optimizes it
for (let i = 0; i < 10000; i++) {
    hotFunction(1000);
}

javascript
// Procedural
function processData(data) {
    let result = [];
    for (let item of data) {
        result.push(item * 2);
    }
    return result;
}

// Object-Oriented
class Calculator {
    constructor() {
        this.result = 0;
    }

    add(n) {
        this.result += n;
        return this;
    }
}

// Functional
const double = x => x * 2;
const doubled = [1, 2, 3].map(double);

javascript
const animal = {
    speak() {
        console.log(`${this.name} makes a sound`);
    }
};

const dog = Object.create(animal);
dog.name = "Rex";
dog.speak(); // "Rex makes a sound"

ECMAScript: The Standard

ECMAScript vs JavaScript:

┌─────────────────────────────────────────────────────────┐
│                     ECMAScript                          │
│              (The Language Specification)               │
│                                                         │
│   Defines: syntax, types, statements, operators,       │
│            objects, functions, etc.                     │
└─────────────────────────────────────────────────────────┘
                            │
                            ▼
    ┌───────────────────────┼───────────────────────┐
    │                       │                       │
    ▼                       ▼                       ▼
┌─────────┐           ┌─────────┐            ┌─────────┐
│JavaScript│          │  JScript │           │ActionScript│
│(Browsers,│          │   (IE)   │           │  (Flash)   │
│ Node.js) │          │(obsolete)│           │ (obsolete) │
└─────────┘           └─────────┘            └─────────┘

Key ECMAScript Versions

javascript
"use strict";

// Array methods
[1, 2, 3].forEach(function(item) {
    console.log(item);
});

// JSON built-in
const json = JSON.stringify({ name: "John" });

// Object methods
Object.keys({ a: 1, b: 2 }); // ["a", "b"]

javascript
// Arrow functions
const add = (a, b) => a + b;

// Classes
class Person {
    constructor(name) {
        this.name = name;
    }
}

// Template literals
const greeting = `Hello, ${name}!`;

// Destructuring
const { x, y } = point;
const [first, second] = array;

// let and const
let mutable = 1;
const immutable = 2;

// Promises
fetch(url).then(response => response.json());

// Modules
import { something } from './module.js';
export const value = 42;

javascript
// async/await (ES2017)
async function fetchData() {
    const response = await fetch(url);
    return response.json();
}

// Object spread (ES2018)
const merged = { ...obj1, ...obj2 };

// Optional chaining (ES2020)
const value = obj?.nested?.property;

// Nullish coalescing (ES2020)
const result = value ?? 'default';

// Private class fields (ES2022)
class Counter {
    #count = 0;
    increment() { this.#count++; }
}

JavaScript Engines

Major JavaScript Engines:

┌─────────────────────────────────────────────────────────┐
│                         V8                               │
│   Developer: Google                                      │
│   Used in: Chrome, Node.js, Edge, Electron              │
│   Written in: C++                                        │
│   Features: JIT compilation, hidden classes,             │
│             inline caching                               │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│                    SpiderMonkey                          │
│   Developer: Mozilla                                     │
│   Used in: Firefox                                       │
│   Written in: C++, Rust                                  │
│   Features: First JS engine ever, IonMonkey JIT         │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│                   JavaScriptCore                         │
│   Developer: Apple                                       │
│   Used in: Safari, iOS browsers                          │
│   Written in: C++                                        │
│   Features: FTL JIT, concurrent GC                      │
└─────────────────────────────────────────────────────────┘

How Engines Execute Code

JavaScript Execution Pipeline:

Source Code
     │
     ▼
┌─────────────┐
│   Parser    │  → Reads code, creates tokens
└─────────────┘
     │
     ▼
┌─────────────┐
│    AST      │  → Abstract Syntax Tree
└─────────────┘
     │
     ▼
┌─────────────┐
│ Interpreter │  → Quick execution (Ignition in V8)
└─────────────┘
     │
     ▼ (hot code)
┌─────────────┐
│ JIT Compiler│  → Optimized machine code (TurboFan in V8)
└─────────────┘
     │
     ▼
  Execution

javascript
// Example: What the engine sees

// Your code:
function add(a, b) {
    return a + b;
}

// AST (simplified):
{
    type: "FunctionDeclaration",
    name: "add",
    params: ["a", "b"],
    body: {
        type: "ReturnStatement",
        argument: {
            type: "BinaryExpression",
            operator: "+",
            left: { type: "Identifier", name: "a" },
            right: { type: "Identifier", name: "b" }
        }
    }
}

Runtime Environments

Browser Runtime

Browser Runtime Environment:

┌─────────────────────────────────────────────────────────┐
│                    Your JavaScript                       │
├─────────────────────────────────────────────────────────┤
│           JavaScript Engine (V8, SpiderMonkey)          │
├─────────────────────────────────────────────────────────┤
│                      Web APIs                            │
│   ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
│   │   DOM   │ │  Fetch  │ │ Timers  │ │ Storage │      │
│   └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
│   ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
│   │  Canvas │ │ WebGL   │ │Web Audio│ │WebSocket│      │
│   └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
├─────────────────────────────────────────────────────────┤
│                Event Loop / Task Queue                   │
└─────────────────────────────────────────────────────────┘

javascript
// Browser-specific APIs
document.getElementById('app');           // DOM
fetch('https://api.example.com');        // Network
localStorage.setItem('key', 'value');    // Storage
new WebSocket('wss://socket.example.com'); // Real-time
navigator.geolocation.getCurrentPosition(); // Device

Node.js Runtime

Node.js Runtime Environment:

┌─────────────────────────────────────────────────────────┐
│                    Your JavaScript                       │
├─────────────────────────────────────────────────────────┤
│                    V8 Engine                             │
├─────────────────────────────────────────────────────────┤
│                   Node.js APIs                           │
│   ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
│   │   fs    │ │   http  │ │  path   │ │  crypto │      │
│   └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
│   ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
│   │ process │ │  Buffer │ │ stream  │ │  child  │      │
│   └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
├─────────────────────────────────────────────────────────┤
│                    libuv (Event Loop)                    │
└─────────────────────────────────────────────────────────┘

javascript
// Node.js-specific APIs
const fs = require('fs');
fs.readFileSync('./file.txt');           // File system

const http = require('http');
http.createServer((req, res) => {});     // HTTP server

process.env.NODE_ENV;                     // Environment
Buffer.from('Hello');                     // Binary data

Other Runtimes

javascript
// Deno - Secure runtime by Node.js creator
Deno.readTextFile('./file.txt');

// Bun - Fast JavaScript runtime
Bun.file('./file.txt').text();

// React Native - Mobile apps
import { View, Text } from 'react-native';

// Electron - Desktop apps
const { app, BrowserWindow } = require('electron');

JavaScript's Unique Characteristics

Single-Threaded with Concurrency

javascript
console.log('1');

setTimeout(() => {
    console.log('2');
}, 0);

console.log('3');

// Output: 1, 3, 2
// Even with 0ms delay, setTimeout is asynchronous

First-Class Functions

javascript
// Functions as values
const greet = function(name) {
    return `Hello, ${name}!`;
};

// Functions as arguments
function execute(fn, value) {
    return fn(value);
}

execute(greet, 'World'); // "Hello, World!"

// Functions returning functions
function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplier(2);
double(5); // 10

Prototype-Based Inheritance

javascript
// Creating inheritance
const parent = {
    greet() {
        return `Hello, I'm ${this.name}`;
    }
};

const child = Object.create(parent);
child.name = 'Alice';
child.greet(); // "Hello, I'm Alice"

// Checking the prototype chain
Object.getPrototypeOf(child) === parent; // true

Dynamic Typing

javascript
function process(value) {
    // Type checking at runtime
    if (typeof value === 'string') {
        return value.toUpperCase();
    } else if (typeof value === 'number') {
        return value * 2;
    } else if (Array.isArray(value)) {
        return value.length;
    }
    return null;
}

process('hello');  // "HELLO"
process(21);       // 42
process([1,2,3]);  // 3

Your First JavaScript Program

In the Browser

html
<!DOCTYPE html>
<html>
<head>
    <title>First JavaScript</title>
</head>
<body>
    <h1 id="greeting"></h1>

    <script>
        // This JavaScript runs in the browser
        const name = 'World';
        const greeting = `Hello, ${name}!`;

        // Manipulate the DOM
        document.getElementById('greeting').textContent = greeting;

        // Log to console
        console.log('Script executed!');
        console.log('Page title:', document.title);
    </script>
</body>
</html>

In the Browser Console

javascript
// Try these in the console
console.log('Hello from the console!');

// Basic math
2 + 2

// Variables
let x = 10;
x * 2

// Objects
const person = { name: 'John', age: 30 };
person.name

// Functions
function square(n) { return n * n; }
square(5)

// Arrays
const numbers = [1, 2, 3, 4, 5];
numbers.map(n => n * 2)

// DOM interaction
document.body.style.backgroundColor = 'lightblue';

In Node.js

javascript
// hello.js
console.log('Hello from Node.js!');

// Node.js provides process object
console.log('Node version:', process.version);
console.log('Current directory:', process.cwd());
console.log('Arguments:', process.argv);

// Environment variables
console.log('PATH:', process.env.PATH);

node hello.js

JavaScript Syntax Basics

Statements and Expressions

javascript
// Statements - perform actions
let x = 5;              // Declaration statement
if (x > 0) { }          // Control flow statement
function foo() { }      // Function declaration statement

// Expressions - produce values
5 + 3                   // Arithmetic expression
x > 0                   // Boolean expression
x = 10                  // Assignment expression (also statement)
foo()                   // Function call expression

// Expression statements
x++;                    // Expression used as statement
console.log('Hi');      // Expression used as statement

Semicolons

javascript
// Explicit semicolons (recommended)
const a = 1;
const b = 2;

// Automatic Semicolon Insertion (ASI)
const c = 1
const d = 2

// But ASI can cause problems:
function getValue() {
    return
    {
        value: 42
    }
}
getValue(); // undefined, not { value: 42 }!

// Because it's interpreted as:
function getValue() {
    return;  // ASI inserts semicolon here!
    {
        value: 42
    };
}

Comments

javascript
// Single-line comment

/*
   Multi-line
   comment
*/

/**
 * JSDoc comment
 * @param {string} name - The name to greet
 * @returns {string} The greeting message
 */
function greet(name) {
    return `Hello, ${name}!`;
}

Summary

• A high-level, dynamic, multi-paradigm programming language
• Standardized as ECMAScript, with yearly updates
• Executed by engines like V8, SpiderMonkey, and JavaScriptCore
• Runs in multiple environments: browsers, Node.js, Deno, Bun, and more
• Single-threaded with event-driven concurrency
• Prototype-based with first-class functions

• ECMAScript is the standard, JavaScript is the implementation
• JavaScript engines compile and optimize your code
• Runtime environments provide APIs beyond the language itself
• JavaScript's flexibility enables multiple programming paradigms

Questions to Think About

1. Why is JavaScript single-threaded, and how does it handle concurrent operations?

2. What's the difference between JavaScript and ECMAScript?

3. Why do different browsers sometimes behave differently with JavaScript?

4. How does JavaScript's dynamic typing differ from static typing?

5. Why is understanding JavaScript internals important?