Skip to content

README.md

Latest commit

 

History

History
779 lines (571 loc) · 14.2 KB

README.md

File metadata and controls

779 lines (571 loc) · 14.2 KB
Raw

JavaScript Reference

A structured and practical JavaScript reference designed to help students and developers learn, review, and revisit modern JavaScript concepts.

The project starts with JavaScript fundamentals and progressively covers functions, asynchronous programming, object-oriented programming, modern ES6+ features, the DOM, and browser APIs through the BOM.

The goal is not only to memorize syntax, but to understand how JavaScript works, why a feature exists, when to use it, and what problems it solves.

What Is This Project?

JavaScript Reference is a long-term learning and reference repository organized by topic rather than by isolated tutorials.

It is designed for:

  • Learning JavaScript from fundamentals
  • Reviewing concepts after a period away from JavaScript
  • Understanding modern JavaScript features
  • Building a strong foundation for React and Next.js
  • Revisiting browser concepts such as the DOM and BOM
  • Preparing for technical interviews
  • Keeping practical examples and explanations in one place

The repository focuses on JavaScript and the Web Platform without trying to replace framework-specific documentation.

Learning Philosophy

This project follows a progression from basic language concepts to browser-level APIs.

JavaScript Fundamentals
        ↓
Functions
        ↓
Asynchronous JavaScript
        ↓
Object-Oriented Programming
        ↓
Modern ES6+ Features
        ↓
DOM
        ↓
BOM and Browser APIs
        ↓
Advanced JavaScript
        ↓
Best Practices
        ↓
Projects

Each section builds on knowledge from previous sections.

The purpose is to understand JavaScript as a language first, then understand how JavaScript interacts with the browser.

Repository Structure

.
├── .gitignore
├── GETTING-STARTED.md
├── package.json
├── README.md
│
├── docs/
│   ├── 01-fundamentals/
│   ├── 02-functions/
│   ├── 03-async/
│   ├── 04-oop/
│   ├── 05-es6-features/
│   ├── 06-DOM/
│   ├── 07-BOM/
│   ├── advanced/
│   └── best-practices/
│
├── examples/
└── projects/

Documentation

01 — Fundamentals

Location:

docs/01-fundamentals/

This section establishes the foundation of JavaScript.

Topics include:

  • Introduction to JavaScript
  • Variables
  • Data types
  • Operators
  • Control flow

Files:

00-README.md
01-introduction-to-js.md
02-variables.md
03-data-types.md
04-operators.md
05-control-flow.md

This section should be understood before moving deeply into the later topics.

02 — Functions

Location:

docs/02-functions/

Functions are one of the most important concepts in JavaScript.

Topics include:

  • Function declarations and expressions
  • Arrow functions
  • Higher-order functions
  • Scope
  • Closures

Files:

00-README.md
01-functions.md
02-arrow-functions.md
03-higher-order-functions.md
04-scope-closures.md

Understanding this section is especially important for modern JavaScript and React.

03 — Asynchronous JavaScript

Location:

docs/03-async/

This section covers how JavaScript handles work that does not complete immediately.

Topics include:

  • Callbacks
  • Promises
  • async / await
  • Error handling

Files:

00-README.md
01-callbacks.md
02-promises.md
03-async-await.md
04-error-handling.md

These concepts are essential when working with:

  • APIs
  • fetch
  • React applications
  • Next.js
  • databases
  • server-side operations

04 — Object-Oriented Programming

Location:

docs/04-oop/

This section explores JavaScript's object model and object-oriented programming concepts.

Topics include:

  • Objects
  • Properties and methods
  • this
  • Constructor functions
  • Prototypes
  • Classes
  • Constructors
  • Instance methods
  • Static methods
  • Inheritance
  • Private fields
  • Getters and setters
  • Polymorphism
  • Encapsulation
  • Abstraction
  • Composition
  • OOP best practices

Files:

00-README.md
01-objects.md
02-objects-properties-methods.md
03-this-keyword.md
04-constructor-functions.md
05-prototypes.md
06-classes.md
07-class-constructors.md
08-instance-methods.md
09-static-methods.md
10-inheritance.md
11-private-fields.md
12-getters-setters.md
13-polymorphism.md
14-encapsulation.md
15-abstraction.md
16-composition.md
17-oop-best-practices.md

The goal is not to force every JavaScript problem into an OOP model.

The goal is to understand JavaScript's object system and recognize when object-oriented techniques are useful.

05 — ES6+ and Modern JavaScript

Location:

docs/05-es6-features/

This section covers modern language features that are widely used in contemporary JavaScript codebases.

Topics include:

  • let and const
  • Template literals
  • Destructuring
  • Spread syntax
  • Rest parameters
  • Default parameters
  • Enhanced object literals
  • Computed property names
  • for...of
  • Symbols
  • Iterators
  • Generators
  • Map
  • Set
  • WeakMap
  • WeakSet
  • Object.assign()
  • Modern Promise and async features
  • Modules
  • Optional chaining
  • Nullish coalescing
  • Logical assignment operators
  • BigInt
  • Private class features
  • Modern JavaScript features

Files:

00-README.md
01-let-const.md
02-template-literals.md
03-destructuring.md
04-spread-operator.md
05-rest-parameters.md
06-default-parameters.md
07-enhanced-object-literals.md
08-computed-property-names.md
09-for-of.md
10-symbols.md
11-iterators.md
12-generators.md
13-maps.md
14-sets.md
15-weakmap-weakset.md
16-object-assign.md
17-promise-and-async-features.md
18-modules.md
19-optional-chaining.md
20-nullish-coalescing.md
21-logical-assignment.md
22-bigint.md
23-private-class-features.md
24-modern-javascript-features.md

06 — DOM

Location:

docs/06-DOM/

The DOM section explains how JavaScript interacts with the document structure of a web page.

Topics include:

  • DOM introduction
  • Selecting elements
  • Traversing elements
  • Manipulating content
  • Manipulating attributes
  • Manipulating styles
  • Creating and removing elements
  • Events
  • Event objects
  • Event bubbling and capturing
  • Event delegation
  • Forms and inputs
  • classList
  • dataset
  • Collections and NodeLists
  • Document fragments
  • Observers
  • DOM performance
  • DOM security
  • Practical DOM patterns
  • DOM best practices

Files:

00-README.md
01-dom-introduction.md
02-dom-selecting-elements.md
03-dom-traversing-elements.md
04-dom-manipulating-content.md
05-dom-manipulating-attributes.md
06-dom-manipulating-styles.md
07-dom-creating-and-removing-elements.md
08-dom-events.md
09-dom-event-object.md
10-dom-event-bubbling-and-capturing.md
11-dom-event-delegation.md
12-dom-forms-and-inputs.md
13-dom-classlist.md
14-dom-dataset.md
15-dom-collections-and-nodelist.md
16-dom-fragments.md
17-dom-observers.md
18-dom-performance.md
19-dom-security.md
20-dom-practical-patterns.md
21-dom-best-practices.md

Understanding the DOM is still valuable even when using frameworks such as React because frameworks ultimately interact with the browser platform.

07 — BOM and Browser APIs

Location:

docs/07-BOM/

The BOM section focuses on browser-level capabilities and APIs.

Topics include:

  • window
  • Window properties
  • Window methods
  • location
  • history
  • navigator
  • screen
  • Browser storage
  • Timers
  • Dialog methods
  • URL
  • URLSearchParams
  • Online/offline status
  • Browser events
  • Clipboard API
  • Geolocation API
  • Notifications API
  • Browser security
  • Browser performance
  • Practical browser patterns
  • Browser best practices

Files:

00-README.md
01-window-object.md
02-window-properties.md
03-window-methods.md
04-location-object.md
05-history-object.md
06-navigator-object.md
07-screen-object.md
08-browser-storage.md
09-timers.md
10-dialog-methods.md
11-url-and-urlsearchparams.md
12-online-offline-status.md
13-browser-events.md
14-clipboard-api.md
15-geolocation-api.md
16-notifications-api.md
17-bom-security.md
18-bom-performance.md
19-bom-practical-patterns.md
20-bom-best-practices.md

The BOM section is treated as a practical learning category for browser APIs. Some of the APIs covered here are technically separate Web Platform specifications rather than part of one formal "BOM" specification.

Advanced

Location:

docs/advanced/

This directory is reserved for advanced JavaScript and Web Platform topics that build on the core documentation.

As the reference grows, advanced concepts can be added here without disrupting the main learning path.

Best Practices

Location:

docs/best-practices/

This directory is reserved for broader JavaScript engineering practices.

Topics can include:

  • Code quality
  • Maintainability
  • Naming
  • Error handling
  • Performance
  • Security
  • Architecture
  • Testing
  • Modern JavaScript patterns

These topics complement the language and browser API documentation.

Examples

Location:

examples/

This directory is intended for focused examples that demonstrate concepts from the documentation.

Examples should remain small and understandable.

A good example should answer a specific question rather than become an unnecessarily large application.

Projects

Location:

projects/

This directory is intended for larger practical projects that combine multiple JavaScript concepts.

Projects are different from examples:

Examples
→ Demonstrate one concept or a small group of concepts

Projects
→ Combine concepts to solve a larger problem

Projects provide the transition from studying JavaScript concepts to actually building with them.

How to Use This Repository

The recommended approach is to move through the documentation progressively.

Start with:

01-fundamentals

Then continue through:

02-functions
03-async
04-oop
05-es6-features
06-DOM
07-BOM

After that, explore:

advanced
best-practices
examples
projects

Do not treat the repository as a book that must always be read linearly.

Use it in two different ways.

Learning Mode

Read topics in order and practice each concept before moving forward.

Reference Mode

Search for a specific topic when you need a refresher.

For example:

Need closures?
→ docs/02-functions/04-scope-closures.md

Need Promise concepts?
→ docs/03-async/02-promises.md

Need DOM events?
→ docs/06-DOM/08-dom-events.md

Need localStorage?
→ docs/07-BOM/08-browser-storage.md

Need URLSearchParams?
→ docs/07-BOM/11-url-and-urlsearchparams.md

Relationship to React and Next.js

This repository focuses on JavaScript and browser fundamentals rather than React-specific documentation.

However, many of the concepts are directly relevant to React and Next.js.

Examples:

JavaScript Functions
        ↓
React Components and Callbacks

Closures
        ↓
Hooks and Event Handlers

Promises / async / await
        ↓
API Requests and Server Communication

Objects / Arrays
        ↓
React State and Props

Modules
        ↓
React / Next.js Project Structure

DOM Events
        ↓
React Event Handling

URL / History
        ↓
Client-side Navigation

Browser Storage
        ↓
Theme and Client Preferences

Browser APIs
        ↓
Client-side React and Next.js Features

A strong understanding of JavaScript makes framework learning significantly easier.

Project Goals

The project aims to provide:

  • Clear explanations
  • Practical examples
  • Progressive learning
  • Modern JavaScript coverage
  • Browser fundamentals
  • Security awareness
  • Performance awareness
  • Practical patterns
  • Best practices
  • A long-term personal reference

The repository should remain useful both while learning JavaScript and later when working on real applications.

Documentation Principles

The documentation follows several principles.

Explain the Concept

A topic should explain what a feature is and why it exists.

Show the Syntax

Examples should demonstrate how the feature is actually written.

Explain the Behavior

Understanding what JavaScript does internally or conceptually is more valuable than memorizing syntax.

Show Practical Usage

Examples should reflect realistic development scenarios.

Explain Common Mistakes

Knowing what not to do is part of understanding a feature.

Include Security and Performance Considerations

Browser APIs and JavaScript behavior should be understood in the context of real applications.

Technology Scope

This repository primarily focuses on:

JavaScript
ECMAScript
Web APIs
DOM
BOM
Browser behavior
JavaScript application patterns

Framework-specific technologies such as:

React
Next.js
Vue
Angular
Node.js
Express

are not the primary focus of the core documentation.

They may be mentioned when explaining how JavaScript concepts connect to real development environments.

Code Examples

Examples should remain intentionally readable.

For example:

const user = {
  name: "Osama Abu Motlaq",
  role: "Developer",
};

console.log(user.name);

The purpose of examples is to make the underlying concept clear before introducing additional complexity.

Contributing to the Reference

This repository is primarily a personal learning and reference project, but the structure is intentionally organized so that new topics can be added consistently.

When adding a new topic:

  1. Place it in the appropriate directory.
  2. Follow the existing naming convention.
  3. Explain the concept before advanced usage.
  4. Include practical examples.
  5. Explain common mistakes.
  6. Include security or performance considerations when relevant.
  7. Keep examples focused.
  8. Update the relevant section README when necessary.

License

Unless a separate license file is added, treat the contents of this repository as a personal learning and reference project.

Author

Osama Abu Motlaq

Computer Science student and developer focused on JavaScript, React, and Next.js.

Final Note

This repository is intended to grow over time.

JavaScript evolves, browser APIs evolve, and development practices evolve.

The purpose of this reference is therefore not to become a frozen collection of syntax, but a structured knowledge base that can be continuously improved as new concepts, patterns, and practical experience are added.