Back to Home
JavaScript logoJavaScript BEGINNER

JavaScript Fundamentals

Master JavaScript basics with modern ES6+ features and best practices

5 min read
javascriptes6fundamentalsprogramming
Official Docs

Variables & Data Types

Core JavaScript data types and variable declaration patterns

Variable Declaration

Declare variables using let, const, and var with proper scoping rules

javascript
💡 Use const by default, let when reassignment is needed
⚠️ Avoid var due to function scoping and hoisting issues
📌 const prevents reassignment, not mutation of objects/arrays
⚡ Block-scoped variables (let/const) prevent common bugs

Data Types

JavaScript's primitive and reference types with typeof operator

javascript
💡 Primitives: string, number, boolean, null, undefined, symbol, bigint
📌 Objects and arrays are reference types, copied by reference
⚠️ typeof null returns "object" (historical bug)
⚡ Use === for type-safe comparisons

Type Conversion

Convert between strings, numbers, and booleans explicitly and implicitly

javascript
💡 Use Number(), String(), Boolean() for explicit conversion
⚠️ Implicit coercion can lead to unexpected results
📌 Falsy values: false, 0, "", null, undefined, NaN
⚡ parseInt() and parseFloat() for parsing strings to numbers

Operators

Mathematical, logical, and comparison operators for expressions

Arithmetic & Assignment

Mathematical operations and compound assignment operators

javascript
💡 Use ** for exponentiation instead of Math.pow()
📌 ++ and -- have pre/post increment differences
⚠️ Division by zero returns Infinity, not an error
⚡ Compound operators (+=, -=) are cleaner and faster

Comparison & Logical

Compare values and combine boolean expressions

javascript
💡 Use === and !== for strict equality without type coercion
📌 Logical operators use short-circuit evaluation
⚠️ NaN is not equal to itself (NaN !== NaN is true)
⚡ Optional chaining (?.) prevents errors on null/undefined

Ternary & Spread

Conditional operator and spread syntax for arrays and objects

javascript
💡 Ternary operator for simple if-else expressions
📌 Spread (...) creates shallow copies of arrays/objects
⚠️ Nested ternaries reduce readability
⚡ Rest parameters (...args) collect remaining arguments

Control Flow

Conditional logic and iteration patterns for program flow

Conditional Statements

Control program flow with if, else, switch, and conditional logic

javascript
💡 Use switch for multiple conditions on same variable
📌 Don't forget break in switch cases to prevent fall-through
⚠️ Switch uses strict equality (===) for comparisons
⚡ Early returns reduce nesting and improve readability

Loops

Iterate over data with for, while, and modern iteration methods

javascript
💡 Use for...of for arrays, for...in for object properties
📌 Array methods (map, filter, reduce) are often cleaner than loops
⚠️ Avoid modifying array length during iteration
⚡ break exits loop, continue skips to next iteration

Functions

Function creation, invocation, scope, and closure concepts

Function Declarations

Create reusable code blocks with functions and arrow functions

javascript
💡 Arrow functions inherit this from parent scope
📌 Function declarations are hoisted, expressions are not
⚠️ Arrow functions can't be used as constructors
⚡ Default parameters provide fallback values

Scope & Closures

Understanding variable scope, lexical environment, and closures

javascript
💡 Closures remember variables from outer scope
📌 let/const have block scope, var has function scope
⚠️ Avoid creating closures in loops without proper scoping
⚡ Use closures for data privacy and factory functions

Arrow Functions

Concise function syntax with lexical this binding

javascript
💡 Use arrow functions for callbacks and array methods
📌 Arrow functions don't have their own this, arguments, or super
⚠️ Can't use arrow functions as constructors or methods
⚡ Implicit return for single expressions saves code

Objects & Arrays

Working with JavaScript's complex data structures

Working with Objects

Create, modify, and iterate over JavaScript objects

javascript
💡 Use Object.keys(), .values(), .entries() for iteration
📌 Destructuring extracts values concisely
⚠️ Objects are passed by reference, not value
⚡ Spread operator for shallow object cloning

Working with Arrays

Array manipulation with built-in methods and modern patterns

javascript
💡 Prefer map/filter/reduce over traditional loops
📌 Array.from() converts array-like objects to arrays
⚠️ sort() mutates the original array
⚡ Use destructuring for array unpacking

Modern JavaScript (ES6+)

Latest JavaScript features and syntax improvements

Template Literals & String Methods

Modern string interpolation and manipulation techniques

javascript
💡 Template literals support multi-line strings
📌 ${} for expression interpolation in templates
⚠️ Tagged templates can process template strings
⚡ String methods like includes(), startsWith() improve readability

Modules

Import and export code using ES6 module system

javascript
💡 Named exports for multiple exports, default for main export
📌 Modules are always in strict mode
⚠️ Circular dependencies can cause issues
⚡ Dynamic imports with import() for code splitting

Promises & Async/Await

Handle asynchronous operations with promises and async functions

javascript
💡 async/await makes asynchronous code look synchronous
📌 Always handle promise rejections with catch or try/catch
⚠️ Forgotten await causes promises instead of values
⚡ Promise.all() for parallel async operations

Destructuring

Extract values from arrays and objects with destructuring syntax

javascript
💡 Destructuring makes code cleaner and more readable
📌 Use default values to handle undefined properties
⚠️ Destructuring null or undefined throws an error
⚡ Great for function parameters and API responses

Optional Chaining & Nullish Coalescing

Safely access nested properties and handle null/undefined values

javascript
💡 Optional chaining prevents "Cannot read property of undefined" errors
📌 ?? only checks for null/undefined, not all falsy values like ||
⚡ Combine ?. and ?? for safe property access with defaults
⚠️ Don't overuse optional chaining - fix the root cause when possible

More JavaScript Cheat Sheets

Async JavaScript

INTERMEDIATE8 min

DOM Manipulation

BEGINNER7 min

JavaScript Array Methods

INTERMEDIATE5 min