Getting Started with Basic JavaScript Frontend Development (1)

1. JavaScript Core (Must-Know)

var vs let vs const

• var → function scope (legacy, avoid)

• let → block scope

• const → block scope, cannot reassign

  if (true) { let a = 1  const b = 2 } // a, b not accessible here

Interview line:

Use const by default, let when reassignment is needed.

Data Types

Primitive:

• string, number, boolean, null, undefined, symbol, bigint

Reference:

• object, array, function

let x = 1  let y = x
y = 2  // x stays 1

Truthy / Falsy (frequent trap)

Falsy values:

false, 0, "", null, undefined, NaN

if ("0") console.log("true") // runs

2. Functions (Key Interview Area)

Function vs Arrow Function

  function  sum(a, b) { return a + b
  
  }
  const  sum2 = (a, b) => a + b

Difference: arrow function has no this binding.

  const obj = { name: "okta", say() { setTimeout(() => { 
    console.log(this.name)
      }, 100)
    }
  }

Default Parameters

function  greet(name = "Guest") { 
  return  `Hi ${name}`
}

3. this (Very Common Interview Question)

const user = { name: "Okta", getName() { 
  return  this.name }
}

• this depends on how function is called, not where it’s defined.

4. Closures (They Love This)

function  counter() { 
  let count = 0
  return  function () {
    count++ return count
  }
} const inc = counter() inc() // 1  inc() // 2

Explain simply:

Closure allows a function to remember variables from its outer scope.

5. Array Essentials (Daily Use)

Map / Filter / Reduce

const nums = [1,2,3,4]

nums.map(n => n * 2) // [2,4,6,8] nums.filter(n => n > 2) // [3,4] nums.reduce((a,b) => a+b, 0) // 10

Interview rule:

• map → transform

• filter → remove

• reduce → accumulate

6. Object & Array Destructuring

const user = { name: "Okta", age: 25 }
const { name, age } = user

const arr = [1,2] const [a,b] = arr

7. Spread & Rest Operator

const a = [1,2] const b = [...a, 3]

function  sum(...nums) { 
  return nums.reduce((a,b) => a+b, 0)
}

8. Async JavaScript (CRITICAL)

Promise

fetch("/api")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))` 

Async / Await (Preferred)

async  function  load() { 
  try { const res = await  fetch("/api")
    const data = await res.json() console.log(data)
  } 
    catch (e) { console.error(e)
  }
}

Interview line:

async/await is syntax sugar over Promises.

9. Event Loop (High-Value Topic)

console.log(1) setTimeout(() =>  console.log(2), 0) Promise.resolve().then(() =>  console.log(3)) console.log(4) 

Output:

1
4
3
2

Why:

• Sync first

• Microtask queue (Promise)

• Macrotask queue (setTimeout)

10. ECMAScript (ES6+) – What Interviewers Expect

Key ES features:

• let, const

• arrow functions

• template literals

• destructuring

• spread/rest

• modules

• async/await

• optional chaining

Optional Chaining

user?.profile?.email

ES Modules

export  function  sum(a,b) { return a+b
}
import { sum } from  "./math.js"

11. Browser Concepts (Frontend MUST)

DOM Manipulation

document.querySelector("#btn")
  .addEventListener("click", () => { console.log("clicked")
}) 

Debounce (Interview Favorite)

function  debounce(fn, delay) { 
  let timer return  (...args) => { clearTimeout(timer)
    timer = setTimeout(() =>  fn(...args), delay)
  }
}

Use case: search input, resize, scroll.