JavaScript 101 Notes

Overview

• JavaScript is both a wonderful and horrible language for beginners.
  • Pros: Can build almost anything and has widespread job opportunities if mastered.
  • Cons: Can be seen as ugly and is surrounded by a confusing array of frameworks and libraries.

History

• Created in 1993 by Brendan Eich at Netscape.
• Initially designed to make static HTML websites interactive.
• Now, it's arguably the most popular programming language in the world.
  • Standard implementation: ECMAScript
  • Only code that natively runs in browsers (besides WebAssembly).

Running JavaScript

• Can run in both browsers and servers (using Node.js and Deno).
• Scripting Language: Executes code on the fly via the console.
• Interpreted line by line, but uses Just-In-Time (JIT) compilation for performance.

Basic Usage

• Use an HTML document with a <script> tag to write JavaScript code.
• Example: console.log('Hello World') to print to the standard output.

Variables

• Common ways to define variables:
  • let: Most common; allows reassignment and is block-scoped.
  • const: For variables that cannot be reassigned; also block-scoped.
  • var: Old way; avoid using as it has function scope and can lead to confusion.
• JavaScript is a dynamically typed language; no data type annotations are required.
• Seven primitive data types: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
• Semicolons: Optional; JavaScript parser adds them automatically.

Functions

• Functions are central to JavaScript; can take arguments and return values.
• Functions are first-class objects; can be treated as variables.
• Functions can create closures, allowing inner functions to access outer function variables even after execution.
• this keyword: Context-dependent; refers to the object from which the function was called.
• Arrow Functions: Do not have their own this, ideal for function expressions.

Objects

• Created via object literal syntax or with constructors using new keyword.
• Objects are collections of key-value pairs and can inherit properties (prototypal inheritance).
• Class keyword: Provides syntactic sugar for prototypal inheritance and encapsulation.

Data Structures

• Built-in data structures include:
  • Array: Dynamic collection of indexed items.
  • Set: Collection of unique items.
  • Map: Key-value pairs, easier to loop over than objects.
• JavaScript is garbage collected to manage memory.

Event Loop and Asynchronous Code

• JavaScript executes code synchronously, line by line, by default.
• Event Loop: Allows for asynchronous code to run alongside synchronous code.
• Callback Functions: Functions that are called at a later time; can lead to callback hell if nested too deeply.
• Promises: Represent values that may be available later; allow chaining with .then() and .catch().
• Async/Await: Syntax to handle asynchronous code; simplifies promise management.

Modules

• Use modules to share code between files.
• Code is private by default; use export to make it available elsewhere.
• npm: Largest JavaScript package manager for downloading packages.

Document Object Model (DOM)

• Represents the UI as a tree of HTML elements.
• Use document.querySelector to select HTML elements.
• Event Listeners: Attach functions to events (e.g., button clicks).

Frontend Frameworks

• Many developers prefer frameworks that produce declarative code over imperative code.
• Frameworks encapsulate JavaScript, HTML, and CSS into components.
  • Data-binding allows UI updates based on data changes.

Bundling and Performance

• Use module bundlers (like Webpack) to combine JavaScript files into a single bundle for the browser.
• Possible to split bundles to optimize loading performance.

Server-Side JavaScript

• Node.js is the most popular runtime for running JavaScript server-side.
• Frameworks like Electron allow for full-stack desktop apps.

Code Quality Tools

• Use tools like TypeScript or ESLint to improve code quality.

Conclusion

• Congratulations on completing JavaScript 101! For further learning, consider checking out the new JavaScript course on Fireship.io which includes hands-on projects and quizzes.