MERN Course: JavaScript Essentials

Introduction

JavaScript is the language of the entire MERN stack. This guide expands the syllabus into interview-ready explanations with runnable examples and styled callouts for notes, tips, warnings, and performance.

Course Reference

Quick index

Week 6: JavaScript Fundamentals

1. Introduction to JavaScript

JavaScript runs in browsers and on servers (Node.js). Use const by default, let when reassignment is required, and avoid var.

Example:

const appName = 'MERN Todo'
let taskCount = 0
 
function addTask(title) {
  taskCount += 1
  return { id: taskCount, title, done: false }
}
 
console.log(addTask('Learn async/await'))

Back to index

2. Control Flow and Functions

Conditionals and loops control program flow. Arrow functions inherit this lexically — preferred in React event handlers.

Example:

const tasks = ['HTML', 'CSS', 'JS']
 
const completed = tasks.filter((task) => task !== 'HTML')
 
function greet(name = 'Developer') {
  return 'Hello, ' + name
}
 
for (const task of tasks) {
  console.log(task)
}

Back to index

3. Working with Arrays and Objects

Arrays store ordered data; objects store keyed records. JSON is the wire format between front-end and MERN APIs.

Example:

const user = {
  id: 1,
  name: 'Kazi',
  skills: ['React', 'Node', 'MongoDB'],
}
 
const payload = JSON.stringify(user)
const parsed = JSON.parse(payload)
 
const skillList = user.skills.map((s) => s.toUpperCase()).join(', ')

Back to index

Week 7: OOP & the DOM

4. Object-Oriented Programming in JavaScript

ES6 classes are syntactic sugar over prototypes. Use classes when modeling entities; use factory functions for simple data.

Example:

class Task {
  constructor(title) {
    this.title = title
    this.done = false
  }
 
  toggle() {
    this.done = !this.done
  }
}
 
const task = new Task('Deploy MERN app')
task.toggle()

Back to index

5. Introduction to the DOM

The DOM is a tree of nodes representing HTML. Modern code prefers querySelector over legacy getElementById for flexibility.

Example:

const heading = document.querySelector('#app-title')
heading.textContent = 'MERN Stack Guide'
 
const list = document.querySelector('.task-list')
list.insertAdjacentHTML('beforeend', '<li>New task</li>')

Back to index

6. DOM Events and Event Handling

Events bubble from target to root. Use event delegation on parent elements for dynamic lists instead of per-item listeners.

Example:

document.querySelector('.task-list').addEventListener('click', (event) => {
  const button = event.target.closest('[data-action="toggle"]')
  if (!button) return
  button.closest('li')?.classList.toggle('done')
})

Back to index

Week 8: Async JavaScript & APIs

7. Advanced DOM Manipulation & Forms

Validate forms before submit. Show inline errors; disable submit while async validation runs.

Example:

form.addEventListener('submit', async (event) => {
  event.preventDefault()
  const email = form.email.value.trim()
  if (!email.includes('@')) {
    showError('Invalid email')
    return
  }
  await fetch('/api/subscribe', { method: 'POST', body: JSON.stringify({ email }) })
})

Back to index

8. Callbacks, Promises, and Async/Await

Async code avoids blocking the main thread. Prefer async/await over callback pyramids; always handle errors with try/catch.

Example:

async function loadPosts() {
  try {
    const res = await fetch('https://api.example.com/posts')
    if (!res.ok) throw new Error('HTTP ' + res.status)
    return await res.json()
  } catch (error) {
    console.error('Failed to load posts:', error)
    return []
  }
}

Back to index

9. Making API Requests (Fetch API)

REST APIs use HTTP verbs: GET reads, POST creates, PUT/PATCH updates, DELETE removes. Always check response.ok before parsing JSON.

Back to index

Week 9: Auth, Testing & DevTools

10. API Authentication and Best Practices

APIs use API keys, Bearer tokens, or OAuth. Respect rate limits; implement exponential backoff on 429 responses.

Example:

const res = await fetch('/api/profile', {
  headers: {
    Authorization: 'Bearer ' + token,
    Accept: 'application/json',
  },
})

Back to index

11. Introduction to JavaScript Unit Testing (Jest)

Unit tests verify functions in isolation. TDD writes tests first — forces clear interfaces before implementation.

Example:

// sum.js
export function sum(a, b) {
  return a + b
}
 
// sum.test.js
import { sum } from './sum'
test('adds numbers', () => {
  expect(sum(2, 3)).toBe(5)
})

Back to index

12. Developer Console & Debugging

Chrome DevTools: Console for logs, Sources for breakpoints, Network for API inspection, Performance for profiling.

• Use debugger statement or click line numbers to break
• Inspect failed fetch requests — status, headers, response body
• React DevTools shows component props and re-render causes

Example:

console.time('fetch-posts')
const posts = await loadPosts()
console.timeEnd('fetch-posts')

Back to index