JavaScript Interview Questions: Fresh Graduate & Profesional

JavaScript adalah skill wajib bagi developer web modern. Baik fresh graduate maupun profesional, pertanyaan interview JavaScript bisa meliputi:

Dasar bahasa
DOM & event
Asynchronous programming
Scope & closure
Performance & optimasi
Security & best practices

Artikel ini membahas pertanyaan umum, jawaban konsep, contoh kode nyata, dan tips menjawab secara profesional.

Contents

1 1. Pertanyaan Dasar JavaScript
2 2. Pertanyaan DOM & Event
- 2.1 2.1 Apa itu Event Bubbling & Capturing?
- 2.2 2.2 Bagaimana menangani Event Delegation?
3 3. Scope, Closure, dan Hoisting
- 3.1 3.1 Apa itu Closure?
- 3.2 3.2 Pertanyaan Scope
4 4. Asynchronous JavaScript
- 4.1 4.1 Perbedaan Callback, Promise, Async/Await
- 4.2 4.2 Event Loop dan Microtask / Macrotask
5 5. JavaScript Performance & Optimization
- 5.1 5.1 Pertanyaan: Bagaimana optimasi JS untuk website?
- 5.2 5.2 Pertanyaan: Apa itu Memory Leak di JS?
6 6. Advanced JS Questions
7 7. Security & Best Practice Questions
8 8. Tips Jawaban untuk Fresh Graduate vs Profesional
9 9. Studi Kasus Interview Nyata
- 9.1 9.1 Pertanyaan SPA
- 9.2 9.2 Pertanyaan Asynchronous
10 10. Checklist Persiapan Interview JavaScript
11 Kesimpulan
12 Related Posts

1. Pertanyaan Dasar JavaScript

1.1 Apa itu JavaScript?

JavaScript adalah bahasa pemrograman client-side (dan server-side via Node.js) untuk membuat website interaktif.
Bisa dijalankan di browser atau server.

Tips menjawab:

Sebutkan bahwa JavaScript multi-paradigm: procedural, functional, object-oriented.

1.2 Perbedaan var, let, dan const

Keyword	Scope	Reassignable	Hoisting
var	function	Yes	Hoisted, undefined
let	block	Yes	Hoisted, temporal dead zone
const	block	No	Hoisted, temporal dead zone

Contoh:

function testScope() {
  if(true) {
    var a = 1;
    let b = 2;
    const c = 3;
  }
  console.log(a); // 1
  console.log(b); // Error
  console.log(c); // Error
}

Tips: Sebutkan juga temporal dead zone untuk let & const.

1.3 Apa itu Hoisting?

Hoisting = deklarasi variabel dan fungsi diangkat ke atas scope saat compile time.

console.log(a); // undefined
var a = 5;

sayHi(); // "Hi!"
function sayHi() { console.log("Hi!"); }

Tips: var hoisted dengan undefined, function declaration hoisted sepenuhnya, let/const → temporal dead zone

2. Pertanyaan DOM & Event

2.1 Apa itu Event Bubbling & Capturing?

Bubbling: event mengalir dari child → parent
Capturing: event mengalir dari parent → child

parent.addEventListener('click', () => console.log('Parent'), true); // capturing
child.addEventListener('click', () => console.log('Child')); // bubbling

Tips: Sebutkan event.stopPropagation() untuk menghentikan bubbling.

READ : Cara Mencegah JavaScript Injection di Website: Panduan Keamanan Production

2.2 Bagaimana menangani Event Delegation?

Gunakan satu listener di parent untuk menangani banyak child → efisien

document.getElementById('list').addEventListener('click', function(e){
    if(e.target && e.target.nodeName == 'LI'){
        console.log('Clicked: ' + e.target.textContent);
    }
});

Tips: Cocok untuk SPA / list dinamis → performance lebih baik daripada menambahkan listener di setiap child

3. Scope, Closure, dan Hoisting

3.1 Apa itu Closure?

Closure = fungsi mengingat scope lexical saat dibuat
Digunakan untuk data encapsulation / private variable

function counter() {
    let count = 0;
    return function() { count++; return count; }
}
const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Tips: Jelaskan kasus nyata → module pattern, private state di object

3.2 Pertanyaan Scope

for(var i=0;i<3;i++){
  setTimeout(() => console.log(i), 1000);
}
// Output: 3 3 3

Solusi menggunakan let:

for(let i=0;i<3;i++){
  setTimeout(() => console.log(i), 1000);
}
// Output: 0 1 2

Tips: Tunjukkan pemahaman block scope & var hoisting

4. Asynchronous JavaScript

4.1 Perbedaan Callback, Promise, Async/Await

Callback:

function fetchData(callback) { setTimeout(() => callback('Data'), 1000); }
fetchData(console.log);

Promise:

function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve('Data'), 1000));
}
fetchData().then(console.log);

Async/Await:

async function getData() {
  const data = await fetchData();
  console.log(data);
}
getData();

Tips: Jelaskan error handling → .catch / try-catch

4.2 Event Loop dan Microtask / Macrotask

Event loop = engine JS memproses stack → queue
Microtask: Promise callbacks, MutationObserver
Macrotask: setTimeout, setInterval, I/O

Contoh:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
// Output: Start End Promise Timeout

Tips: Pertanyaan klasik di interview JS advance

5. JavaScript Performance & Optimization

5.1 Pertanyaan: Bagaimana optimasi JS untuk website?

Minify & compress JS
Lazy loading & code splitting
Optimize DOM manipulation → DocumentFragment / virtual DOM
Debounce/throttle event listeners
Memory leak prevention → clear intervals, remove event listener

5.2 Pertanyaan: Apa itu Memory Leak di JS?

Variabel tidak terpakai tapi masih direferensikan → heap tidak dibersihkan
Contoh nyata: event listener di SPA yang tidak dihapus saat navigasi

window.addEventListener('scroll', () => console.log('scrolling')); 
// tidak dihapus → memory leak

Solusi: removeEventListener saat tidak dibutuhkan

6. Advanced JS Questions

6.1 Prototype vs Class

function Person(name) { this.name = name; }
Person.prototype.greet = function() { console.log('Hi ' + this.name); }

class Person {
  constructor(name){ this.name = name; }
  greet(){ console.log('Hi ' + this.name); }
}

Tips jawaban:

Prototype = lebih low-level, class = syntactic sugar ES6
Prototype memory efficient

6.2 Hoisting Function vs Variable

foo(); // Works
function foo(){ console.log('foo'); }

bar(); // Error
var bar = function(){ console.log('bar'); }

Tips jawaban: perbedaan function declaration vs function expression

READ : Implementasi AJAX Aman untuk Website Bisnis dari Arsitektur hingga Eksekusi

6.3 Deep Copy vs Shallow Copy

// Shallow
const a = {x:1, y:{z:2}};
const b = {...a}; 
b.y.z = 5; console.log(a.y.z); // 5

// Deep
const c = JSON.parse(JSON.stringify(a));
c.y.z = 10; console.log(a.y.z); // 5

Tips: Tunjukkan pengetahuan tentang reference object

6.4 Event Loop Challenge

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

// Output: A D C B

Tips: jelaskan urutan eksekusi → synchronous → microtask → macrotask

7. Security & Best Practice Questions

Bagaimana mencegah XSS di JS? → sanitize input, escape output, CSP
Bagaimana mencegah CSRF? → token, SameSite cookie
Apa itu CORS? → mengatur domain yang diizinkan request ke API

8. Tips Jawaban untuk Fresh Graduate vs Profesional

Level	Tips Jawaban
Fresh Graduate	Fokus pada konsep dasar → contoh kode sederhana, pahami hoisting, closure, async
Profesional	Tambahkan best practice, optimasi, security → lazy loading, memory leak, SSR/CSR, security headers
Semua Level	Jangan hanya hafal jawaban → jelaskan kenapa dan kapan digunakan

9. Studi Kasus Interview Nyata

9.1 Pertanyaan SPA

“Bagaimana kamu menghindari memory leak di React/Vue SPA?”

Jawaban:

Bersihkan event listener saat component unmount
Gunakan WeakMap untuk cache sementara
Clear interval / timeout
Profiling dengan Chrome DevTools → heap snapshot

9.2 Pertanyaan Asynchronous

“Apa perbedaan Promise.all vs async/await dalam loop?”