JavaScript Interview Questions

// var: function-scoped, hoisted
function example() {
  console.log(x); // undefined (hoisted)
  var x = 10;
  if (true) {
    var x = 20; // same x! overwrites
  }
  console.log(x); // 20
}

// let: block-scoped
function modern() {
  let y = 10;
  if (true) {
    let y = 20; // different y (block scope)
    console.log(y); // 20
  }
  console.log(y); // 10
}

// const: cannot reassign
const MAX = 100;
// MAX = 200; // TypeError!

const obj = { name: 'Alice' };
obj.name = 'Bob'; // OK: mutating object, not reassigning const
obj.salary = 50000; // OK: adding property
console.log(obj); // { name: 'Bob', salary: 50000 }

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function equivalents
const add = (a, b) => a + b;          // implicit return
const square = n => n * n;            // single param, no parens needed
const greet = () => 'Hello World';    // no params
const getObj = () => ({ name: 'Alice' }); // return object literal

// this binding difference
const timer = {
  count: 0,
  // Regular: 'this' is undefined in strict mode callback
  startBad: function() {
    setTimeout(function() {
      this.count++; // 'this' is window/undefined!
    }, 1000);
  },
  // Arrow: inherits 'this' from startGood
  startGood: function() {
    setTimeout(() => {
      this.count++; // 'this' is timer object ✓
    }, 1000);
  }
};

// Array methods: arrow functions shine
const salaries = [50000, 62000, 55000];
const doubled  = salaries.map(s => s * 2);
const high     = salaries.filter(s => s > 55000);

// Promise
function fetchEmployee(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) resolve({ id, name: 'Alice', salary: 50000 });
      else reject(new Error('Invalid ID'));
    }, 1000);
  });
}

// Using .then/.catch
fetchEmployee(101)
  .then(emp  => console.log('Found:', emp.name))
  .catch(err => console.error('Error:', err.message));

// async/await (cleaner)
async function loadEmployee(id) {
  try {
    const emp = await fetchEmployee(id);
    console.log('Name:', emp.name);
    console.log('Salary:', emp.salary);
    return emp;
  } catch (err) {
    console.error('Failed:', err.message);
  }
}

// APEX: apex.server.process with async/await
async function saveRecord() {
  const result = await apex.server.process('SAVE_EMP', {
    pageItems: '#P1_EMP_NAME,#P1_SALARY'
  });
  apex.message.showPageSuccess('Saved: ' + result.emp_id);
}

// Find elements
const header   = document.getElementById('main-header');
const buttons  = document.querySelectorAll('.action-btn');
const firstBtn = document.querySelector('.action-btn');

// Read/modify content
console.log(header.textContent);          // read text
header.textContent  = 'New Title';         // set text
header.innerHTML    = '<em>Styled</em>';   // set HTML
header.style.color  = '#2d6446';          // set style

// Classes
header.classList.add('active');
header.classList.remove('hidden');
header.classList.toggle('expanded');
header.classList.contains('active');      // true/false

// Create and add elements
const card = document.createElement('div');
card.className   = 'employee-card';
card.dataset.id  = '101';
card.textContent = 'Alice Johnson';
document.getElementById('emp-list').appendChild(card);

// Remove element
card.remove();

// APEX: get item value via DOM
const deptId = document.getElementById('P1_DEPT_ID').value;

// Basic closure
function makeCounter(start = 0) {
  let count = start; // 'count' is enclosed
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount:  () => count,
    reset:     () => { count = start; }
  };
}
const counter = makeCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.decrement()); // 11
console.log(counter.getCount());  // 11
// 'count' is private — can't access directly

// Closure in APEX event handler
function attachSaveHandler(empId, empName) {
  // empId, empName are enclosed in the click handler
  document.getElementById('save-btn')
    .addEventListener('click', function() {
      // Still has access to empId and empName
      apex.server.process('SAVE', {
        x01: empId,
        x02: empName
      });
    });
}
attachSaveHandler(101, 'Alice');

// Basic GET request
async function getEmployee(id) {
  const response = await fetch(`/api/employees/${id}`);

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  const data = await response.json();
  return data;
}

// POST request with JSON body
async function createEmployee(empData) {
  const response = await fetch('/api/employees', {
    method:  'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token
    },
    body: JSON.stringify(empData)
  });
  return response.json();
}

// APEX: use apex.server.process (handles session)
apex.server.process('GET_EMPLOYEE', { x01: empId }, {
  success: function(data) {
    $("#P1_EMP_NAME").val(data.emp_name);
  },
  error: function(xhr) {
    console.error('APEX process failed:', xhr.status);
  }
});