Javascript · Question Set

Call, Apply, Bind and Advanced Functions – Javascript interview questions

Call, Apply, Bind and Advanced Functions interview questions for placements and exams.

Subject: JavascriptDifficulty: Mixed14 questions in this set

Set overview

Questions

Included in this set

Subject

Javascript

Explore more sets

Difficulty

Mixed

Level of this set

Javascript – Call, Apply, Bind and Advanced Functions questions (14)

Go through each question and its explanation. Use this set as a focused practice pack for Javascript.

Back to Javascript subject page

1. Explain currying and partial application. How are they different? Provide practical examples.

Difficulty: HardType: SubjectiveTopic: Functional JS

Currying and partial application are both function transformation techniques, but they work differently. Currying: Transforms a multi-argument function into a chain of single-argument functions. Each function takes exactly one argument and returns another function. The transformation is complete, all arguments become separate functions. Enables calling with one argument at a time. Partial application: Pre-fills some arguments of a function and returns a new function expecting remaining arguments. Does not require single-argument functions. The new function can take multiple arguments. More flexible than currying. Key differences: Currying always returns unary functions, one argument each. Partial application returns functions that can take multiple arguments. Currying is a complete transformation. Partial application is selective fixing. Currying enables easier composition. Partial application is more practical for everyday use. When to use currying: Function composition pipelines. When you want uniform interface of single-argument functions. Mathematical or functional programming patterns. Creating reusable function factories. When to use partial application: Creating specialized versions of generic functions. Event handlers with pre-set context. Configuration functions. Creating utility functions from general ones. Practical benefits: Code reusability by creating specialized functions. Better readability with descriptive function names. Delayed execution with pre-configured parameters. Easier testing of complex functions. Both techniques are fundamental to functional programming and common in interviews testing advanced JavaScript knowledge.

Example code

// CURRYING

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

console.log(add(1, 2, 3)); // 6

// Curried version - each takes one argument
function addCurried(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

console.log(addCurried(1)(2)(3)); // 6

// Arrow function currying
const addArrow = a => b => c => a + b + c;

// Creating specialized functions
const add1 = addArrow(1);
const add1And2 = add1(2);

console.log(add1And2(3)); // 6
console.log(add1And2(5)); // 8

// Generic curry function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...nextArgs) {
      return curried.apply(this, args.concat(nextArgs));
    };
  };
}

const curriedAdd = curry(add);

// All these work:
console.log(curriedAdd(1)(2)(3));   // 6
console.log(curriedAdd(1, 2)(3));   // 6
console.log(curriedAdd(1)(2, 3));   // 6
console.log(curriedAdd(1, 2, 3));   // 6

// PARTIAL APPLICATION

function multiply(a, b, c) {
  return a * b * c;
}

// Using bind for partial application
const multiplyBy2 = multiply.bind(null, 2);
console.log(multiplyBy2(3, 4)); // 24 (2 * 3 * 4)

// Custom partial function
function partial(fn, ...fixedArgs) {
  return function(...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs);
  };
}

const double = partial(multiply, 2, 1);
console.log(double(5)); // 10 (2 * 1 * 5)

// KEY DIFFERENCE DEMONSTRATION

// Currying - MUST call with one arg at a time (or use curry helper)
const curriedMultiply = a => b => c => a * b * c;
// curriedMultiply(2, 3, 4); // Error! Need ()()() syntax
console.log(curriedMultiply(2)(3)(4)); // 24

// Partial - can call with multiple args
const partialMultiply = partial(multiply, 2);
console.log(partialMultiply(3, 4)); // 24 (works!)

// PRACTICAL EXAMPLES

// Example 1: Logging system with currying
const log = level => timestamp => message => {
  console.log(`[${level}] ${timestamp}: ${message}`);
};

const errorLog = log('ERROR');
const errorLogToday = errorLog('2024-01-15');

errorLogToday('Database connection failed');
errorLogToday('Timeout error');

// Example 2: API calls with partial application
function apiCall(method, url, headers, body) {
  console.log(`${method} ${url}`, { headers, body });
}

const postRequest = partial(apiCall, 'POST');
const postToUsers = partial(postRequest, '/api/users');

postToUsers({ auth: 'token' }, { name: 'John' });

// Example 3: Discount calculator with currying
const discount = percent => price => {
  return price - (price * percent / 100);
};

const tenPercentOff = discount(10);
const twentyPercentOff = discount(20);

console.log(tenPercentOff(100));    // 90
console.log(twentyPercentOff(100)); // 80

// Example 4: Validation with partial application
function validate(type, message, value) {
  if (type === 'email') {
    return value.includes('@') || message;
  }
  if (type === 'minLength') {
    return value.length >= 8 || message;
  }
}

const validateEmail = partial(validate, 'email', 'Invalid email');
const validatePassword = partial(validate, 'minLength', 'Too short');

console.log(validateEmail('test@email.com')); // true
console.log(validatePassword('12345'));       // 'Too short'

// Example 5: Function composition with currying
const add5 = x => x + 5;
const multiply2 = x => x * 2;
const subtract3 = x => x - 3;

// Compose works better with curried functions
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const calculate = compose(subtract3, multiply2, add5);
console.log(calculate(10)); // ((10 + 5) * 2) - 3 = 27

// WHEN TO USE WHAT

// Use currying for:
// - Function composition
// - Creating chains of specialized functions
// - Functional programming patterns

// Use partial application for:
// - Creating utility functions
// - Event handlers with context
// - Configuration functions
// - Everyday practical coding

2. What is an IIFE? Explain the module pattern and how IIFE enables data privacy.

Difficulty: MediumType: SubjectiveTopic: JS Modules

IIFE stands for Immediately Invoked Function Expression. It is a function that executes immediately after being defined. IIFE syntax: Wrap function in parentheses to make it an expression. Add parentheses at the end to invoke it. Can use regular or arrow functions. Can pass arguments to the IIFE. Purpose of IIFE: Creates a new scope to avoid polluting global scope. Enables data privacy through closures. Provides encapsulation for variables and functions. Executes initialization code once. Data privacy with IIFE: Variables inside IIFE are not accessible from outside. Only returned values or objects are exposed. Creates private variables and public API. This is the basis of the module pattern. Module pattern: Uses IIFE to create a module with private and public members. Returns an object with public methods. Private variables are accessible only through returned methods. Provides encapsulation and information hiding. Benefits: Prevents global namespace pollution. Creates truly private data. Organizes code into reusable modules. Avoids variable collisions. Enables singleton pattern. Modern alternatives: ES6 modules with import and export. Block scope with let and const. Classes with private fields using hash. When to use IIFE today: Legacy code maintenance. When ES6 modules are not available. Quick scripts that need isolation. Library development for backward compatibility. IIFE and module pattern were fundamental before ES6 modules and still appear in interviews and legacy code.

Example code

// BASIC IIFE SYNTAX

// Function declaration (not IIFE)
function test() {
  console.log('Not immediately invoked');
}

// IIFE - executes immediately
(function() {
  console.log('Immediately invoked!');
})();

// Arrow function IIFE
(() => {
  console.log('Arrow IIFE');
})();

// Alternative syntax (both work)
(function() {
  console.log('Style 1');
}());

// IIFE with parameters
(function(name, age) {
  console.log(name + ' is ' + age);
})('John', 30);

// IIFE returning a value
const result = (function() {
  return 2 + 2;
})();

console.log(result); // 4

// DATA PRIVACY WITH IIFE

const counter = (function() {
  // Private variable
  let count = 0;
  
  // Private function
  function validateIncrement(value) {
    return value > 0;
  }
  
  // Public API
  return {
    increment: function(value = 1) {
      if (validateIncrement(value)) {
        count += value;
      }
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    },
    reset: function() {
      count = 0;
    }
  };
})();

console.log(counter.increment());   // 1
console.log(counter.increment(5));  // 6
console.log(counter.getCount());    // 6
// console.log(counter.count);      // undefined (private!)
// counter.validateIncrement();     // Error (private!)

// MODULE PATTERN

const calculator = (function() {
  // Private state
  let history = [];
  
  // Private helper
  function addToHistory(operation) {
    history.push(operation);
  }
  
  // Public API
  return {
    add: function(a, b) {
      const result = a + b;
      addToHistory(`${a} + ${b} = ${result}`);
      return result;
    },
    
    subtract: function(a, b) {
      const result = a - b;
      addToHistory(`${a} - ${b} = ${result}`);
      return result;
    },
    
    getHistory: function() {
      return [...history]; // Return copy
    },
    
    clearHistory: function() {
      history = [];
    }
  };
})();

console.log(calculator.add(5, 3));      // 8
console.log(calculator.subtract(10, 4)); // 6
console.log(calculator.getHistory());
// ['5 + 3 = 8', '10 - 4 = 6']

// REVEALING MODULE PATTERN

const userModule = (function() {
  // Private
  let users = [];
  
  function validateUser(user) {
    return user.name && user.email;
  }
  
  function addUser(user) {
    if (validateUser(user)) {
      users.push(user);
      return true;
    }
    return false;
  }
  
  function getUsers() {
    return users;
  }
  
  function removeUser(email) {
    users = users.filter(u => u.email !== email);
  }
  
  // Reveal public methods
  return {
    add: addUser,
    getAll: getUsers,
    remove: removeUser
  };
})();

userModule.add({ name: 'John', email: 'john@example.com' });
console.log(userModule.getAll());

// SINGLETON PATTERN WITH IIFE

const database = (function() {
  let instance;
  
  function createInstance() {
    return {
      connect: function() {
        console.log('Connected to database');
      },
      query: function(sql) {
        console.log('Executing:', sql);
      }
    };
  }
  
  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const db1 = database.getInstance();
const db2 = database.getInstance();

console.log(db1 === db2); // true (same instance)

// AVOIDING GLOBAL POLLUTION

// Bad - pollutes global scope
var temp = 'global';
var helper = function() {};

// Good - isolated in IIFE
(function() {
  var temp = 'isolated';
  var helper = function() {};
  // Do work
})();

// console.log(temp);   // 'global' (not affected)
// console.log(helper); // Still accessible

// MODERN ALTERNATIVES

// ES6 Modules
// export const myModule = { ... };
// import { myModule } from './module.js';

// Block scope
{
  const privateVar = 'isolated';
  // Use privateVar
}
// console.log(privateVar); // ReferenceError

// Class with private fields (ES2022)
class MyClass {
  #privateField = 'private';
  
  getPrivate() {
    return this.#privateField;
  }
}

3. What is currying in JavaScript?

Difficulty: HardType: MCQTopic: Functional JS

Currying transforms a function that takes multiple arguments into a sequence of functions that each take a single argument. Instead of calling function with all arguments at once, you call it with one argument, which returns another function that takes the next argument, and so on. Currying enables partial application and function composition. It makes functions more reusable and flexible. Currying is common in functional programming. You can curry functions manually or use libraries like Lodash.

Example code

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

console.log(add(1, 2, 3)); // 6

// Curried version
function addCurried(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

console.log(addCurried(1)(2)(3)); // 6

// Arrow function currying (cleaner)
const addArrow = a => b => c => a + b + c;

console.log(addArrow(1)(2)(3)); // 6

// Partial application with currying
const add5 = addArrow(5);
console.log(add5(3)(2)); // 10

const add5and3 = add5(3);
console.log(add5and3(7)); // 15

// Practical example - greeting
const greet = greeting => name => time => {
  return `${greeting} ${name}, good ${time}!`;
};

const sayHello = greet('Hello');
const sayHelloToJohn = sayHello('John');

console.log(sayHelloToJohn('morning')); // 'Hello John, good morning!'
console.log(sayHelloToJohn('evening')); // 'Hello John, good evening!'

// Reusable specialized functions
const greetFormally = greet('Good day');
const greetCasually = greet('Hey');

console.log(greetFormally('Sir')('afternoon'));
console.log(greetCasually('Buddy')('night'));

// Generic curry function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...nextArgs) {
      return curried.apply(this, args.concat(nextArgs));
    };
  };
}

// Use curry helper
function multiply(a, b, c) {
  return a * b * c;
}

const curriedMultiply = curry(multiply);

console.log(curriedMultiply(2)(3)(4));     // 24
console.log(curriedMultiply(2, 3)(4));     // 24
console.log(curriedMultiply(2)(3, 4));     // 24
console.log(curriedMultiply(2, 3, 4));     // 24

4. What is an IIFE (Immediately Invoked Function Expression)?

Difficulty: MediumType: MCQTopic: JS Modules

An IIFE is a function that runs immediately after it is defined. It is wrapped in parentheses and followed by another set of parentheses to invoke it. IIFEs create a new scope, preventing variables from polluting the global scope. They were commonly used before ES6 modules for encapsulation. IIFEs can return values or objects. The pattern is useful for initialization code that runs once. Modern JavaScript uses modules instead, but IIFEs still appear in legacy code and are good interview questions.

Example code

// Basic IIFE syntax
(function() {
  console.log('I run immediately!');
})();

// Arrow function IIFE
(() => {
  console.log('Arrow IIFE');
})();

// IIFE with parameters
(function(name) {
  console.log('Hello ' + name);
})('John');

// IIFE returning a value
const result = (function() {
  return 2 + 2;
})();

console.log(result); // 4

// Creating private variables
const counter = (function() {
  let count = 0; // Private variable
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
// console.log(counter.count); // undefined (private!)

// Module pattern with IIFE
const myModule = (function() {
  // Private
  const privateVar = 'I am private';
  
  function privateFunction() {
    console.log(privateVar);
  }
  
  // Public API
  return {
    publicMethod: function() {
      privateFunction();
    },
    publicVar: 'I am public'
  };
})();

myModule.publicMethod(); // 'I am private'
console.log(myModule.publicVar); // 'I am public'
// console.log(myModule.privateVar); // undefined

// Avoid global pollution
(function() {
  var temp = 'Only exists in this scope';
  // Do something
})();

// console.log(temp); // ReferenceError

// Classic var loop fix
for (var i = 0; i < 3; i++) {
  (function(index) {
    setTimeout(function() {
      console.log(index); // 0, 1, 2
    }, 100);
  })(i);
}

5. What does it mean that JavaScript has first-class functions?

Difficulty: EasyType: MCQTopic: Functional JS

First-class functions mean functions are treated as first-class citizens, just like any other value. You can assign functions to variables. Pass functions as arguments to other functions. Return functions from functions. Store functions in data structures. This enables higher-order functions, callbacks, closures, and functional programming patterns. First-class functions are fundamental to JavaScript's flexibility. Many JavaScript patterns depend on this feature. Understanding this concept is essential for advanced JavaScript.

Example code

// 1. Assign function to variable
const greet = function(name) {
  return 'Hello ' + name;
};

console.log(greet('John')); // 'Hello John'

// 2. Pass function as argument
function executeFunction(fn, value) {
  return fn(value);
}

const result = executeFunction(greet, 'Alice');
console.log(result); // 'Hello Alice'

// 3. Return function from function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// 4. Store functions in array
const operations = [
  function(a, b) { return a + b; },
  function(a, b) { return a - b; },
  function(a, b) { return a * b; }
];

console.log(operations[0](5, 3)); // 8
console.log(operations[1](5, 3)); // 2
console.log(operations[2](5, 3)); // 15

// 5. Store functions in object
const calculator = {
  add: function(a, b) { return a + b; },
  subtract: function(a, b) { return a - b; },
  multiply: function(a, b) { return a * b; }
};

console.log(calculator.add(10, 5)); // 15

// Array methods use first-class functions
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(n) {
  return n * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

// Callback pattern
function fetchData(callback) {
  setTimeout(function() {
    callback('Data loaded');
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // 'Data loaded'
});

6. Explain call, apply, and bind methods in detail. When would you use each? Provide examples.

Difficulty: HardType: SubjectiveTopic: this Binding

Call, apply, and bind are methods for controlling the this value in function calls. They are essential for managing context in JavaScript. Call method: Invokes a function with specified this value and individual arguments. First parameter is this, rest are function arguments. Executes immediately. Use when you know arguments individually. Apply method: Invokes a function with specified this value and array of arguments. First parameter is this, second is array. Executes immediately. Use when you have arguments in an array. Bind method: Creates a new function with permanently bound this value. Returns new function, does not execute immediately. Can pre-set arguments for partial application. Use for event handlers, callbacks, or creating specialized functions. Key differences: Call and apply execute immediately, bind returns new function. Call takes comma-separated arguments, apply takes array. Bind permanently fixes this, call and apply use it for single invocation. When to use call: Function borrowing. Constructor chaining in inheritance. When you have individual arguments. When to use apply: When arguments are in an array. Using array methods on array-like objects. Math methods with array of numbers. When to use bind: Event handlers that need specific this. Callbacks that must maintain context. Partial application. Creating reusable specialized functions. React class component methods. Common use cases: Borrowing array methods for arguments or NodeList. Maintaining this in setTimeout or event handlers. Constructor chaining. Converting array-like to array. Function composition and currying. All three methods are fundamental to JavaScript and appear frequently in interviews.

Example code

// CALL METHOD

const person = {
  name: 'John',
  greet: function(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
  }
};

const anotherPerson = { name: 'Jane' };

// Use call to invoke with different this
person.greet.call(anotherPerson, 'Hello', '!'); // 'Hello, Jane!'

// Constructor chaining
function Animal(name, type) {
  this.name = name;
  this.type = type;
}

function Dog(name, breed) {
  Animal.call(this, name, 'Dog'); // Call parent constructor
  this.breed = breed;
}

const buddy = new Dog('Buddy', 'Labrador');
console.log(buddy); // {name: 'Buddy', type: 'Dog', breed: 'Labrador'}

// APPLY METHOD

// Same as call but with array
person.greet.apply(anotherPerson, ['Hi', '...']); // 'Hi, Jane...'

// Math.max with array
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max); // 7

// Modern alternative with spread
const max2 = Math.max(...numbers);

// Converting arguments to array
function toArray() {
  return Array.prototype.slice.apply(arguments);
}

const arr = toArray(1, 2, 3, 4);
console.log(arr); // [1, 2, 3, 4]

// BIND METHOD

// Create new function with bound this
const greetJohn = person.greet.bind(person);
greetJohn('Hey', '!!!'); // 'Hey, John!!!'

// setTimeout problem and solution
const user = {
  name: 'Alice',
  printName: function() {
    console.log(this.name);
  }
};

// Problem: this is lost
setTimeout(user.printName, 1000); // undefined

// Solution: bind this
setTimeout(user.printName.bind(user), 1000); // 'Alice'

// Event handler
const button = {
  label: 'Click me',
  handleClick: function() {
    console.log(this.label + ' was clicked');
  }
};

// document.getElementById('btn')
//   .addEventListener('click', button.handleClick.bind(button));

// Partial application with bind
function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
const triple = multiply.bind(null, 3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// COMPARISON EXAMPLE

function introduce(greeting, profession) {
  console.log(`${greeting}, I am ${this.name}, a ${profession}`);
}

const john = { name: 'John' };

// call - execute now, individual args
introduce.call(john, 'Hello', 'Developer');
// 'Hello, I am John, a Developer'

// apply - execute now, array of args
introduce.apply(john, ['Hi', 'Engineer']);
// 'Hi, I am John, a Engineer'

// bind - return new function
const johnIntro = introduce.bind(john);
johnIntro('Hey', 'Programmer');
// 'Hey, I am John, a Programmer'

// REAL-WORLD SCENARIOS

// Scenario 1: React class component
class MyComponent {
  constructor() {
    this.state = { count: 0 };
    // Bind methods in constructor
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
}

// Scenario 2: Array-like to Array
function convertToArray() {
  return Array.prototype.slice.call(arguments);
}

// Scenario 3: Finding max in array of arrays
const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const maxValues = data.map(arr => Math.max.apply(null, arr));
console.log(maxValues); // [3, 6, 9]

// Scenario 4: Safe hasOwnProperty
const obj = Object.create(null);
const hasProp = Object.prototype.hasOwnProperty.call(obj, 'key');

// IMPLEMENTATION EXAMPLES

// Simple call implementation
Function.prototype.myCall = function(context, ...args) {
  context = context || globalThis;
  const fnSymbol = Symbol();
  context[fnSymbol] = this;
  const result = context[fnSymbol](...args);
  delete context[fnSymbol];
  return result;
};

// Simple bind implementation
Function.prototype.myBind = function(context, ...boundArgs) {
  const fn = this;
  return function(...args) {
    return fn.apply(context, [...boundArgs, ...args]);
  };
};

7. What does the call() method do in JavaScript?

Difficulty: MediumType: MCQTopic: this Binding

The call method invokes a function with a specific this value and individual arguments. First parameter is the object to use as this inside the function. Remaining parameters are passed as individual arguments to the function. Call executes the function immediately. It is useful for function borrowing, where you use a method from one object on another object. Call is commonly used to invoke parent constructors in inheritance. Understanding call is essential for controlling this in JavaScript.

Example code

// Basic call usage
function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'John' };

// Call greet with person as this
greet.call(person, 'Hello', '!'); // 'Hello, John!'

// Without call, this would be undefined or window
greet('Hello', '!'); // 'Hello, undefined!' (this not set)

// Function borrowing
const person1 = {
  name: 'John',
  greet: function() {
    console.log('Hi, I am ' + this.name);
  }
};

const person2 = { name: 'Jane' };

// Borrow greet method from person1
person1.greet.call(person2); // 'Hi, I am Jane'

// Array-like objects
function sum() {
  // arguments is array-like, not real array
  const args = Array.prototype.slice.call(arguments);
  return args.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

// Constructor chaining
function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name); // Call parent constructor
  this.breed = breed;
}

const buddy = new Dog('Buddy', 'Labrador');
console.log(buddy.name);  // 'Buddy'
console.log(buddy.breed); // 'Labrador'

8. What is the difference between call() and apply()?

Difficulty: MediumType: MCQTopic: this Binding

Call and apply both invoke functions with a specified this value, but differ in how they accept arguments. Call takes individual arguments separated by commas. First argument is this, rest are function parameters. Apply takes an array of arguments. First argument is this, second is an array containing all function parameters. Both execute the function immediately. Use call when you know arguments individually. Use apply when you have arguments in an array. Modern JavaScript often uses spread operator instead of apply. Remember: Call is comma separated, Apply takes an array.

Example code

function introduce(greeting, profession) {
  console.log(greeting + ', I am ' + this.name + ', a ' + profession);
}

const person = { name: 'John' };

// call - individual arguments
introduce.call(person, 'Hello', 'Developer');
// 'Hello, I am John, a Developer'

// apply - array of arguments
introduce.apply(person, ['Hello', 'Developer']);
// 'Hello, I am John, a Developer'

// Useful when you already have array
const args = ['Hi', 'Engineer'];
introduce.apply(person, args);

// Math.max with apply (classic use case)
const numbers = [5, 6, 2, 3, 7, 1];

// apply spreads array as individual arguments
const max = Math.max.apply(null, numbers);
console.log(max); // 7

// Modern alternative with spread operator
const max2 = Math.max(...numbers);
console.log(max2); // 7

// call with spread (modern approach)
introduce.call(person, ...args);

// Choosing between call and apply
function sum(a, b, c) {
  return a + b + c;
}

// If you have values separately
const result1 = sum.call(null, 1, 2, 3); // 6

// If you have values in array
const nums = [1, 2, 3];
const result2 = sum.apply(null, nums); // 6

// Memory trick:
// call: c for comma
// apply: a for array

9. What does the bind() method return?

Difficulty: MediumType: MCQTopic: this Binding

Bind creates a new function with a permanently bound this value. Unlike call and apply, bind does not execute the function immediately. First parameter sets the this value. Additional parameters are pre-set as arguments. The returned function can be called later, and this will always be the bound value. Bind is useful for event handlers, callbacks, and partial application. You can only bind this once. Calling bind again on a bound function does nothing. Bind is essential for maintaining context in callbacks and React components.

Example code

const person = {
  name: 'John',
  greet: function() {
    console.log('Hi, I am ' + this.name);
  }
};

// bind creates new function
const greetFunc = person.greet.bind(person);

// Call later, this is still person
greetFunc(); // 'Hi, I am John'

// Without bind, this is lost
const greetLost = person.greet;
greetLost(); // 'Hi, I am undefined' (this is window or undefined)

// Event handler example
const button = document.getElementById('btn');

const user = {
  name: 'Alice',
  handleClick: function() {
    console.log(this.name + ' clicked');
  }
};

// Wrong: this will be button element
// button.addEventListener('click', user.handleClick);

// Right: bind this to user
button.addEventListener('click', user.handleClick.bind(user));
// Now clicking shows 'Alice clicked'

// Partial application with bind
function multiply(a, b) {
  return a * b;
}

// Pre-set first argument
const double = multiply.bind(null, 2);
console.log(double(5)); // 10 (2 * 5)
console.log(double(7)); // 14 (2 * 7)

const triple = multiply.bind(null, 3);
console.log(triple(4)); // 12 (3 * 4)

// setTimeout example
const obj = {
  value: 42,
  printValue: function() {
    console.log(this.value);
  }
};

setTimeout(obj.printValue, 1000); // undefined (lost this)
setTimeout(obj.printValue.bind(obj), 1000); // 42 (preserved this)

// Cannot rebind
const bound = greetFunc.bind({ name: 'Jane' });
bound(); // Still 'Hi, I am John' (first bind wins)

10. What is function composition?

Difficulty: HardType: MCQTopic: Functional JS

Function composition is combining two or more functions to create a new function where the output of one function becomes the input of the next. It follows the mathematical concept of composition: f composed with g of x equals f of g of x. Composition makes code more readable and reusable by breaking complex operations into simple functions. The compose function typically executes from right to left. Pipe function executes from left to right. Composition is a core principle of functional programming. It enables building complex behavior from simple, testable functions.

Example code

// Simple functions
const add5 = x => x + 5;
const multiply2 = x => x * 2;
const subtract3 = x => x - 3;

// Manual composition
const result = subtract3(multiply2(add5(10)));
console.log(result); // (10 + 5) * 2 - 3 = 27

// Compose function (right to left)
function compose(...fns) {
  return function(value) {
    return fns.reduceRight((acc, fn) => fn(acc), value);
  };
}

const calculate = compose(subtract3, multiply2, add5);
console.log(calculate(10)); // 27

// Pipe function (left to right)
function pipe(...fns) {
  return function(value) {
    return fns.reduce((acc, fn) => fn(acc), value);
  };
}

const calculate2 = pipe(add5, multiply2, subtract3);
console.log(calculate2(10)); // 27 (same result)

// Practical example - data transformation
const users = [
  { name: 'john', age: 25, active: true },
  { name: 'jane', age: 30, active: false },
  { name: 'bob', age: 35, active: true }
];

// Individual functions
const filterActive = users => users.filter(u => u.active);
const mapNames = users => users.map(u => u.name);
const capitalizeNames = names => names.map(n => n.toUpperCase());

// Compose them
const getActiveUserNames = pipe(
  filterActive,
  mapNames,
  capitalizeNames
);

console.log(getActiveUserNames(users)); // ['JOHN', 'BOB']

// String manipulation example
const trim = str => str.trim();
const toLowerCase = str => str.toLowerCase();
const removeSpaces = str => str.replace(/\s+/g, '-');

const slugify = pipe(trim, toLowerCase, removeSpaces);

console.log(slugify('  Hello World  ')); // 'hello-world'

// With arrow functions
const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x * x;

const complexCalc = pipe(double, addTen, square);
console.log(complexCalc(5)); // ((5 * 2) + 10) ^ 2 = 400

// Reusable composed functions
const validateEmail = pipe(
  email => email.trim(),
  email => email.toLowerCase(),
  email => email.includes('@')
);

console.log(validateEmail('  Test@Email.com  ')); // true

11. What is partial application?

Difficulty: MediumType: MCQTopic: Functional JS

Partial application creates a new function by pre-filling some arguments of an existing function. It is different from currying. Currying transforms a multi-argument function into nested single-argument functions. Partial application fixes some arguments and returns a function that takes remaining arguments. Partial application uses bind or custom functions to fix arguments. It creates specialized functions from generic ones. Partial application improves code reusability and readability. It is commonly used for creating utility functions.

Example code

// Original function
function multiply(a, b, c) {
  return a * b * c;
}

// Partial application with bind
const multiplyBy2 = multiply.bind(null, 2);
console.log(multiplyBy2(3, 4)); // 2 * 3 * 4 = 24

const multiplyBy2And3 = multiply.bind(null, 2, 3);
console.log(multiplyBy2And3(4)); // 2 * 3 * 4 = 24

// Custom partial function
function partial(fn, ...fixedArgs) {
  return function(...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs);
  };
}

const double = partial(multiply, 2, 1);
console.log(double(5)); // 2 * 1 * 5 = 10

// Practical example - logging
function log(level, timestamp, message) {
  console.log(`[${level}] ${timestamp}: ${message}`);
}

// Create specialized loggers
const errorLogger = partial(log, 'ERROR');
const infoLogger = partial(log, 'INFO');

errorLogger('2024-01-01', 'Something went wrong');
// [ERROR] 2024-01-01: Something went wrong

infoLogger('2024-01-01', 'App started');
// [INFO] 2024-01-01: App started

// API request example
function fetch(method, url, options) {
  console.log(`${method} ${url}`, options);
}

const get = partial(fetch, 'GET');
const post = partial(fetch, 'POST');
const put = partial(fetch, 'PUT');

get('/api/users', { headers: {} });
post('/api/users', { body: {name: 'John'} });

// Difference from currying

// Currying
const curriedMultiply = a => b => c => a * b * c;
console.log(curriedMultiply(2)(3)(4)); // Must call with one arg at a time

// Partial application
const partialMultiply = partial(multiply, 2);
console.log(partialMultiply(3, 4)); // Can call with multiple args

// Combining with composition
const add = (a, b) => a + b;
const addFive = partial(add, 5);
const multiplyByTwo = x => x * 2;

const addFiveAndDouble = pipe(addFive, multiplyByTwo);
console.log(addFiveAndDouble(10)); // (10 + 5) * 2 = 30

// Event handler example
function handleClick(prefix, event) {
  console.log(prefix, event.target);
}

const handleButtonClick = partial(handleClick, 'Button clicked:');
// button.addEventListener('click', handleButtonClick);

12. What is function borrowing in JavaScript?

Difficulty: EasyType: MCQTopic: this Binding

Function borrowing is using a method from one object on another object using call, apply, or bind. The borrowed method operates on the borrower object as if it were its own method. Common use case is borrowing array methods for array-like objects. Function borrowing enables code reuse without inheritance. It is a powerful technique in JavaScript for leveraging existing methods. Understanding function borrowing shows mastery of this and context.

Example code

// Basic function borrowing
const person1 = {
  name: 'John',
  greet: function() {
    console.log('Hello, I am ' + this.name);
  }
};

const person2 = { name: 'Jane' };

// Borrow greet from person1
person1.greet.call(person2); // 'Hello, I am Jane'

// Array method borrowing (very common)
function sum() {
  // arguments is array-like, not array
  const arr = Array.prototype.slice.call(arguments);
  return arr.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

// Modern alternative
function sum2(...args) {
  return args.reduce((total, num) => total + num, 0);
}

// Borrowing array methods for NodeList
const divs = document.querySelectorAll('div');
// divs is NodeList, not Array

// Borrow forEach
Array.prototype.forEach.call(divs, function(div) {
  console.log(div);
});

// Borrow map
const texts = Array.prototype.map.call(divs, function(div) {
  return div.textContent;
});

// Object method borrowing
const obj1 = {
  data: [1, 2, 3],
  printData: function() {
    console.log(this.data);
  }
};

const obj2 = { data: [4, 5, 6] };

obj1.printData.call(obj2); // [4, 5, 6]

// Practical example - checking array
function isArray(obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}

console.log(isArray([1, 2, 3])); // true
console.log(isArray('hello'));   // false

// hasOwnProperty borrowing (safe)
const obj = Object.create(null);
// obj.hasOwnProperty('x'); // Error! (no prototype)

const result = Object.prototype.hasOwnProperty.call(obj, 'x');
console.log(result); // false (safe!)

// Borrowing Math methods
const numbers = { 0: 5, 1: 2, 2: 9, length: 3 };

const max = Math.max.apply(null, 
  Array.prototype.slice.call(numbers, 0, numbers.length)
);
console.log(max); // 9

13. What are pure functions? Explain their benefits and provide examples of pure and impure functions.

Difficulty: MediumType: SubjectiveTopic: Functional JS

Pure functions are functions that satisfy two conditions: they return the same output for the same input and have no side effects. First condition: Deterministic behavior: Given the same arguments, pure function always returns the same result. The output depends only on input parameters. No dependency on external state or global variables. Predictable and reliable behavior. Second condition: No side effects: Does not modify external state or global variables. Does not mutate function arguments. Does not perform I/O operations like console.log, file read write, or network requests. Does not modify DOM. Does not generate random numbers or use current time. Benefits of pure functions: Easier to test because behavior is predictable. Easier to debug with no hidden dependencies. Can be safely parallelized or cached with memoization. Enable referential transparency, can replace function call with its result. More maintainable and understandable code. Support functional programming patterns. Common impure operations: Modifying global variables. Mutating function parameters. Console logging or any I/O. Using Math.random or Date. Modifying DOM. Making API calls. Reading from or writing to files. Making impure functions pure: Return new values instead of modifying existing ones. Accept all dependencies as parameters. Use pure functions for calculations, separate I/O. Return new objects and arrays instead of mutating. When impure functions are necessary: User interaction and event handling. API calls and data fetching. Logging and debugging. File system operations. Any I/O operations. Best practices: Maximize pure functions in your codebase. Isolate impure code at the edges of your application. Keep business logic pure. Use pure functions for data transformations. Understanding pure functions is fundamental to functional programming and writing maintainable code.

Example code

// PURE FUNCTIONS

// Pure - same input, same output, no side effects
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // Always 5
console.log(add(2, 3)); // Always 5

// Pure - doesn't modify input
function doubleArray(arr) {
  return arr.map(n => n * 2);
}

const numbers = [1, 2, 3];
const doubled = doubleArray(numbers);
console.log(numbers); // [1, 2, 3] (unchanged)
console.log(doubled); // [2, 4, 6]

// Pure - string manipulation
function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

console.log(capitalize('hello')); // 'Hello'
console.log(capitalize('hello')); // 'Hello' (same)

// Pure - object transformation
function updateUser(user, updates) {
  return { ...user, ...updates }; // New object
}

const user = { name: 'John', age: 30 };
const updated = updateUser(user, { age: 31 });
console.log(user.age);    // 30 (unchanged)
console.log(updated.age); // 31

// IMPURE FUNCTIONS

// Impure - modifies external variable
let total = 0;
function addToTotal(value) {
  total += value; // Side effect!
  return total;
}

console.log(addToTotal(5)); // 5
console.log(addToTotal(5)); // 10 (different!)

// Impure - mutates argument
function addItemImpure(arr, item) {
  arr.push(item); // Mutates input!
  return arr;
}

// Impure - I/O operation
function logValue(value) {
  console.log(value); // Side effect!
  return value;
}

// Impure - uses external state
let multiplier = 2;
function multiplyByMultiplier(n) {
  return n * multiplier; // Depends on external variable
}

console.log(multiplyByMultiplier(5)); // 10
multiplier = 3;
console.log(multiplyByMultiplier(5)); // 15 (different!)

// Impure - random output
function getRandomNumber() {
  return Math.random(); // Non-deterministic
}

// Impure - current time
function getCurrentTimestamp() {
  return Date.now(); // Different each call
}

// CONVERTING IMPURE TO PURE

// Impure version
function discountPriceImpure(price) {
  const discount = 0.1; // Hard-coded
  console.log('Calculating discount'); // Side effect
  return price - (price * discount);
}

// Pure version
function discountPricePure(price, discount) {
  return price - (price * discount);
}

// Separate side effects
function calculateAndLog(price, discount) {
  const result = discountPricePure(price, discount); // Pure
  console.log('Result:', result); // Impure, but isolated
  return result;
}

// REAL-WORLD EXAMPLES

// Pure - shopping cart total
function calculateTotal(items) {
  return items.reduce((sum, item) => {
    return sum + (item.price * item.quantity);
  }, 0);
}

const cart = [
  { name: 'Book', price: 10, quantity: 2 },
  { name: 'Pen', price: 2, quantity: 5 }
];

console.log(calculateTotal(cart)); // 30

// Pure - filtering and mapping
function getActiveUserNames(users) {
  return users
    .filter(user => user.active)
    .map(user => user.name);
}

// Pure - form validation
function validateEmail(email) {
  return email.includes('@') && email.includes('.');
}

function validatePassword(password) {
  return password.length >= 8;
}

function validateForm(data) {
  return {
    emailValid: validateEmail(data.email),
    passwordValid: validatePassword(data.password)
  };
}

// BENEFITS DEMONSTRATION

// 1. Easy testing
function multiply(a, b) {
  return a * b;
}

// Simple test
console.assert(multiply(2, 3) === 6);
console.assert(multiply(2, 3) === 6); // Always same!

// 2. Memoization (caching)
function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) {
      console.log('From cache');
      return cache[key];
    }
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

// Only works reliably with pure functions
const memoizedMultiply = memoize(multiply);
console.log(memoizedMultiply(5, 6)); // Computes
console.log(memoizedMultiply(5, 6)); // From cache

// 3. Parallelization (conceptual)
const data = [1, 2, 3, 4, 5, 6, 7, 8];

// Safe to parallelize because pure
const doubled = data.map(n => n * 2);

// BEST PRACTICES

// Do: Keep business logic pure
function calculateDiscount(price, percentage) {
  return price * (percentage / 100);
}

// Do: Separate I/O from logic
function processOrder(order) {
  const total = calculateTotal(order.items); // Pure
  saveToDatabase(total); // Impure, but separated
  return total;
}

// Don't: Mix concerns
function badCalculate(price) {
  console.log('Calculating...'); // Impure!
  const result = price * 0.9;
  saveToDatabase(result); // Impure!
  return result;
}

14. What is a pure function?

Difficulty: MediumType: MCQTopic: Functional JS

A pure function has two requirements: Same input always produces same output. The function is deterministic and predictable. No side effects. The function does not modify external state, does not mutate arguments, does not perform I/O, and does not change global variables. Pure functions are easier to test, debug, and reason about. They enable functional programming patterns like memoization. Impure functions have side effects or depend on external state. Pure functions improve code quality and maintainability.

Example code

// PURE FUNCTIONS

// Pure - same input, same output, no side effects
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // Always 5
console.log(add(2, 3)); // Always 5

// Pure - doesn't modify input
function double(arr) {
  return arr.map(n => n * 2);
}

const nums = [1, 2, 3];
const doubled = double(nums);
console.log(nums);    // [1, 2, 3] (unchanged)
console.log(doubled); // [2, 4, 6]

// IMPURE FUNCTIONS

// Impure - modifies external variable
let total = 0;
function addToTotal(value) {
  total += value; // Side effect!
  return total;
}

console.log(addToTotal(5)); // 5
console.log(addToTotal(5)); // 10 (different output!)

// Impure - modifies argument
function addItem(arr, item) {
  arr.push(item); // Mutates input!
  return arr;
}

// Impure - depends on external state
function getCurrentTime() {
  return new Date(); // Different output each time!
}

// Impure - I/O operation
function logMessage(msg) {
  console.log(msg); // Side effect!
}

// Impure - random output
function rollDice() {
  return Math.floor(Math.random() * 6) + 1; // Non-deterministic!
}

// MAKING IMPURE FUNCTIONS PURE

// Impure version
function addItemImpure(arr, item) {
  arr.push(item);
  return arr;
}

// Pure version
function addItemPure(arr, item) {
  return [...arr, item]; // Return new array
}

const original = [1, 2, 3];
const newArr = addItemPure(original, 4);
console.log(original); // [1, 2, 3] (unchanged)
console.log(newArr);   // [1, 2, 3, 4]

// BENEFITS OF PURE FUNCTIONS

// 1. Easy to test
function multiply(a, b) {
  return a * b;
}

console.assert(multiply(2, 3) === 6);
console.assert(multiply(2, 3) === 6); // Always same!

// 2. Memoization (caching)
function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) {
      return cache[key];
    }
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

const expensiveCalc = memoize((n) => {
  console.log('Computing...');
  return n * n;
});

console.log(expensiveCalc(5)); // Computing... 25
console.log(expensiveCalc(5)); // 25 (from cache, no computing)

More sets in Javascript

JavaScript Fundamentals(15+ Questions)
Operators and Functions(15+ Questions)
Arrays and Loops(15+ Questions)
Functions - Part 1(13+ Questions)
JavaScript Core Interview Essentials(13+ Questions)
Closures and Asynchronous JavaScript(14+ Questions)
Objects & Prototypes(12+ Questions)
Objects and this Keyword(15+ Questions)
Strings and Template Literals(15+ Questions)
Prototypes and Inheritance(14+ Questions)
ES6+ Advanced Features(12+ Questions)
Performance Optimization and Advanced Techniques(10+ Questions)
DOM Manipulation and Events(12+ Questions)

Explore related subjects

HTML CSS Typescript SQL & Databases React Node Js

Continue your preparation

For complete preparation, combine this set with full subject-wise practice for Javascript. You can also explore other subjects and sets from the links below.

Quick navigation:Javascript subject page•All subjects

// CURRYING // Regular function function add(a, b, c) { return a + b + c; } console.log(add(1, 2, 3)); // 6 // Curried version - each takes one argument function addCurried(a) { return function(b) { return function(c) { return a + b + c; }; }; } console.log(addCurried(1)(2)(3)); // 6 // Arrow function currying const addArrow = a => b => c => a + b + c; // Creating specialized functions const add1 = addArrow(1); const add1And2 = add1(2); console.log(add1And2(3)); // 6 console.log(add1And2(5)); // 8 // Generic curry function function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return function(...nextArgs) { return curried.apply(this, args.concat(nextArgs)); }; }; } const curriedAdd = curry(add); // All these work: console.log(curriedAdd(1)(2)(3)); // 6 console.log(curriedAdd(1, 2)(3)); // 6 console.log(curriedAdd(1)(2, 3)); // 6 console.log(curriedAdd(1, 2, 3)); // 6 // PARTIAL APPLICATION function multiply(a, b, c) { return a * b * c; } // Using bind for partial application const multiplyBy2 = multiply.bind(null, 2); console.log(multiplyBy2(3, 4)); // 24 (2 * 3 * 4) // Custom partial function function partial(fn, ...fixedArgs) { return function(...remainingArgs) { return fn(...fixedArgs, ...remainingArgs); }; } const double = partial(multiply, 2, 1); console.log(double(5)); // 10 (2 * 1 * 5) // KEY DIFFERENCE DEMONSTRATION // Currying - MUST call with one arg at a time (or use curry helper) const curriedMultiply = a => b => c => a * b * c; // curriedMultiply(2, 3, 4); // Error! Need ()()() syntax console.log(curriedMultiply(2)(3)(4)); // 24 // Partial - can call with multiple args const partialMultiply = partial(multiply, 2); console.log(partialMultiply(3, 4)); // 24 (works!) // PRACTICAL EXAMPLES // Example 1: Logging system with currying const log = level => timestamp => message => { console.log(`[${level}] ${timestamp}: ${message}`); }; const errorLog = log('ERROR'); const errorLogToday = errorLog('2024-01-15'); errorLogToday('Database connection failed'); errorLogToday('Timeout error'); // Example 2: API calls with partial application function apiCall(method, url, headers, body) { console.log(`${method} ${url}`, { headers, body }); } const postRequest = partial(apiCall, 'POST'); const postToUsers = partial(postRequest, '/api/users'); postToUsers({ auth: 'token' }, { name: 'John' }); // Example 3: Discount calculator with currying const discount = percent => price => { return price - (price * percent / 100); }; const tenPercentOff = discount(10); const twentyPercentOff = discount(20); console.log(tenPercentOff(100)); // 90 console.log(twentyPercentOff(100)); // 80 // Example 4: Validation with partial application function validate(type, message, value) { if (type === 'email') { return value.includes('@') || message; } if (type === 'minLength') { return value.length >= 8 || message; } } const validateEmail = partial(validate, 'email', 'Invalid email'); const validatePassword = partial(validate, 'minLength', 'Too short'); console.log(validateEmail('test@email.com')); // true console.log(validatePassword('12345')); // 'Too short' // Example 5: Function composition with currying const add5 = x => x + 5; const multiply2 = x => x * 2; const subtract3 = x => x - 3; // Compose works better with curried functions const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x); const calculate = compose(subtract3, multiply2, add5); console.log(calculate(10)); // ((10 + 5) * 2) - 3 = 27 // WHEN TO USE WHAT // Use currying for: // - Function composition // - Creating chains of specialized functions // - Functional programming patterns // Use partial application for: // - Creating utility functions // - Event handlers with context // - Configuration functions // - Everyday practical coding

// BASIC IIFE SYNTAX // Function declaration (not IIFE) function test() { console.log('Not immediately invoked'); } // IIFE - executes immediately (function() { console.log('Immediately invoked!'); })(); // Arrow function IIFE (() => { console.log('Arrow IIFE'); })(); // Alternative syntax (both work) (function() { console.log('Style 1'); }()); // IIFE with parameters (function(name, age) { console.log(name + ' is ' + age); })('John', 30); // IIFE returning a value const result = (function() { return 2 + 2; })(); console.log(result); // 4 // DATA PRIVACY WITH IIFE const counter = (function() { // Private variable let count = 0; // Private function function validateIncrement(value) { return value > 0; } // Public API return { increment: function(value = 1) { if (validateIncrement(value)) { count += value; } return count; }, decrement: function() { count--; return count; }, getCount: function() { return count; }, reset: function() { count = 0; } }; })(); console.log(counter.increment()); // 1 console.log(counter.increment(5)); // 6 console.log(counter.getCount()); // 6 // console.log(counter.count); // undefined (private!) // counter.validateIncrement(); // Error (private!) // MODULE PATTERN const calculator = (function() { // Private state let history = []; // Private helper function addToHistory(operation) { history.push(operation); } // Public API return { add: function(a, b) { const result = a + b; addToHistory(`${a} + ${b} = ${result}`); return result; }, subtract: function(a, b) { const result = a - b; addToHistory(`${a} - ${b} = ${result}`); return result; }, getHistory: function() { return [...history]; // Return copy }, clearHistory: function() { history = []; } }; })(); console.log(calculator.add(5, 3)); // 8 console.log(calculator.subtract(10, 4)); // 6 console.log(calculator.getHistory()); // ['5 + 3 = 8', '10 - 4 = 6'] // REVEALING MODULE PATTERN const userModule = (function() { // Private let users = []; function validateUser(user) { return user.name && user.email; } function addUser(user) { if (validateUser(user)) { users.push(user); return true; } return false; } function getUsers() { return users; } function removeUser(email) { users = users.filter(u => u.email !== email); } // Reveal public methods return { add: addUser, getAll: getUsers, remove: removeUser }; })(); userModule.add({ name: 'John', email: 'john@example.com' }); console.log(userModule.getAll()); // SINGLETON PATTERN WITH IIFE const database = (function() { let instance; function createInstance() { return { connect: function() { console.log('Connected to database'); }, query: function(sql) { console.log('Executing:', sql); } }; } return { getInstance: function() { if (!instance) { instance = createInstance(); } return instance; } }; })(); const db1 = database.getInstance(); const db2 = database.getInstance(); console.log(db1 === db2); // true (same instance) // AVOIDING GLOBAL POLLUTION // Bad - pollutes global scope var temp = 'global'; var helper = function() {}; // Good - isolated in IIFE (function() { var temp = 'isolated'; var helper = function() {}; // Do work })(); // console.log(temp); // 'global' (not affected) // console.log(helper); // Still accessible // MODERN ALTERNATIVES // ES6 Modules // export const myModule = { ... }; // import { myModule } from './module.js'; // Block scope { const privateVar = 'isolated'; // Use privateVar } // console.log(privateVar); // ReferenceError // Class with private fields (ES2022) class MyClass { #privateField = 'private'; getPrivate() { return this.#privateField; } }

// Regular function function add(a, b, c) { return a + b + c; } console.log(add(1, 2, 3)); // 6 // Curried version function addCurried(a) { return function(b) { return function(c) { return a + b + c; }; }; } console.log(addCurried(1)(2)(3)); // 6 // Arrow function currying (cleaner) const addArrow = a => b => c => a + b + c; console.log(addArrow(1)(2)(3)); // 6 // Partial application with currying const add5 = addArrow(5); console.log(add5(3)(2)); // 10 const add5and3 = add5(3); console.log(add5and3(7)); // 15 // Practical example - greeting const greet = greeting => name => time => { return `${greeting} ${name}, good ${time}!`; }; const sayHello = greet('Hello'); const sayHelloToJohn = sayHello('John'); console.log(sayHelloToJohn('morning')); // 'Hello John, good morning!' console.log(sayHelloToJohn('evening')); // 'Hello John, good evening!' // Reusable specialized functions const greetFormally = greet('Good day'); const greetCasually = greet('Hey'); console.log(greetFormally('Sir')('afternoon')); console.log(greetCasually('Buddy')('night')); // Generic curry function function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return function(...nextArgs) { return curried.apply(this, args.concat(nextArgs)); }; }; } // Use curry helper function multiply(a, b, c) { return a * b * c; } const curriedMultiply = curry(multiply); console.log(curriedMultiply(2)(3)(4)); // 24 console.log(curriedMultiply(2, 3)(4)); // 24 console.log(curriedMultiply(2)(3, 4)); // 24 console.log(curriedMultiply(2, 3, 4)); // 24

// Basic IIFE syntax (function() { console.log('I run immediately!'); })(); // Arrow function IIFE (() => { console.log('Arrow IIFE'); })(); // IIFE with parameters (function(name) { console.log('Hello ' + name); })('John'); // IIFE returning a value const result = (function() { return 2 + 2; })(); console.log(result); // 4 // Creating private variables const counter = (function() { let count = 0; // Private variable return { increment: function() { count++; return count; }, decrement: function() { count--; return count; }, getCount: function() { return count; } }; })(); console.log(counter.increment()); // 1 console.log(counter.increment()); // 2 console.log(counter.getCount()); // 2 // console.log(counter.count); // undefined (private!) // Module pattern with IIFE const myModule = (function() { // Private const privateVar = 'I am private'; function privateFunction() { console.log(privateVar); } // Public API return { publicMethod: function() { privateFunction(); }, publicVar: 'I am public' }; })(); myModule.publicMethod(); // 'I am private' console.log(myModule.publicVar); // 'I am public' // console.log(myModule.privateVar); // undefined // Avoid global pollution (function() { var temp = 'Only exists in this scope'; // Do something })(); // console.log(temp); // ReferenceError // Classic var loop fix for (var i = 0; i < 3; i++) { (function(index) { setTimeout(function() { console.log(index); // 0, 1, 2 }, 100); })(i); }

// 1. Assign function to variable const greet = function(name) { return 'Hello ' + name; }; console.log(greet('John')); // 'Hello John' // 2. Pass function as argument function executeFunction(fn, value) { return fn(value); } const result = executeFunction(greet, 'Alice'); console.log(result); // 'Hello Alice' // 3. Return function from function function createMultiplier(multiplier) { return function(number) { return number * multiplier; }; } const double = createMultiplier(2); const triple = createMultiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15 // 4. Store functions in array const operations = [ function(a, b) { return a + b; }, function(a, b) { return a - b; }, function(a, b) { return a * b; } ]; console.log(operations[0](5, 3)); // 8 console.log(operations[1](5, 3)); // 2 console.log(operations[2](5, 3)); // 15 // 5. Store functions in object const calculator = { add: function(a, b) { return a + b; }, subtract: function(a, b) { return a - b; }, multiply: function(a, b) { return a * b; } }; console.log(calculator.add(10, 5)); // 15 // Array methods use first-class functions const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(function(n) { return n * 2; }); console.log(doubled); // [2, 4, 6, 8, 10] // Callback pattern function fetchData(callback) { setTimeout(function() { callback('Data loaded'); }, 1000); } fetchData(function(data) { console.log(data); // 'Data loaded' });

// CALL METHOD const person = { name: 'John', greet: function(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } }; const anotherPerson = { name: 'Jane' }; // Use call to invoke with different this person.greet.call(anotherPerson, 'Hello', '!'); // 'Hello, Jane!' // Constructor chaining function Animal(name, type) { this.name = name; this.type = type; } function Dog(name, breed) { Animal.call(this, name, 'Dog'); // Call parent constructor this.breed = breed; } const buddy = new Dog('Buddy', 'Labrador'); console.log(buddy); // {name: 'Buddy', type: 'Dog', breed: 'Labrador'} // APPLY METHOD // Same as call but with array person.greet.apply(anotherPerson, ['Hi', '...']); // 'Hi, Jane...' // Math.max with array const numbers = [5, 6, 2, 3, 7]; const max = Math.max.apply(null, numbers); console.log(max); // 7 // Modern alternative with spread const max2 = Math.max(...numbers); // Converting arguments to array function toArray() { return Array.prototype.slice.apply(arguments); } const arr = toArray(1, 2, 3, 4); console.log(arr); // [1, 2, 3, 4] // BIND METHOD // Create new function with bound this const greetJohn = person.greet.bind(person); greetJohn('Hey', '!!!'); // 'Hey, John!!!' // setTimeout problem and solution const user = { name: 'Alice', printName: function() { console.log(this.name); } }; // Problem: this is lost setTimeout(user.printName, 1000); // undefined // Solution: bind this setTimeout(user.printName.bind(user), 1000); // 'Alice' // Event handler const button = { label: 'Click me', handleClick: function() { console.log(this.label + ' was clicked'); } }; // document.getElementById('btn') // .addEventListener('click', button.handleClick.bind(button)); // Partial application with bind function multiply(a, b) { return a * b; } const double = multiply.bind(null, 2); const triple = multiply.bind(null, 3); console.log(double(5)); // 10 console.log(triple(5)); // 15 // COMPARISON EXAMPLE function introduce(greeting, profession) { console.log(`${greeting}, I am ${this.name}, a ${profession}`); } const john = { name: 'John' }; // call - execute now, individual args introduce.call(john, 'Hello', 'Developer'); // 'Hello, I am John, a Developer' // apply - execute now, array of args introduce.apply(john, ['Hi', 'Engineer']); // 'Hi, I am John, a Engineer' // bind - return new function const johnIntro = introduce.bind(john); johnIntro('Hey', 'Programmer'); // 'Hey, I am John, a Programmer' // REAL-WORLD SCENARIOS // Scenario 1: React class component class MyComponent { constructor() { this.state = { count: 0 }; // Bind methods in constructor this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ count: this.state.count + 1 }); } } // Scenario 2: Array-like to Array function convertToArray() { return Array.prototype.slice.call(arguments); } // Scenario 3: Finding max in array of arrays const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; const maxValues = data.map(arr => Math.max.apply(null, arr)); console.log(maxValues); // [3, 6, 9] // Scenario 4: Safe hasOwnProperty const obj = Object.create(null); const hasProp = Object.prototype.hasOwnProperty.call(obj, 'key'); // IMPLEMENTATION EXAMPLES // Simple call implementation Function.prototype.myCall = function(context, ...args) { context = context || globalThis; const fnSymbol = Symbol(); context[fnSymbol] = this; const result = context[fnSymbol](...args); delete context[fnSymbol]; return result; }; // Simple bind implementation Function.prototype.myBind = function(context, ...boundArgs) { const fn = this; return function(...args) { return fn.apply(context, [...boundArgs, ...args]); }; };

// Basic call usage function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'John' }; // Call greet with person as this greet.call(person, 'Hello', '!'); // 'Hello, John!' // Without call, this would be undefined or window greet('Hello', '!'); // 'Hello, undefined!' (this not set) // Function borrowing const person1 = { name: 'John', greet: function() { console.log('Hi, I am ' + this.name); } }; const person2 = { name: 'Jane' }; // Borrow greet method from person1 person1.greet.call(person2); // 'Hi, I am Jane' // Array-like objects function sum() { // arguments is array-like, not real array const args = Array.prototype.slice.call(arguments); return args.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4)); // 10 // Constructor chaining function Animal(name) { this.name = name; } function Dog(name, breed) { Animal.call(this, name); // Call parent constructor this.breed = breed; } const buddy = new Dog('Buddy', 'Labrador'); console.log(buddy.name); // 'Buddy' console.log(buddy.breed); // 'Labrador'

// Simple functions const add5 = x => x + 5; const multiply2 = x => x * 2; const subtract3 = x => x - 3; // Manual composition const result = subtract3(multiply2(add5(10))); console.log(result); // (10 + 5) * 2 - 3 = 27 // Compose function (right to left) function compose(...fns) { return function(value) { return fns.reduceRight((acc, fn) => fn(acc), value); }; } const calculate = compose(subtract3, multiply2, add5); console.log(calculate(10)); // 27 // Pipe function (left to right) function pipe(...fns) { return function(value) { return fns.reduce((acc, fn) => fn(acc), value); }; } const calculate2 = pipe(add5, multiply2, subtract3); console.log(calculate2(10)); // 27 (same result) // Practical example - data transformation const users = [ { name: 'john', age: 25, active: true }, { name: 'jane', age: 30, active: false }, { name: 'bob', age: 35, active: true } ]; // Individual functions const filterActive = users => users.filter(u => u.active); const mapNames = users => users.map(u => u.name); const capitalizeNames = names => names.map(n => n.toUpperCase()); // Compose them const getActiveUserNames = pipe( filterActive, mapNames, capitalizeNames ); console.log(getActiveUserNames(users)); // ['JOHN', 'BOB'] // String manipulation example const trim = str => str.trim(); const toLowerCase = str => str.toLowerCase(); const removeSpaces = str => str.replace(/\s+/g, '-'); const slugify = pipe(trim, toLowerCase, removeSpaces); console.log(slugify(' Hello World ')); // 'hello-world' // With arrow functions const double = x => x * 2; const addTen = x => x + 10; const square = x => x * x; const complexCalc = pipe(double, addTen, square); console.log(complexCalc(5)); // ((5 * 2) + 10) ^ 2 = 400 // Reusable composed functions const validateEmail = pipe( email => email.trim(), email => email.toLowerCase(), email => email.includes('@') ); console.log(validateEmail(' Test@Email.com ')); // true

// Original function function multiply(a, b, c) { return a * b * c; } // Partial application with bind const multiplyBy2 = multiply.bind(null, 2); console.log(multiplyBy2(3, 4)); // 2 * 3 * 4 = 24 const multiplyBy2And3 = multiply.bind(null, 2, 3); console.log(multiplyBy2And3(4)); // 2 * 3 * 4 = 24 // Custom partial function function partial(fn, ...fixedArgs) { return function(...remainingArgs) { return fn(...fixedArgs, ...remainingArgs); }; } const double = partial(multiply, 2, 1); console.log(double(5)); // 2 * 1 * 5 = 10 // Practical example - logging function log(level, timestamp, message) { console.log(`[${level}] ${timestamp}: ${message}`); } // Create specialized loggers const errorLogger = partial(log, 'ERROR'); const infoLogger = partial(log, 'INFO'); errorLogger('2024-01-01', 'Something went wrong'); // [ERROR] 2024-01-01: Something went wrong infoLogger('2024-01-01', 'App started'); // [INFO] 2024-01-01: App started // API request example function fetch(method, url, options) { console.log(`${method} ${url}`, options); } const get = partial(fetch, 'GET'); const post = partial(fetch, 'POST'); const put = partial(fetch, 'PUT'); get('/api/users', { headers: {} }); post('/api/users', { body: {name: 'John'} }); // Difference from currying // Currying const curriedMultiply = a => b => c => a * b * c; console.log(curriedMultiply(2)(3)(4)); // Must call with one arg at a time // Partial application const partialMultiply = partial(multiply, 2); console.log(partialMultiply(3, 4)); // Can call with multiple args // Combining with composition const add = (a, b) => a + b; const addFive = partial(add, 5); const multiplyByTwo = x => x * 2; const addFiveAndDouble = pipe(addFive, multiplyByTwo); console.log(addFiveAndDouble(10)); // (10 + 5) * 2 = 30 // Event handler example function handleClick(prefix, event) { console.log(prefix, event.target); } const handleButtonClick = partial(handleClick, 'Button clicked:'); // button.addEventListener('click', handleButtonClick);

// Basic function borrowing const person1 = { name: 'John', greet: function() { console.log('Hello, I am ' + this.name); } }; const person2 = { name: 'Jane' }; // Borrow greet from person1 person1.greet.call(person2); // 'Hello, I am Jane' // Array method borrowing (very common) function sum() { // arguments is array-like, not array const arr = Array.prototype.slice.call(arguments); return arr.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4, 5)); // 15 // Modern alternative function sum2(...args) { return args.reduce((total, num) => total + num, 0); } // Borrowing array methods for NodeList const divs = document.querySelectorAll('div'); // divs is NodeList, not Array // Borrow forEach Array.prototype.forEach.call(divs, function(div) { console.log(div); }); // Borrow map const texts = Array.prototype.map.call(divs, function(div) { return div.textContent; }); // Object method borrowing const obj1 = { data: [1, 2, 3], printData: function() { console.log(this.data); } }; const obj2 = { data: [4, 5, 6] }; obj1.printData.call(obj2); // [4, 5, 6] // Practical example - checking array function isArray(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } console.log(isArray([1, 2, 3])); // true console.log(isArray('hello')); // false // hasOwnProperty borrowing (safe) const obj = Object.create(null); // obj.hasOwnProperty('x'); // Error! (no prototype) const result = Object.prototype.hasOwnProperty.call(obj, 'x'); console.log(result); // false (safe!) // Borrowing Math methods const numbers = { 0: 5, 1: 2, 2: 9, length: 3 }; const max = Math.max.apply(null, Array.prototype.slice.call(numbers, 0, numbers.length) ); console.log(max); // 9

// PURE FUNCTIONS // Pure - same input, same output, no side effects function add(a, b) { return a + b; } console.log(add(2, 3)); // Always 5 console.log(add(2, 3)); // Always 5 // Pure - doesn't modify input function doubleArray(arr) { return arr.map(n => n * 2); } const numbers = [1, 2, 3]; const doubled = doubleArray(numbers); console.log(numbers); // [1, 2, 3] (unchanged) console.log(doubled); // [2, 4, 6] // Pure - string manipulation function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); } console.log(capitalize('hello')); // 'Hello' console.log(capitalize('hello')); // 'Hello' (same) // Pure - object transformation function updateUser(user, updates) { return { ...user, ...updates }; // New object } const user = { name: 'John', age: 30 }; const updated = updateUser(user, { age: 31 }); console.log(user.age); // 30 (unchanged) console.log(updated.age); // 31 // IMPURE FUNCTIONS // Impure - modifies external variable let total = 0; function addToTotal(value) { total += value; // Side effect! return total; } console.log(addToTotal(5)); // 5 console.log(addToTotal(5)); // 10 (different!) // Impure - mutates argument function addItemImpure(arr, item) { arr.push(item); // Mutates input! return arr; } // Impure - I/O operation function logValue(value) { console.log(value); // Side effect! return value; } // Impure - uses external state let multiplier = 2; function multiplyByMultiplier(n) { return n * multiplier; // Depends on external variable } console.log(multiplyByMultiplier(5)); // 10 multiplier = 3; console.log(multiplyByMultiplier(5)); // 15 (different!) // Impure - random output function getRandomNumber() { return Math.random(); // Non-deterministic } // Impure - current time function getCurrentTimestamp() { return Date.now(); // Different each call } // CONVERTING IMPURE TO PURE // Impure version function discountPriceImpure(price) { const discount = 0.1; // Hard-coded console.log('Calculating discount'); // Side effect return price - (price * discount); } // Pure version function discountPricePure(price, discount) { return price - (price * discount); } // Separate side effects function calculateAndLog(price, discount) { const result = discountPricePure(price, discount); // Pure console.log('Result:', result); // Impure, but isolated return result; } // REAL-WORLD EXAMPLES // Pure - shopping cart total function calculateTotal(items) { return items.reduce((sum, item) => { return sum + (item.price * item.quantity); }, 0); } const cart = [ { name: 'Book', price: 10, quantity: 2 }, { name: 'Pen', price: 2, quantity: 5 } ]; console.log(calculateTotal(cart)); // 30 // Pure - filtering and mapping function getActiveUserNames(users) { return users .filter(user => user.active) .map(user => user.name); } // Pure - form validation function validateEmail(email) { return email.includes('@') && email.includes('.'); } function validatePassword(password) { return password.length >= 8; } function validateForm(data) { return { emailValid: validateEmail(data.email), passwordValid: validatePassword(data.password) }; } // BENEFITS DEMONSTRATION // 1. Easy testing function multiply(a, b) { return a * b; } // Simple test console.assert(multiply(2, 3) === 6); console.assert(multiply(2, 3) === 6); // Always same! // 2. Memoization (caching) function memoize(fn) { const cache = {}; return function(...args) { const key = JSON.stringify(args); if (key in cache) { console.log('From cache'); return cache[key]; } const result = fn(...args); cache[key] = result; return result; }; } // Only works reliably with pure functions const memoizedMultiply = memoize(multiply); console.log(memoizedMultiply(5, 6)); // Computes console.log(memoizedMultiply(5, 6)); // From cache // 3. Parallelization (conceptual) const data = [1, 2, 3, 4, 5, 6, 7, 8]; // Safe to parallelize because pure const doubled = data.map(n => n * 2); // BEST PRACTICES // Do: Keep business logic pure function calculateDiscount(price, percentage) { return price * (percentage / 100); } // Do: Separate I/O from logic function processOrder(order) { const total = calculateTotal(order.items); // Pure saveToDatabase(total); // Impure, but separated return total; } // Don't: Mix concerns function badCalculate(price) { console.log('Calculating...'); // Impure! const result = price * 0.9; saveToDatabase(result); // Impure! return result; }

Call, Apply, Bind and Advanced Functions – Javascript interview questions

Set overview

1. Explain currying and partial application. How are they different? Provide practical examples.

2. What is an IIFE? Explain the module pattern and how IIFE enables data privacy.

3. What is currying in JavaScript?

4. What is an IIFE (Immediately Invoked Function Expression)?

5. What does it mean that JavaScript has first-class functions?

6. Explain call, apply, and bind methods in detail. When would you use each? Provide examples.

7. What does the call() method do in JavaScript?

8. What is the difference between call() and apply()?

9. What does the bind() method return?

10. What is function composition?

11. What is partial application?

12. What is function borrowing in JavaScript?

13. What are pure functions? Explain their benefits and provide examples of pure and impure functions.

14. What is a pure function?

More sets in Javascript

Explore related subjects

Continue your preparation

Master Interviews Anywhere, Anytime

Call, Apply, Bind and Advanced Functions – Javascript interview questions

Set overview

1. Explain currying and partial application. How are they different? Provide practical examples.

2. What is an IIFE? Explain the module pattern and how IIFE enables data privacy.

3. What is currying in JavaScript?

4. What is an IIFE (Immediately Invoked Function Expression)?

5. What does it mean that JavaScript has first-class functions?

6. Explain call, apply, and bind methods in detail. When would you use each? Provide examples.

7. What does the call() method do in JavaScript?

8. What is the difference between call() and apply()?

9. What does the bind() method return?

10. What is function composition?

11. What is partial application?

12. What is function borrowing in JavaScript?

13. What are pure functions? Explain their benefits and provide examples of pure and impure functions.

14. What is a pure function?

More sets in Javascript

Explore related subjects

Continue your preparation

Master Interviews
Anywhere, Anytime