JavaScript Prerequisites for Vue

Before diving into Vue.js, having a rock-solid foundation in modern ECMAScript (ES6+) is crucial. Vue 3 is built from the ground up using modern JavaScript features such as ES modules, Proxies, promises, and functional composition. Mastering these language fundamentals ensures you understand how Vue operates under the hood without confusing vanilla JavaScript behavior with framework-specific magic.

In this lesson, we will systematically review every core JavaScript concept you need to know, from variable scoping and data structures to asynchronous programming and module bundling.

Variables and Scoping: let vs const

Modern JavaScript strictly avoids the legacy var keyword due to its function-level scoping and confusing hoisting behavior. Instead, always use let and const, which provide block-level scoping within curly braces {}.

Use const by default for all identifier declarations, including objects, arrays, functions, and primitive values that are not reassigned. When declaring reactive state in Vue (such as const count = ref(0)), the ref container itself is a constant reference, even though its internal .value property mutates. Only use let when you explicitly intend to reassign the identifier to a new value (such as loop counters or accumulator variables).

// Constant reference to an object
const user = { name: 'Alice', role: 'developer' }
user.name = 'Bob' // Allowed: mutating property of object

// Reassignable variable
let attempts = 0
attempts += 1

Data Types and Primitive vs Reference Semantics

JavaScript distinguishes between primitive types (string, number, boolean, null, undefined, symbol, and bigint) and reference types (Object, Array, Function, Date, Map, Set).

Primitives are immutable and compared by value. Reference types, by contrast, store a memory address pointing to the object in heap memory. When two variables reference the same object, mutations performed through one variable are immediately visible through the other. Understanding reference identity is vital in Vue because Vue 3's reactivity system tracks property accesses and mutations on object references.

// Primitive comparison (by value)
const a = 'vue'
const b = 'vue'
console.log(a === b) // true

// Reference comparison (by identity)
const obj1 = { id: 1 }
const obj2 = { id: 1 }
console.log(obj1 === obj2) // false (different heap memory addresses)

Operators and Logical Coalescing

Modern JavaScript provides powerful operators that streamline conditional logic in template expressions and scripts. Beyond standard arithmetic and strict comparison (=== and !==), you should master logical short-circuiting (&&, ||), the ternary conditional operator (condition ? exprIfTrue : exprIfFalse), and the nullish coalescing operator (??).

The nullish coalescing operator (??) returns its right-hand operand only when its left-hand operand is null or undefined, unlike logical OR (||) which triggers on any falsy value (such as 0, false, or ""). Optional chaining (?.) allows you to safely read deeply nested object properties without throwing TypeError exceptions if an intermediate property is nullish.

const response = {
  data: {
    user: {
      profile: null
    }
  }
}

// Safe navigation with optional chaining and fallback
const bio = response.data?.user?.profile?.bio ?? 'No biography available'
const unreadCount = response.data?.unreadCount ?? 0

Conditionals and Loops

Control flow in JavaScript is managed using if / else if / else statements, switch blocks, and iterative loops. For iterating over collections, favor declarative methods (Array.prototype.forEach, map, filter) or the for...of loop over legacy indexed for loops.

When looping over arrays with for...of, you receive each element value directly. To iterate over object key-value entries, use Object.entries(obj) in combination with array destructuring.

const frameworks = ['Vue', 'Nuxt', 'Vite']

for (const framework of frameworks) {
  console.log(`Framework: ${framework}`)
}

const config = { mode: 'spa', ssr: true }
for (const [key, value] of Object.entries(config)) {
  console.log(`${key} = ${value}`)
}

Functions and Arrow Functions

Functions are first-class citizens in JavaScript, meaning they can be stored in variables, passed as arguments to other functions (callbacks), and returned from functions (higher-order functions).

Arrow functions (() => {}) provide a concise syntax and, most importantly, lexical this binding. Unlike traditional function declarations which bind this dynamically based on how the function is invoked, arrow functions capture the this value of their enclosing lexical context. In Vue 3 <script setup>, you will almost exclusively use arrow functions and standalone function declarations.

// Traditional function declaration
function calculateTotal(price, taxRate = 0.08) {
  return price * (1 + taxRate)
}

// Arrow function with implicit return
const formatCurrency = (amount) => `$${amount.toFixed(2)}`

// Higher-order function receiving a callback
const applyDiscount = (price, discountFn) => discountFn(price)

Arrays and Array Methods: map, filter, find, reduce

Vue applications frequently display lists of data fetched from APIs. Instead of mutating arrays with imperative loops, modern frontend engineering relies heavily on immutable array methods.

• map: Transforms each element in an array and returns a new array of identical length.
• filter: Evaluates a predicate function for each element and returns a new array containing only elements that return true.
• find: Returns the first element matching a predicate, or undefined if no match is found.
• some / every: Checks if at least one or all elements satisfy a condition, returning a boolean.
• reduce: Iterates through an array to accumulate a single result value (e.g., calculating totals or grouping items).

const products = [
  { id: 1, title: 'Mechanical Keyboard', price: 120, inStock: true },
  { id: 2, title: 'Wireless Mouse', price: 60, inStock: false },
  { id: 3, title: '4K Monitor', price: 400, inStock: true },
]

// Filter available items
const inStockProducts = products.filter(p => p.inStock)

// Map to display titles
const titles = products.map(p => p.title)

// Find specific item
const mouse = products.find(p => p.id === 2)

// Reduce to calculate total inventory cost
const totalValue = inStockProducts.reduce((sum, p) => sum + p.price, 0)

Objects, Destructuring, and Spread / Rest Operators

Object and array destructuring syntax allows you to unpack values from arrays or properties from objects into distinct variables in a clean, declarative statement.

The spread operator (...) creates shallow copies of objects and arrays or expands elements into function arguments. The rest parameter (...args) gathers remaining parameters into an array. These features are ubiquitous in Vue 3 for passing props, cloning state immutably, and composing composable functions.

// Object destructuring with renaming and default values
const user = { id: 42, username: 'hesam', role: 'admin' }
const { username: userName, role, status = 'active' } = user

// Array destructuring
const [primaryColor, secondaryColor] = ['#10b981', '#06b6d4']

// Immutable state update with object spread
const updatedUser = {
  ...user,
  lastLogin: new Date().toISOString(),
  role: 'superadmin' // overwrites previous role
}

Template Literals

Template literals are string literals delimited by backtick characters (`) rather than single or double quotes. They support multi-line strings without escape sequences and allow embedded expressions using ${expression} interpolation.

Template literals are heavily used in Vue for dynamic class generation, URL construction, and localized messages.

const resource = 'users'
const page = 2
const limit = 20

const endpoint = `https://api.example.com/v1/${resource}?page=${page}&limit=${limit}`

ES Modules: import and export

JavaScript modules allow you to organize code into reusable, encapsulated files. Every file is its own module with private scope unless explicitly exported.

• Named Exports: Export multiple items from a single file by name (export const myFunc = ... or export { a, b }). Consumers import them using curly braces: import { myFunc } from './file'.
• Default Exports: Export a single primary value from a module (export default MyComponent). Consumers import it without braces and can assign any identifier name: import MyComponent from './MyComponent.vue'.

// api.js (Named exports)
export const API_BASE_URL = 'https://api.front-heaven.dev'
export function fetchLessons() { /* ... */ }

// main.js (Importing named exports)
import { API_BASE_URL, fetchLessons } from './api.js'

Promises, async / await, and the Fetch API

JavaScript is single-threaded and relies on an event loop for non-blocking I/O operations such as network requests and timers. Asynchronous programming is managed through Promises and the modern async / await syntax.

A Promise represents the eventual completion or failure of an asynchronous operation and its resulting value. The async and await keywords provide synchronous-looking syntax for working with Promises, drastically improving readability and error handling with standard try...catch blocks. The browser's native fetch() API returns a Promise that resolves to a Response object.

async function loadUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    return data
  } catch (error) {
    console.error('Failed to fetch user data:', error)
    throw error
  }
}

DOM Basics and Browser Events

The Document Object Model (DOM) is the tree representation of an HTML document in browser memory. Although Vue abstracts direct DOM manipulation through its declarative template and reactivity engine, understanding DOM nodes, browser event propagation (bubbling and capturing), and default browser actions (such as form submission or link navigation) is essential for mastering Vue directives like v-on, @click.stop, and @submit.prevent.

When an event occurs in the DOM, browser engines dispatch an Event object containing metadata such as the event target, mouse coordinates, key pressed, and methods like e.preventDefault() and e.stopPropagation().

// Browser event listener with stopPropagation and preventDefault
document.querySelector('#submit-btn')?.addEventListener('click', (event) => {
  event.preventDefault() // Prevents page reload
  event.stopPropagation() // Stops bubbling up parent tree
  console.log('Button clicked safely')
})

Best Practices

• Adopt Strict Equality: Always use === and !== instead of loose equality (== and !=) to avoid unexpected type coercion bugs.
• Embrace Immutability: Avoid mutating arrays and objects in-place where unexpected side-effects can occur; use array transformation methods (map, filter) and object spread ({ ...obj }).
• Handle Asynchronous Errors: Always wrap await calls in try...catch blocks or provide a fallback to prevent uncaught promise rejection errors from crashing your client interface.
• Prefer Named Exports for Utilities: Use named exports for helper functions and types to ensure consistent naming and better tree-shaking across your codebase.

Summary

A comprehensive grasp of modern JavaScript is the single most valuable prerequisite for becoming an expert Vue 3 developer. From block-scoped variables and destructuring to asynchronous fetch flows and DOM events, every Vue feature builds directly upon standard ECMAScript conventions. With these JavaScript foundations in place, you are fully prepared to explore Vue's template syntax, reactivity engine, and component architecture.