JavaScript Language Reference

This comprehensive reference covers the complete JavaScript language specification, from basic syntax to advanced features.

Core Language Features

Lexical Structure

Data Types and Values

Primitive Types
- Number, String, Boolean, Symbol, BigInt
- null and undefined
Objects and References
Type Conversion

Variables and Scope

Functions

Classes and Objects

Control Flow

Modules

Asynchronous JavaScript

ECMAScript Versions

ES2024 (ES15)

Array Grouping
Promise.withResolvers()
Regular Expression v flag
Atomics.waitAsync()

ES2023 (ES14)

Array.findLast() and findLastIndex()
Hashbang Grammar
Symbols as WeakMap keys
Change Array by copy methods

ES2022 (ES13)

Top-level await
Private class fields
Static class fields
RegExp match indices
Array.at() method

ES2021 (ES12)

String.replaceAll()
Promise.any()
Logical assignment operators
Numeric separators
WeakRefs and FinalizationRegistry

ES2020 (ES11)

BigInt primitive type
Optional chaining (?.)
Nullish coalescing (??)
Dynamic imports
globalThis object

ES2019 (ES10)

Array.flat() and flatMap()
Object.fromEntries()
String.trimStart() and trimEnd()
Optional catch binding
Symbol.description

ES2018 (ES9)

Async iteration
Rest/spread for objects
Promise.finally()
RegExp improvements
Template literal revision

ES2017 (ES8)

Async functions
Shared memory and atomics
Object.values() and entries()
String padding methods
Object.getOwnPropertyDescriptors()

ES2016 (ES7)

Exponentiation operator (**)
Array.includes()

ES2015 (ES6)

Classes
Modules
Arrow functions
Template literals
Destructuring
Default parameters
Rest and spread
let and const
Promises
Maps and Sets
Symbols
Iterators and generators

Advanced Topics

Memory Management

// Understanding garbage collection
let obj = { data: new Array(1000000) };
obj = null; // Makes object eligible for GC

// WeakMap for memory-conscious caching
const cache = new WeakMap();
function expensiveOperation(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = /* expensive computation */;
  cache.set(obj, result);
  return result;
}

Performance Optimization

// Avoid creating functions in loops
// Bad
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    console.log(i);
  });
}

// Good
function handleClick(index) {
  return function() {
    console.log(index);
  };
}
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', handleClick(i));
}

Metaprogramming

// Proxies for advanced object behavior
const target = {};
const proxy = new Proxy(target, {
  get(obj, prop) {
    return prop in obj ? obj[prop] : `Property ${prop} doesn't exist`;
  },
  set(obj, prop, value) {
    if (typeof value === 'string') {
      obj[prop] = value.toUpperCase();
    } else {
      obj[prop] = value;
    }
    return true;
  }
});

// Reflect for meta operations
const obj = { a: 1 };
console.log(Reflect.has(obj, 'a')); // true
Reflect.set(obj, 'b', 2);
console.log(Reflect.ownKeys(obj)); // ['a', 'b']

Language Internals

Execution Context

// Understanding 'this' binding
const obj = {
  name: 'Object',
  method() {
    console.log(this.name); // 'Object'

    const arrow = () => {
      console.log(this.name); // 'Object' (inherits from method)
    };

    function regular() {
      console.log(this.name); // undefined (strict mode)
    }

    arrow();
    regular();
  }
};

Type Coercion Rules

// Understanding implicit conversions
console.log('' + 1);        // '1' (string)
console.log(+'123');        // 123 (number)
console.log(!!'hello');     // true (boolean)
console.log([] + []);       // '' (empty string)
console.log({} + []);       // '[object Object]'
console.log(null == undefined); // true
console.log(null === undefined); // false

Browser Compatibility

Feature Detection

// Check for feature support
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

if (typeof Promise !== 'undefined') {
  // Use Promises
} else {
  // Use polyfill or fallback
}

// Modern feature detection
const supportsOptionalChaining = (() => {
  try {
    new Function('return obj?.prop')();
    return true;
  } catch {
    return false;
  }
})();

Polyfills and Transpilation

// Example polyfill for Array.includes()
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    return this.indexOf(searchElement, fromIndex) !== -1;
  };
}

Best Practices

Code Organization

// Use modules for organization
export const formatDate = date =>
  new Intl.DateTimeFormat('en-US').format(date);

export const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  };
};

// main.js
import { formatDate, debounce } from './utils.js';

Error Handling

// Comprehensive error handling
class CustomError extends Error {
  constructor(message, code) {
    super(message);
    this.name = 'CustomError';
    this.code = code;
  }
}

async function robustOperation() {
  try {
    const result = await riskyOperation();
    return result;
  } catch (error) {
    if (error instanceof CustomError) {
      console.error(`Custom error ${error.code}: ${error.message}`);
    } else if (error instanceof TypeError) {
      console.error('Type error:', error.message);
    } else {
      console.error('Unexpected error:', error);
    }
    throw error; // Re-throw if needed
  }
}

Debugging and Development

Console API

// Advanced console usage
console.log('Basic log');
console.warn('Warning message');
console.error('Error message');
console.info('Info message');

// Grouping
console.group('User Details');
console.log('Name: John');
console.log('Age: 30');
console.groupEnd();

// Tables
console.table([
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]);

// Timing
console.time('operation');
// ... some operation
console.timeEnd('operation');

// Assertions
console.assert(1 === 1, 'This will not show');
console.assert(1 === 2, 'This will show as error');

Debugging Techniques

// Debugger statement
function complexFunction(data) {
  debugger; // Execution will pause here when DevTools is open
  return data.map(item => item * 2);
}

// Stack traces
function a() { b(); }
function b() { c(); }
function c() { console.trace('Call stack'); }
a();

This reference is continuously updated to reflect the latest JavaScript specifications and best practices. Use the search function to quickly find specific topics.