Back to Topics

Basics of JavaScript — Part 1

JavaScript Fundamentals

Core language essentials for CSA/CAD preparation
Part 2: DOM Basics

📚 History of JavaScript

Timeline of JavaScript Evolution

1995 - Birth of JavaScript

Brendan Eich created JavaScript in just 10 days at Netscape Communications. Originally called "Mocha", then "LiveScript", finally renamed to "JavaScript" for marketing reasons.

1997 - ECMAScript Standard

JavaScript was standardized as ECMAScript (ES1) by ECMA International to ensure compatibility across different browsers.

2009 - Node.js Revolution

Ryan Dahl created Node.js, bringing JavaScript to server-side development and enabling full-stack JavaScript applications.

Node.js revolutionized web development by allowing developers to use JavaScript for both frontend and backend, creating the foundation for modern full-stack development.

Ryan Dahl
Ryan Dahl

Creator of Node.js

2015 - ES6/ES2015

Major update introducing classes, modules, arrow functions, promises, and many other modern features that transformed JavaScript development.

2015-Present - Annual Releases

ECMAScript now follows an annual release cycle (ES2016, ES2017, ES2018, etc.) with continuous improvements and new features.

Creator of JavaScript
Brendan Eich
Brendan Eich

Creator of JavaScript (1995)

Co-founder of Mozilla

Key Milestones
  • 1995JavaScript Created
  • 1997ECMAScript Standard
  • 2005AJAX Revolution
  • 2009Node.js Launch
  • 2010npm Package Manager
  • 2015ES6/ES2015
  • 2020ES2020 Features

⚙️ JavaScript Engines

JavaScript engines are programs that execute JavaScript code. Each browser and runtime environment uses different engines with unique optimizations and features.

Major JavaScript Engines

Engine Used In Developer Language
V8 Chrome, Node.js, Edge Google C++
SpiderMonkey Firefox Mozilla C++
JavaScriptCore Safari, WebKit Apple C++
Chakra Internet Explorer, Legacy Edge Microsoft C++

Engine Architecture

How JavaScript Engines Work:
  1. Parsing: Source code → Abstract Syntax Tree (AST)
  2. Compilation: AST → Bytecode/Machine Code
  3. Optimization: Just-In-Time (JIT) compilation
  4. Execution: Running optimized code
  5. Garbage Collection: Memory management
V8 Engine Features:
  • Hidden Classes: Optimize object property access
  • Inline Caching: Speed up method calls
  • Crankshaft/TurboFan: Optimizing compilers
  • Ignition: Interpreter for faster startup

🌐 Client-side vs Server-side JavaScript

🖥️ Client-side JavaScript

Environment & Runtime:
  • Runs in: Web browsers (Chrome, Firefox, Safari, Edge)
  • Engine: Browser's JavaScript engine
  • Sandbox: Restricted environment for security
  • DOM Access: Can manipulate HTML/CSS
Capabilities:
  • DOM manipulation and event handling
  • AJAX requests and fetch API
  • Local storage and session storage
  • Geolocation and device APIs
  • Canvas and WebGL graphics
  • Service workers and PWAs
Limitations:
  • No file system access
  • No direct database connections
  • Same-origin policy restrictions
  • Limited system resource access

🖧 Server-side JavaScript (Node.js)

Environment & Runtime:
  • Runs in: Server environments (Linux, Windows, macOS)
  • Engine: V8 engine (same as Chrome)
  • Full Access: Complete system access
  • No DOM: No browser-specific APIs
Capabilities:
  • File system operations
  • Database connections
  • Network programming
  • Process management
  • Package management (npm)
  • Build tools and automation
Advantages:
  • Single language for full-stack
  • Large ecosystem (npm)
  • High performance (V8 engine)
  • Event-driven, non-blocking I/O

Code Examples: Environment Differences

🚀 Introduction to JavaScript

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web. It enables interactive web pages and is an essential part of web applications.

Key Characteristics:

  • Dynamic: Variables can change types at runtime
  • Interpreted: No compilation step required
  • Multi-paradigm: Supports OOP, functional, and procedural programming
  • Prototype-based: Objects can inherit directly from other objects
  • Event-driven: Responds to user interactions and system events
  • Weakly typed: Automatic type conversion

Modern JavaScript Features:

  • ES6+ Syntax: Arrow functions, classes, modules
  • Async Programming: Promises, async/await
  • Destructuring: Extract values from arrays/objects
  • Template Literals: String interpolation
  • Spread/Rest Operators: Flexible function parameters
  • Modules: Import/export functionality

JavaScript Instructions and Statements

JavaScript programs are composed of statements that are executed by the browser. Each statement performs an action.

Basic Syntax Rules:

  • Statements end with semicolons (;)
  • JavaScript is case-sensitive
  • Whitespace is generally ignored
  • Use camelCase for variable names
Output:
Hello, World!
Welcome to JavaScript!

Comments in JavaScript

Comments are used to explain code and make it more readable. They are ignored by the JavaScript engine.

Types of Comments:

  • Single-line comments: Use // for single line
  • Multi-line comments: Use /* */ for multiple lines

📦 Variables and Scope

Variables are containers for storing data values. JavaScript has evolved from var to modern let and const declarations with different scoping rules.

var (Legacy)
  • Scope: Function/Global
  • Hoisting: Yes (undefined)
  • Redeclaration: Allowed
  • Reassignment: Allowed
  • TDZ: No
let (ES6+)
  • Scope: Block
  • Hoisting: Yes (not accessible)
  • Redeclaration: Not allowed
  • Reassignment: Allowed
  • TDZ: Yes
const (ES6+)
  • Scope: Block
  • Hoisting: Yes (not accessible)
  • Redeclaration: Not allowed
  • Reassignment: Not allowed
  • TDZ: Yes
🔍 Key Concepts:
  • Hoisting: Variable declarations are moved to the top of their scope
  • Temporal Dead Zone (TDZ): Period where let/const variables exist but can't be accessed
  • Block Scope: Variables are only accessible within the nearest enclosing block
  • Function Scope: Variables are accessible throughout the entire function

Variable Declaration Examples

Output:
John
30
true

Scope and Hoisting Examples

🏷️ Data Types and Type System

JavaScript is a dynamically typed language with weak typing, meaning variables can hold different types of values and automatic type conversion occurs.

Primitive Types (7 types)
  • Number: 42, 3.14, NaN, Infinity, -Infinity
  • String: "Hello", 'World', `Template ${var}`
  • Boolean: true, false
  • Undefined: Variable declared but not assigned
  • Null: Intentional absence of value
  • Symbol: Symbol('id') - Unique identifier (ES6)
  • BigInt: 123n - Large integers (ES2020)
Non-Primitive Types (1 type)
  • Object: Collection of key-value pairs
  • • Plain objects: {name: "John"}
  • • Arrays: [1, 2, 3]
  • • Functions: function() {}
  • • Dates: new Date()
  • • RegExp: /pattern/
  • • Maps, Sets, WeakMap, WeakSet
⚠️ Type Checking Gotchas:
  • typeof null returns "object" (historical bug)
  • typeof [] returns "object" (arrays are objects)
  • typeof NaN returns "number"
  • Array.isArray([]) to check for arrays
  • Number.isNaN(NaN) to check for NaN
  • value === null to check for null

Basic Data Types Examples

Output:
number
string
boolean
undefined
object
object

Type Conversion and Coercion

Modern Type Checking

📋 Arrays and Array Methods

Arrays are ordered collections that can hold multiple values of any type. JavaScript arrays are dynamic and provide powerful built-in methods.

Mutating Methods
  • push(): Add to end
  • pop(): Remove from end
  • shift(): Remove from start
  • unshift(): Add to start
  • splice(): Add/remove at index
  • sort(): Sort in place
  • reverse(): Reverse in place
Non-Mutating Methods
  • slice(): Extract portion
  • concat(): Join arrays
  • join(): Convert to string
  • indexOf(): Find index
  • includes(): Check existence
  • toString(): Convert to string
🚀 Modern Array Methods (ES5+)
  • map(): Transform each element
  • filter(): Filter elements
  • reduce(): Reduce to single value
  • find(): Find first match
  • forEach(): Execute for each
  • some(): Test if any match
  • every(): Test if all match
  • findIndex(): Find index of match

Basic Array Operations

Output:
["apple", "banana", "orange"]
3
banana
["apple", "banana", "orange", "grape"]
grape
["apple", "banana", "orange"]

Modern Array Methods

Array Destructuring & Spread

🧮 JavaScript Operators

This table summarizes the main operator categories with brief examples and expected results.

Category Operators Example Result / Notes
Arithmetic + - * / % ** 3 + 2 5 (basic math; % is remainder; ** is exponent)
Assignment = += -= *= /= %= **= let x = 5; x += 3; x becomes 8
Comparison == != === !== > >= < <= 5 === '5' false (=== checks type and value; avoid == quirks)
Logical && || ! true && false false (short-circuit evaluation)
Bitwise & | ^ ~ << >> >>> 5 & 3 1 (operates on 32-bit integers)
Unary + (unary), - (unary), ++, -- +"5" 5 (string to number coercion)
Type / Property typeof, in, instanceof typeof 'hi' "string"; 'key' in obj, arr instanceof Array
Conditional ?: (ternary) isAdmin ? 'Yes' : 'No' Returns one of two values based on condition
Nullish / Optional ??, ?. null ?? 'default' Returns fallback when left side is null or undefined; user?.profile?.name
Spread / Rest ... [1, ...[2,3]] Expands or collects values (arrays/objects/functions)
Delete / Void delete, void delete obj.key Removes a property; void 0 yields undefined
String Concatenation + 'a' + 'b' "ab" (use template literals for readability)
Comma , (a = 1, b = 2, b) Evaluates left→right, returns last expression

Strings

Strings are used to represent text data. They can be created using single quotes, double quotes, or template literals.

String Methods:

  • length - Get string length
  • toUpperCase() - Convert to uppercase
  • toLowerCase() - Convert to lowercase
  • charAt() - Get character at index
  • indexOf() - Find substring index
  • slice() - Extract portion of string
  • split() - Split string into array
  • replace() - Replace substring
Output:
13
HELLO, WORLD!
hello, world!
H
7
Hello
Hi, World!

⚡ Functions and Modern JavaScript

Functions are first-class citizens in JavaScript - they can be stored in variables, passed as arguments, and returned from other functions.

Function Declaration
function name() {}
  • Hoisted
  • Can be called before definition
  • Has function scope
Function Expression
const name = function() {}
  • Not hoisted
  • Anonymous or named
  • Block scope (with const/let)
Arrow Function (ES6)
const name = () => {}
  • Lexical 'this' binding
  • Shorter syntax
  • No 'arguments' object
🔥 Modern Function Features
  • Default Parameters: function(a = 5)
  • Rest Parameters: function(...args)
  • Destructuring: function({name, age})
  • Higher-Order Functions: Functions that take/return functions
  • Closures: Inner functions accessing outer scope
  • IIFE: Immediately Invoked Function Expression

Basic Function Examples

Output:
Hello, Alice!
8
25
15

Modern Function Features

Higher-Order Functions & Closures

Objects and Methods

Objects are collections of key-value pairs. They can contain properties (data) and methods (functions).

Object Features:

  • Properties store data
  • Methods are functions inside objects
  • Access using dot notation or bracket notation
  • Can be created using object literals or constructors
Output:
John
30
Hello, my name is John and I am 30 years old.
31

Decisions and Loops

Control structures allow you to control the flow of your program execution.

Decision Structures:
  • if...else - Conditional execution
  • switch - Multiple condition checking
  • ternary operator - Shorthand conditional
Loop Structures:
  • for - Known number of iterations
  • while - Condition-based loop
  • do...while - Execute at least once
  • for...in - Iterate over object properties
Output:
You are an adult.
Good morning!
adult
0 1 2 3 4
5 4 3 2 1
name: John
age: 30

🚀 ES6+ Modern JavaScript Features

ECMAScript 2015 (ES6) and later versions introduced many powerful features that modernized JavaScript development.

ES6 (2015) Features
  • let/const: Block-scoped variables
  • Arrow Functions: Concise function syntax
  • Template Literals: String interpolation
  • Destructuring: Extract values from arrays/objects
  • Spread/Rest: ... operator
  • Classes: Class-based OOP syntax
  • Modules: import/export
  • Promises: Async programming
ES2017+ Features
  • async/await: Cleaner async code
  • Object.entries/values: Object iteration
  • Optional Chaining: ?. operator (ES2020)
  • Nullish Coalescing: ?? operator (ES2020)
  • BigInt: Large integers (ES2020)
  • Dynamic Imports: import() function
  • Private Fields: # syntax (ES2022)
  • Top-level await: (ES2022)
💡 Key Benefits of Modern JavaScript
  • Cleaner Syntax: More readable and concise code
  • Better Scoping: Block scope with let/const
  • Async Handling: Promises and async/await
  • Modularity: ES6 modules for better organization
  • Performance: Optimizations in modern engines
  • Developer Experience: Better tooling support

Template Literals & Destructuring

Classes & Modules

Async/Await & Modern Operators

Back to Home Next: Unit 2 - DOM Manipulation