跳到主要内容

JavaScript Basics

JavaScript = dynamic, interpreted, single-threaded language for web


What is JavaScript?​

"The language of the web"

JavaScript is a high-level, interpreted programming language that:

  • Runs in browsers (client-side)
  • Runs on servers (Node.js)
  • Is dynamically typed
  • Supports multiple paradigms (OOP, functional, procedural)

"JavaScript is a dynamic, interpreted language primarily used for web development, supporting both client-side and server-side programming."


Key Characteristics​

Dynamic · Single-threaded · Event-driven

FeatureMeaning
Dynamic typingTypes determined at runtime
Single-threadedOne call stack, one execution
Event-drivenAsynchronous via event loop
Prototype-basedObjects inherit from prototypes
First-class functionsFunctions are values

Data Types​

Primitives + Objects

Primitives (7 types)​

  • string
  • number
  • boolean
  • undefined
  • null
  • symbol (ES6)
  • bigint (ES2020)

Objects​

  • Arrays
  • Functions
  • Objects
  • Dates
  • RegExp

"JavaScript has 7 primitive types and objects, which are reference types."


Variable Declarations​

var = old, let/const = modern

DeclarationScopeHoistingReassignment
varFunctionYesYes
letBlockTemporal dead zoneYes
constBlockTemporal dead zoneNo

"Use const by default, let when reassignment is needed, and avoid var."


Hoisting​

Declarations move to top

  • var and function declarations are hoisted
  • let and const are in temporal dead zone
  • Only declarations hoisted, not initializations

"Hoisting moves variable and function declarations to the top of their scope before execution."


Scope​

Global · Function · Block

  • Global scope: Accessible everywhere
  • Function scope: var scoped to function
  • Block scope: let and const scoped to {}

"Scope determines where variables are accessible, with block scope being preferred for let and const."


Functions​

Function declarations vs expressions

// Declaration (hoisted)
function greet() {}

// Expression (not hoisted)
const greet = function () {};

// Arrow function (ES6)
const greet = () => {};

"Function declarations are hoisted, while expressions and arrow functions are not."


This Keyword​

Context-dependent binding

  • Regular function: this = caller
  • Arrow function: this = lexical (from outer scope)
  • Method: this = object
  • Constructor: this = new instance

"The value of 'this' depends on how a function is called, with arrow functions preserving lexical this."


9️⃣ Closures​

Inner function remembers outer scope

A closure gives you access to an outer function's scope from an inner function.

"Closures allow inner functions to access variables from their outer scope even after the outer function has returned."


Event Loop​

Single thread + async callbacks

  • Call stack executes synchronous code
  • Web APIs handle async operations
  • Callback queue holds callbacks
  • Event loop moves callbacks to stack when stack is empty

"The event loop enables asynchronous behavior in JavaScript's single-threaded environment."


"JavaScript is a dynamic, interpreted, single-threaded language that powers web development. It uses an event loop for asynchronous operations, supports multiple variable declarations (var, let, const), and has function and block scoping. JavaScript is prototype-based, supports closures, and the 'this' keyword behavior depends on function invocation context."


🧠 Ultra-Short Cheat Sheet​

Dynamic typing
Single-threaded + event loop
7 primitives + objects
var/let/const
Hoisting
Scope (global/function/block)
Closures
this binding
Arrow functions