JavaScript Fundamentals Cheat Sheet

Why JavaScript Fundamentals Matter

JavaScript remains the cornerstone of modern web development, powering everything from interactive frontend interfaces to server-side applications. Whether you're building with Next.js, React, or vanilla JavaScript, a solid grasp of the fundamentals separates competent developers from exceptional ones. This cheat sheet distills the essential concepts, syntax patterns, and best practices that every JavaScript developer should have at their fingertips.

What you'll learn:

• Variable declarations and scoping rules
• Modern ES6+ syntax and patterns
• Functions, closures, and scope
• Array methods and iteration
• Objects and class inheritance
• Asynchronous programming with Promises and async/await

For teams building production applications, mastering these fundamentals is essential for web development projects that scale and perform reliably.

Operators and Expressions

Comparison Operators

The distinction between loose (==) and strict (===) equality operators is critical for writing reliable JavaScript code. The loose equality operator performs type coercion, which can lead to unexpected results, while strict equality checks both value and type without any conversion. Always prefer strict equality to avoid subtle bugs caused by type coercion.

// Loose equality (==) - type coercion occurs
console.log(0 == false); // true - both coerced to 0
console.log('1' == 1); // true - string coerced to number
console.log(null == undefined); // true - special case

// Strict equality (===) - no type coercion
console.log(0 === false); // false - different types
console.log('1' === 1); // false - different types
console.log(null === undefined); // false - different types

// Nullish coalescing operator (ES2020)
const nullValue = null;
const emptyString = '';
const zero = 0;

console.log(nullValue ?? 'default'); // 'default'
console.log(emptyString ?? 'default'); // '' (not 'default')
console.log(zero ?? 'default'); // 0 (not 'default')

Logical Operators

Logical operators form the backbone of conditional logic in JavaScript. Understanding short-circuit evaluation helps write more efficient and expressive code. The && and || operators return the value of one of their operands rather than a boolean, which enables powerful patterns for default values and conditional execution.

// Short-circuit evaluation
const defaultName = 'Guest';
const userName = inputName || defaultName; // Uses default if inputName is falsy

// Optional chaining + nullish coalescing (ES2020)
const displayName = user?.name ?? 'Anonymous'; // Safe property access with defaults

// Practical patterns
const config = userSettings || defaultSettings;
const itemPrice = products[0]?.price || 0;

Arrays and Iteration

Array Methods and Mutability

Understanding which array methods mutate the original array versus returning a new one is essential for predictable code. Mutating methods like push(), pop(), shift(), and unshift() modify the original array, while methods like map(), filter(), and reduce() return new arrays. This distinction is critical when working with state in applications, as unexpected mutations can cause hard-to-trace bugs. For developers working on Node.js backends or React frontends, proper array handling is fundamental to application stability.

// Mutating methods - modify original array
let fruits = ['apple', 'banana'];
fruits.push('orange'); // Add to end: ['apple', 'banana', 'orange']
fruits.pop(); // Remove from end: ['apple', 'banana']
fruits.unshift('grape'); // Add to start: ['grape', 'apple', 'banana']
fruits.shift(); // Remove from start: ['apple', 'banana']

// Non-mutating methods - return new array
const numbers = [1, 2, 3, 4, 5];

// map - transform each element
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]

// filter - select elements matching condition
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce - accumulate to single value
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

// find - locate first matching element
const found = numbers.find(n => n > 3); // 4

// findIndex - locate first matching element's index
const foundIndex = numbers.findIndex(n => n > 3); // 3

// some - check if any element matches
const hasEven = numbers.some(n => n % 2 === 0); // true

// every - check if all elements match
const allEven = numbers.every(n => n % 2 === 0); // false

Array Destructuring and Modern Patterns

Array destructuring provides an elegant way to extract values from arrays and assign them to variables. Combined with the rest pattern, it enables powerful array manipulation without verbose boilerplate code. These patterns are essential for writing clean, expressive JavaScript that handles data transformations efficiently.

// Array destructuring
const colors = ['red', 'green', 'blue', 'purple'];
const [primary, secondary, tertiary] = colors;
console.log(primary); // 'red'

// Skipping elements
const [first, , third] = colors; // 'red', undefined, 'blue'

// Rest pattern with destructuring
const [head, ...tail] = colors;
console.log(head); // 'red'
console.log(tail); // ['green', 'blue', 'purple']

// Swapping values without temporary variable
let x = 1, y = 2;
[x, y] = [y, x]; // x = 2, y = 1

Scope and Closures

Understanding Scope

Scope determines where variables and functions are accessible in your code. JavaScript uses lexical scoping, meaning scope is determined at the time of code writing, not execution. This fundamental concept affects variable visibility, closure behavior, and module organization. Understanding scope is critical for debugging and writing maintainable code that scales well in production applications.

// Global scope
const globalVar = 'accessible everywhere';

function outerFunction() {
 // Function scope
 const outerVar = 'accessible in outer and inner';

 function innerFunction() {
 // Inner scope has access to outer scope (closure)
 const innerVar = 'only accessible here';
 console.log(globalVar); // ✓ Accessible
 console.log(outerVar); // ✓ Accessible
 console.log(innerVar); // ✓ Accessible
 }

 // console.log(innerVar); // ✗ ReferenceError
}

// Block scope with let/const
if (true) {
 let blockVar = 'only in this block';
 const alsoBlock = 'also only here';
 // ✓ Accessible here
}
// console.log(blockVar); // ✗ ReferenceError

// Loop scope with var vs let
for (var i = 0; i < 3; i++) {
 // var is function-scoped
}
console.log(i); // 3 - still accessible!

for (let j = 0; j < 3; j++) {
 // let is block-scoped
}
// console.log(j); // ReferenceError - not accessible

Closure Patterns

A closure is a function that retains access to variables from its outer scope, even after the outer function has returned. This powerful mechanism enables data privacy, factory functions, and memoization patterns. Closures are essential for understanding module patterns and creating functions with persistent state. For developers building Node.js applications, closures are fundamental to async patterns and middleware implementations.

// Closure example - private variable
function createCounter() {
 let count = 0; // Private variable

 return function() {
 count++; // Closure maintains access to 'count'
 return count;
 };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

// Practical use: factory function
function createMultiplier(factor) {
 return function(number) {
 return number * factor;
 };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Modern JavaScript Best Practices

Patterns to Embrace

Modern JavaScript (ES6+) provides patterns that improve code quality, performance, and maintainability. Adopting these patterns leads to more robust applications that are easier to debug and maintain. These practices are especially important when building production applications with Next.js and modern frameworks that power high-performance web applications.

// Object destructuring with defaults
function createConfig({
 host = 'localhost',
 port = 3000,
 ssl = false,
 timeout = 5000
} = {}) {
 return { host, port, ssl, timeout };
}

// Array destructuring with function returns
function getCoordinates() {
 return [x, y, z] = [10, 20, 30];
}

const [x, y, z] = getCoordinates();

// Optional chaining (ES2020)
const user = {
 address: {
 street: '123 Main St'
 }
};

const street = user?.address?.street; // '123 Main St'
const zip = user?.address?.zip ?? 'Unknown'; // With nullish coalescing
const city = user?.address?.city?.toUpperCase(); // Safe navigation

// ES Modules - Named exports
export const API_BASE = 'https://api.example.com';
export function fetchData(endpoint) {
 return fetch(`${API_BASE}/${endpoint}`).then(r => r.json());
}

// ES Modules - Default export
export default function formatDate(date) {
 return date.toISOString().split('T')[0];
}

// Memoization for expensive computations
function memoize(fn) {
 const cache = new Map();
 return function(...args) {
 const key = JSON.stringify(args);
 if (cache.has(key)) {
 return cache.get(key);
 }
 const result = fn.apply(this, args);
 cache.set(key, result);
 return result;
 };
}

Anti-Patterns to Avoid

Certain patterns can introduce subtle bugs and make code harder to maintain. Avoiding these anti-patterns leads to more predictable and debuggable code. Modern JavaScript provides better alternatives for most legacy patterns. Understanding these pitfalls helps developers write cleaner, more maintainable code for enterprise web development projects.

// ✗ Avoid: Using var in modern code
var oldSchool = 'problematic';

// ✓ Use: let and const for block scoping
let mutable = 'changeable';
const immutable = 'constant';

// ✗ Avoid: Implicit global variables
function badExample() {
 globalVar = 'Oops, created a global!';
}

// ✓ Use: Explicit declarations
function goodExample() {
 const localVar = 'Local only';
 return localVar;
}

// ✗ Avoid: Modifying prototypes of built-in objects
Array.prototype.myCustomMethod = function() { /* ... */ };

// ✓ Use: Utility functions or proper inheritance
function customMethod(array) {
 return array.map(/* ... */);
}

// ✗ Avoid: Ignoring Promise rejections
somePromise.catch(() => {});

// ✓ Use: Proper error handling
somePromise
 .then(handleSuccess)
 .catch(handleError);

// ✓ Early returns to reduce nesting
function processUser(user) {
 if (!user) {
 return { error: 'User required' };
 }

 if (!user.active) {
 return { error: 'User inactive' };
 }

 // Main logic
 return process(user);
}

Sources

1. QuickRef.ME - JavaScript Cheat Sheet - Comprehensive quick reference covering all JavaScript fundamentals
2. MDN Web Docs - JavaScript - Official Mozilla documentation for JavaScript language specifications
3. JavaScript.info - Modern JavaScript Tutorial - In-depth tutorial resource for modern JavaScript