javascript-fundamentals

JavaScript Fundamentals

A comprehensive guide to core JavaScript concepts, modern ES6+ features, asynchronous programming patterns, and industry best practices for building robust applications.

When to Use This Skill

This skill is essential when:

Writing JavaScript Code: Building web applications, Node.js backends, or any JavaScript-based project
Code Reviews: Evaluating code quality, identifying anti-patterns, suggesting improvements
Teaching/Mentoring: Explaining JavaScript concepts, debugging issues, pair programming
Refactoring Legacy Code: Modernizing codebases with ES6+ features and better patterns
Architecture Design: Choosing appropriate patterns and structures for your application
Performance Optimization: Understanding memory management, event loops, and efficient patterns
Debugging: Tracing execution flow, understanding scope chains, and async behavior
Interview Preparation: Mastering fundamental concepts tested in technical interviews

Core Concepts

Variables and Scope

JavaScript has three ways to declare variables, each with different scoping rules:

var: Function-scoped, hoisted, can be redeclared

function varExample() { var x = 1; if (true) { var x = 2; // Same variable! console.log(x); // 2 } console.log(x); // 2 }

let: Block-scoped, not hoisted to usable state, cannot be redeclared

function letExample() { let x = 1; if (true) { let x = 2; // Different variable console.log(x); // 2 } console.log(x); // 1 }

const: Block-scoped, must be initialized, reference cannot be reassigned

const PI = 3.14159; // PI = 3; // Error: Assignment to constant variable

const user = { name: 'John' }; user.name = 'Jane'; // OK - modifying object properties // user = {}; // Error - reassigning reference

Best Practice: Use const by default, let when reassignment is needed, avoid var .

Data Types

JavaScript has 7 primitive types and objects:

Primitives:

String : Text data
Number : Integers and floating-point numbers
BigInt : Arbitrary precision integers
Boolean : true/false
undefined : Uninitialized variable
null : Intentional absence of value
Symbol : Unique identifiers

Objects: Collections of key-value pairs, including arrays, functions, dates, etc.

// Type checking typeof "hello" // "string" typeof 42 // "number" typeof true // "boolean" typeof undefined // "undefined" typeof null // "object" (historical bug!) typeof {} // "object" typeof [] // "object" typeof function(){} // "function"

// Better array checking Array.isArray([]) // true Array.isArray({}) // false

// Null checking value === null // true only for null value == null // true for null AND undefined

Functions

Functions are first-class citizens in JavaScript - they can be assigned to variables, passed as arguments, and returned from other functions.

Function Declaration:

function greet(name) { return Hello, ${name}!; }

Function Expression:

const greet = function(name) { return Hello, ${name}!; };

Arrow Function (ES6+):

const greet = (name) => Hello, ${name}!;

// Multiple parameters const add = (a, b) => a + b;

// Single parameter (parentheses optional) const double = x => x * 2;

// Multiple statements (need braces and explicit return) const complexFunction = (x, y) => { const result = x + y; return result * 2; };

Key Differences:

Arrow functions don't have their own this binding
Arrow functions cannot be used as constructors
Arrow functions don't have arguments object
Function declarations are hoisted, expressions are not

Objects and Arrays

Object Creation:

// Object literal const person = { name: 'John', age: 30, greet() { return Hello, I'm ${this.name}; } };

// Accessing properties person.name // Dot notation person['name'] // Bracket notation (dynamic keys)

// Adding/modifying properties person.email = 'john@example.com'; person.age = 31;

// Deleting properties delete person.email;

Array Methods:

const numbers = [1, 2, 3, 4, 5];

// Transformation numbers.map(n => n * 2) // [2, 4, 6, 8, 10] numbers.filter(n => n > 2) // [3, 4, 5] numbers.reduce((sum, n) => sum + n, 0) // 15

// Iteration numbers.forEach(n => console.log(n));

// Search numbers.find(n => n > 3) // 4 numbers.findIndex(n => n > 3) // 3 numbers.includes(3) // true

// Mutation (modify original) numbers.push(6) // Add to end numbers.pop() // Remove from end numbers.unshift(0) // Add to start numbers.shift() // Remove from start numbers.splice(2, 1) // Remove 1 item at index 2

// Non-mutating numbers.slice(1, 3) // [2, 3] numbers.concat([6, 7]) // [1, 2, 3, 4, 5, 6, 7] [...numbers, 6, 7] // Spread operator

Closures

A closure is a function that has access to variables in its outer (enclosing) lexical scope, even after the outer function has returned.

function createCounter() { let count = 0; // Private variable

return { increment() { return ++count; }, decrement() { return --count; }, getCount() { return count; } }; }

const counter = createCounter(); console.log(counter.increment()); // 1 console.log(counter.increment()); // 2 console.log(counter.getCount()); // 2 // count is not directly accessible

Use Cases:

Data privacy/encapsulation
Factory functions
Event handlers
Callbacks maintaining state
Module pattern implementation

Prototypes and Inheritance

JavaScript uses prototypal inheritance. Every object has an internal [[Prototype]] link to another object.

// Constructor function function Animal(name) { this.name = name; }

// Add method to prototype Animal.prototype.speak = function() { return ${this.name} makes a sound; };

const dog = new Animal('Dog'); console.log(dog.speak()); // "Dog makes a sound"

// Inheritance function Dog(name, breed) { Animal.call(this, name); // Call parent constructor this.breed = breed; }

// Set up prototype chain Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() { return ${this.name} barks!; };

const myDog = new Dog('Buddy', 'Golden Retriever'); console.log(myDog.speak()); // "Buddy makes a sound" (inherited) console.log(myDog.bark()); // "Buddy barks!" (own method)

Classes (ES6+)

Classes provide syntactic sugar over prototypal inheritance:

class Animal { constructor(name) { this.name = name; }

speak() { return ${this.name} makes a sound; }

// Static method static create(name) { return new Animal(name); } }

class Dog extends Animal { constructor(name, breed) { super(name); // Call parent constructor this.breed = breed; }

speak() { return ${super.speak()} - Woof!; }

// Getter get info() { return ${this.name} is a ${this.breed}; }

// Setter set nickname(value) { this._nickname = value; } }

const myDog = new Dog('Buddy', 'Golden Retriever'); console.log(myDog.speak()); // "Buddy makes a sound - Woof!" console.log(myDog.info); // "Buddy is a Golden Retriever" myDog.nickname = 'Bud';

Modern JavaScript (ES6+)

Destructuring

Extract values from arrays or properties from objects:

// Array destructuring const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(second); // 2 console.log(rest); // [3, 4, 5]

// Object destructuring const user = { name: 'John', age: 30, city: 'NYC' }; const { name, age } = user; console.log(name); // "John"

// Renaming const { name: userName, age: userAge } = user;

// Default values const { country = 'USA' } = user;

// Nested destructuring const data = { user: { name: 'John', address: { city: 'NYC' } } }; const { user: { address: { city } } } = data;

// Function parameters function greet({ name, age = 0 }) { return ${name} is ${age} years old; } greet({ name: 'John', age: 30 }); // "John is 30 years old"

Spread and Rest Operators

Spread (... ) expands elements:

// Arrays const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5] const combined = [...arr1, ...arr2];

// Objects const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// Function arguments Math.max(...arr1); // 3

// Shallow copy const copy = [...arr1]; const objCopy = { ...obj1 };

Rest (... ) collects elements:

// Function parameters function sum(...numbers) { return numbers.reduce((total, n) => total + n, 0); } sum(1, 2, 3, 4); // 10

// With other parameters function multiply(multiplier, ...numbers) { return numbers.map(n => n * multiplier); } multiply(2, 1, 2, 3); // [2, 4, 6]

Template Literals

Multi-line strings and string interpolation:

const name = 'John'; const age = 30;

// String interpolation const greeting = Hello, ${name}!;

// Expressions const message = In 5 years, you'll be ${age + 5};

// Multi-line const multiline = This is a multi-line string;

// Tagged templates function highlight(strings, ...values) { return strings.reduce((result, str, i) => { return result + str + (values[i] ? ${values[i]} : ''); }, ''); }

const html = highlightHello, ${name}! You are ${age} years old.; // "Hello, John! You are 30 years old."

Optional Chaining and Nullish Coalescing

Optional Chaining (?. ): Safely access nested properties:

const user = { name: 'John', address: { city: 'NYC' } };

// Without optional chaining const city = user && user.address && user.address.city;

// With optional chaining const city = user?.address?.city; // "NYC" const zip = user?.address?.zip; // undefined (no error!)

// With methods user.getName?.(); // Only calls if method exists

// With arrays const firstItem = arr?.[0];

Nullish Coalescing (?? ): Default values for null/undefined:

// || returns right side for ANY falsy value const value1 = 0 || 'default'; // "default" const value2 = '' || 'default'; // "default" const value3 = false || 'default'; // "default"

// ?? only for null/undefined const value4 = 0 ?? 'default'; // 0 const value5 = '' ?? 'default'; // "" const value6 = false ?? 'default'; // false const value7 = null ?? 'default'; // "default" const value8 = undefined ?? 'default'; // "default"

Modules

Exporting:

// Named exports export const PI = 3.14159; export function add(a, b) { return a + b; } export class Calculator { // ... }

// Export multiple const multiply = (a, b) => a * b; const divide = (a, b) => a / b; export { multiply, divide };

// Default export (one per file) export default class App { // ... }

// Or class App { } export default App;

Importing:

// Named imports import { PI, add } from './math.js'; import { multiply as mult } from './math.js'; // Rename

// Default import import App from './App.js';

// Mix default and named import App, { PI, add } from './App.js';

// Import all import * as Math from './math.js'; Math.PI; Math.add(1, 2);

// Import for side effects only import './polyfills.js';

Asynchronous Patterns

The Event Loop

JavaScript is single-threaded but handles async operations through the event loop:

Call Stack: Executes synchronous code
Web APIs: Browser/Node APIs (setTimeout, fetch, etc.)
Callback Queue: Completed async operations wait here
Event Loop: Moves callbacks from queue to stack when stack is empty

console.log('1');

setTimeout(() => { console.log('2'); }, 0);

Promise.resolve().then(() => { console.log('3'); });

console.log('4');

// Output: 1, 4, 3, 2 // Microtasks (Promises) have priority over macrotasks (setTimeout)

Callbacks

Traditional async pattern (can lead to "callback hell"):

function fetchUser(userId, callback) { setTimeout(() => { callback(null, { id: userId, name: 'John' }); }, 1000); }

function fetchPosts(userId, callback) { setTimeout(() => { callback(null, [{ id: 1, title: 'Post 1' }]); }, 1000); }

// Callback hell fetchUser(1, (error, user) => { if (error) { console.error(error); return; }

fetchPosts(user.id, (error, posts) => { if (error) { console.error(error); return; }

console.log(user, posts);

}); });

Promises

Promises represent eventual completion (or failure) of an async operation:

// Creating a promise const promise = new Promise((resolve, reject) => { setTimeout(() => { const success = true; if (success) { resolve('Success!'); } else { reject(new Error('Failed!')); } }, 1000); });

// Using a promise promise .then(result => { console.log(result); // "Success!" return result.toUpperCase(); }) .then(upperResult => { console.log(upperResult); // "SUCCESS!" }) .catch(error => { console.error(error); }) .finally(() => { console.log('Cleanup'); });

// Promise utilities Promise.all([promise1, promise2, promise3]) .then(results => { // All resolved: [result1, result2, result3] });

Promise.race([promise1, promise2]) .then(result => { // First to resolve });

Promise.allSettled([promise1, promise2]) .then(results => { // All completed (resolved or rejected) // [{ status: 'fulfilled', value: ... }, { status: 'rejected', reason: ... }] });

Promise.any([promise1, promise2]) .then(result => { // First to fulfill (resolve) });

Async/Await

Modern syntax for handling promises (ES2017+):

async function fetchUserData(userId) { try { const user = await fetchUser(userId); const posts = await fetchPosts(user.id); const comments = await fetchComments(posts[0].id);

return { user, posts, comments };

} catch (error) { console.error('Error:', error); throw error; } }

// Using the async function fetchUserData(1) .then(data => console.log(data)) .catch(error => console.error(error));

// Parallel execution async function fetchAllData() { const [users, posts, comments] = await Promise.all([ fetchUsers(), fetchPosts(), fetchComments() ]);

return { users, posts, comments }; }

// Sequential vs Parallel async function sequential() { const result1 = await operation1(); // Wait const result2 = await operation2(); // Then wait return [result1, result2]; }

async function parallel() { const [result1, result2] = await Promise.all([ operation1(), // Start both operation2() // simultaneously ]); return [result1, result2]; }

Error Handling in Async Code

// Try-catch with async/await async function robustFetch(url) { try { const response = await fetch(url);

if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();
return data;

} catch (error) { if (error.name === 'TypeError') { console.error('Network error:', error); } else { console.error('Error:', error); } throw error; // Re-throw or handle } }

// Promise catch fetchData() .then(data => processData(data)) .catch(error => { // Catches errors from fetchData AND processData console.error(error); });

// Global error handlers window.addEventListener('unhandledrejection', event => { console.error('Unhandled promise rejection:', event.reason); event.preventDefault(); });

Common Patterns

Module Pattern

Encapsulate private data and expose public API:

const Calculator = (function() { // Private variables let history = [];

// Private function function log(operation) { history.push(operation); }

// Public API return { add(a, b) { const result = a + b; log(${a} + ${b} = ${result}); return result; },

subtract(a, b) {
  const result = a - b;
  log(`${a} - ${b} = ${result}`);
  return result;
},

getHistory() {
  return [...history]; // Return copy
},

clearHistory() {
  history = [];
}

}; })();

Calculator.add(5, 3); // 8 console.log(Calculator.getHistory()); // ["5 + 3 = 8"]

Revealing Module Pattern

Cleaner variation of module pattern:

const UserManager = (function() { // Private let users = [];

function findUserById(id) { return users.find(u => u.id === id); }

function validateUser(user) { return user && user.name && user.email; }

// Public methods function addUser(user) { if (validateUser(user)) { users.push(user); return true; } return false; }

function getUser(id) { return findUserById(id); }

function getAllUsers() { return [...users]; }

// Reveal public API return { add: addUser, get: getUser, getAll: getAllUsers }; })();

Factory Pattern

Create objects without specifying exact class:

function createUser(name, role) { const roles = { admin: { permissions: ['read', 'write', 'delete'], level: 3 }, editor: { permissions: ['read', 'write'], level: 2 }, viewer: { permissions: ['read'], level: 1 } };

const roleConfig = roles[role] || roles.viewer;

return { name, role, ...roleConfig,

hasPermission(permission) {
  return this.permissions.includes(permission);
},

toString() {
  return `${this.name} (${this.role})`;
}

}; }

const admin = createUser('Alice', 'admin'); const editor = createUser('Bob', 'editor');

console.log(admin.hasPermission('delete')); // true console.log(editor.hasPermission('delete')); // false

Singleton Pattern

Ensure only one instance exists:

const Config = (function() { let instance;

function createInstance() { return { apiUrl: 'https://api.example.com', timeout: 5000, retries: 3,

  get(key) {
    return this[key];
  },

  set(key, value) {
    this[key] = value;
  }
};

}

return { getInstance() { if (!instance) { instance = createInstance(); } return instance; } }; })();

const config1 = Config.getInstance(); const config2 = Config.getInstance(); console.log(config1 === config2); // true

// Modern ES6 class version class Database { constructor() { if (Database.instance) { return Database.instance; }

this.connection = null;
Database.instance = this;

}

connect() { if (!this.connection) { this.connection = 'Connected to DB'; } return this.connection; } }

const db1 = new Database(); const db2 = new Database(); console.log(db1 === db2); // true

Observer Pattern

Subscribe to and publish events:

class EventEmitter { constructor() { this.events = {}; }

on(event, listener) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(listener);

// Return unsubscribe function
return () => this.off(event, listener);

}

off(event, listenerToRemove) { if (!this.events[event]) return;

this.events[event] = this.events[event].filter(
  listener => listener !== listenerToRemove
);

}

emit(event, ...args) { if (!this.events[event]) return;

this.events[event].forEach(listener => {
  listener(...args);
});

}

once(event, listener) { const onceWrapper = (...args) => { listener(...args); this.off(event, onceWrapper); }; this.on(event, onceWrapper); } }

// Usage const emitter = new EventEmitter();

const unsubscribe = emitter.on('data', (data) => { console.log('Received:', data); });

emitter.emit('data', { id: 1 }); // "Received: { id: 1 }" unsubscribe(); emitter.emit('data', { id: 2 }); // Nothing logged

Memoization

Cache function results for performance:

function memoize(fn) { const cache = new Map();

return function(...args) { const key = JSON.stringify(args);

if (cache.has(key)) {
  console.log('Cached result');
  return cache.get(key);
}

const result = fn.apply(this, args);
cache.set(key, result);
return result;

}; }

// Expensive function function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }

const memoizedFib = memoize(fibonacci); console.log(memoizedFib(40)); // Slow first time console.log(memoizedFib(40)); // Instant (cached)

// With object methods const calculator = { multiplier: 2,

calculate: memoize(function(n) { return n * this.multiplier; }) };

Best Practices

Naming Conventions

// Constants - UPPERCASE_SNAKE_CASE const MAX_RETRIES = 3; const API_BASE_URL = 'https://api.example.com';

// Variables and functions - camelCase let userName = 'John'; function getUserData() { }

// Classes - PascalCase class UserAccount { } class HTTPHandler { }

// Private convention - prefix with underscore class Widget { constructor() { this._privateProperty = 'internal'; }

_privateMethod() { // Implementation } }

// Boolean variables - use is/has/can prefix const isActive = true; const hasPermission = false; const canEdit = true;

// Functions - use verb prefix function getUser() { } function setConfig() { } function validateInput() { } function handleClick() { }

Error Handling

// Custom error classes class ValidationError extends Error { constructor(message, field) { super(message); this.name = 'ValidationError'; this.field = field; } }

class NetworkError extends Error { constructor(message, statusCode) { super(message); this.name = 'NetworkError'; this.statusCode = statusCode; } }

// Throw specific errors function validateEmail(email) { if (!email.includes('@')) { throw new ValidationError('Invalid email format', 'email'); } return true; }

// Handle different error types try { validateEmail('invalid'); } catch (error) { if (error instanceof ValidationError) { console.error(Validation failed for ${error.field}: ${error.message}); } else { console.error('Unexpected error:', error); } }

// Async error handling async function fetchWithRetry(url, retries = 3) { for (let i = 0; i < retries; i++) { try { const response = await fetch(url); if (!response.ok) { throw new NetworkError('Request failed', response.status); } return await response.json(); } catch (error) { if (i === retries - 1) throw error; // Last retry console.log(Retry ${i + 1}/${retries}); await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1))); } } }

Performance Tips

// 1. Avoid unnecessary operations in loops // Bad for (let i = 0; i < array.length; i++) { } // Length calculated each iteration

// Good const len = array.length; for (let i = 0; i < len; i++) { }

// Better - use built-in methods array.forEach(item => { });

// 2. Debounce expensive operations function debounce(fn, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn.apply(this, args), delay); }; }

const expensiveSearch = debounce((query) => { // API call }, 300);

// 3. Throttle high-frequency events function throttle(fn, limit) { let inThrottle; return function(...args) { if (!inThrottle) { fn.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }

window.addEventListener('scroll', throttle(() => { // Handle scroll }, 100));

// 4. Use object/map for lookups // Bad - O(n) const colors = ['red', 'blue', 'green']; colors.includes('blue'); // Linear search

// Good - O(1) const colorSet = new Set(['red', 'blue', 'green']); colorSet.has('blue'); // Constant time

// 5. Avoid memory leaks // Bad - event listener not removed element.addEventListener('click', handler);

// Good const handler = () => { }; element.addEventListener('click', handler); // Later... element.removeEventListener('click', handler);

// 6. Use WeakMap for private data const privateData = new WeakMap();

class MyClass { constructor() { privateData.set(this, { secret: 'value' }); }

getSecret() { return privateData.get(this).secret; } } // When instance is garbage collected, WeakMap entry is too

Code Organization

// 1. Single Responsibility Principle // Bad - function does too much function processUserData(userData) { // Validate // Transform // Save to database // Send email // Update UI }

// Good - separate concerns function validateUser(userData) { } function transformUserData(userData) { } function saveUser(userData) { } function sendWelcomeEmail(user) { } function updateUI(user) { }

// 2. Pure functions (no side effects) // Bad - modifies input function addToCart(cart, item) { cart.items.push(item); return cart; }

// Good - returns new object function addToCart(cart, item) { return { ...cart, items: [...cart.items, item] }; }

// 3. Avoid magic numbers // Bad if (user.role === 2) { }

// Good const ROLES = { ADMIN: 1, EDITOR: 2, VIEWER: 3 };

if (user.role === ROLES.EDITOR) { }

// 4. Use default parameters // Bad function greet(name) { name = name || 'Guest'; return Hello, ${name}; }

// Good function greet(name = 'Guest') { return Hello, ${name}; }

// 5. Guard clauses for early returns // Bad function processOrder(order) { if (order) { if (order.items.length > 0) { if (order.total > 0) { // Process order } } } }

// Good function processOrder(order) { if (!order) return; if (order.items.length === 0) return; if (order.total <= 0) return;

// Process order }

Memory Management

// 1. Clear timers and intervals const timerId = setTimeout(() => { }, 1000); clearTimeout(timerId);

const intervalId = setInterval(() => { }, 1000); clearInterval(intervalId);

// 2. Remove event listeners const handler = () => { }; element.addEventListener('click', handler); element.removeEventListener('click', handler);

// 3. Set references to null when done let largeData = fetchLargeDataset(); // Use data... largeData = null; // Allow garbage collection

// 4. Use WeakMap/WeakSet for caches const cache = new WeakMap(); let obj = { data: 'value' }; cache.set(obj, 'cached value'); obj = null; // Cache entry automatically removed

// 5. Avoid global variables // Bad var globalUser = { };

// Good - use modules/closures (function() { const user = { }; // Use user locally })();

// 6. Be careful with closures function createHeavyObject() { const heavyData = new Array(1000000);

// Bad - closure keeps heavyData in memory return function() { console.log(heavyData.length); };

// Good - only capture what you need const length = heavyData.length; return function() { console.log(length); }; }

Testing Considerations

// 1. Write testable code - pure functions // Testable function calculateTotal(items) { return items.reduce((sum, item) => sum + item.price, 0); }

// Hard to test - depends on external state function calculateTotal() { return cart.items.reduce((sum, item) => sum + item.price, 0); }

// 2. Dependency injection // Hard to test class UserService { constructor() { this.api = new ApiClient(); } }

// Easy to test - inject dependencies class UserService { constructor(apiClient) { this.api = apiClient; } }

// 3. Avoid side effects // Side effects function processData(data) { console.log('Processing...'); // Side effect updateDatabase(data); // Side effect return transform(data); }

// Pure function transformData(data) { return transform(data); }

// Separate side effects function processData(data) { const transformed = transformData(data); console.log('Processing...'); updateDatabase(transformed); return transformed; }

Quick Reference

Array Methods Cheat Sheet

const arr = [1, 2, 3, 4, 5];

// Transform arr.map(x => x * 2) // [2, 4, 6, 8, 10] arr.filter(x => x > 2) // [3, 4, 5] arr.reduce((sum, x) => sum + x) // 15

// Search arr.find(x => x > 3) // 4 arr.findIndex(x => x > 3) // 3 arr.indexOf(3) // 2 arr.includes(3) // true arr.some(x => x > 3) // true arr.every(x => x > 0) // true

// Mutation arr.push(6) // Add to end arr.pop() // Remove from end arr.unshift(0) // Add to start arr.shift() // Remove from start arr.splice(2, 1, 99) // Remove/add at index

// Non-mutating arr.slice(1, 3) // [2, 3] arr.concat([6, 7]) // [1, 2, 3, 4, 5, 6, 7] [...arr] // Copy arr.join(', ') // "1, 2, 3, 4, 5" arr.reverse() // [5, 4, 3, 2, 1] (mutates!) arr.sort((a, b) => a - b) // Sort (mutates!)

Object Methods Cheat Sheet

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj) // ['a', 'b', 'c'] Object.values(obj) // [1, 2, 3] Object.entries(obj) // [['a', 1], ['b', 2], ['c', 3]] Object.fromEntries([['a', 1]]) // { a: 1 }

Object.assign({}, obj, { d: 4 }) // { a: 1, b: 2, c: 3, d: 4 } { ...obj, d: 4 } // Same as above

Object.freeze(obj) // Make immutable Object.seal(obj) // Prevent add/remove properties Object.preventExtensions(obj) // Prevent adding properties

Object.hasOwnProperty.call(obj, 'a') // true 'a' in obj // true obj.hasOwnProperty('a') // true (not recommended)

Common Gotchas

// 1. Equality 0 == '0' // true (type coercion) 0 === '0' // false (strict) null == undefined // true null === undefined // false

// 2. Type coercion '5' + 3 // "53" (string concatenation) '5' - 3 // 2 (numeric subtraction) +'5' // 5 (unary plus converts to number) !!'value' // true (double negation to boolean)

// 3. this binding const obj = { name: 'Object', regular: function() { console.log(this.name); }, arrow: () => { console.log(this.name); } }; obj.regular(); // "Object" obj.arrow(); // undefined (arrow uses lexical this)

// 4. Falsy values false, 0, -0, 0n, '', null, undefined, NaN

// 5. Array/Object comparison [] === [] // false (different references) {} === {} // false (different references)

// 6. Floating point 0.1 + 0.2 === 0.3 // false (0.30000000000000004) Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON // true

// 7. Hoisting console.log(x); // undefined (var hoisted) var x = 5;

console.log(y); // ReferenceError (let not hoisted to usable state) let y = 5;

This comprehensive guide covers the essential JavaScript fundamentals needed for modern development. Practice these concepts regularly and refer to the EXAMPLES.md file for detailed implementation scenarios.

javascript-fundamentals

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

docker-compose-orchestration

postgresql-database-engineering

jest-react-testing

ui-design-patterns