Functions

Question 1

List all ways to create a function

Answer 1

Function declaration:

function myFunction() {}

Function expression:

const myFunction = function() {};

Arrow function expression:

const myFunction = () => {};

Function constructor:

const myFunction = new Function('arg1', 'arg2', 'function body');

Question 2

What are the advantages of using arrow functions in JavaScript?

Answer 2

More concise and easier to read;
Lexically-bound of “this” keyword;
Cannot be used as constructors (helps prevent certain types of errors).

Limitations: not able to bind a new this context using call or apply.

Question 3

What is a function declaration?

Answer 3

It’s a way to create a named function using the “function” keyword:

function myFunction() {}

Function declarations are hoisted to the top of the scope, which means that they can be called before they are declared.

Question 4

What is a function expression in JavaScript?

Answer 4

It’s a way to define a function by assigning it to a variable:

const myFunction = function() { }

Function expressions are not hoisted, so they must be defined before they are called.

Question 5

What is an arrow function expression in JavaScript?

Answer 5

It’s a way to define a function using an arrow (=>) instead of the function keyword:

const myFunction = () => { }

Arrow functions have a lexically-bound this keyword and are more concise than traditional function expressions.

Question 6

What is the difference between a function declaration and a function expression?

Answer 6

Function declarations are hoisted to the top of their scope, while function expressions are not.

Meaning: function declarations can be called before they are defined, but function expressions must be defined before they are called.

Question 7

What is a higher-order function (HOF)?

Answer 7

It’s a function that takes 1 or more functions as arguments or returns a function as its result.

They are a key feature of functional programming, and they can be used to create more modular, reusable, and expressive code.

Question 8

What is a callback function?

Answer 8

It’s a function that is passed as an argument to another function and is called when the parent function completes its operation.

They are commonly used for async operations such as event handling, timers, and AJAX requests.

Question 9

What is the difference between call() and apply() methods?

Answer 9

Both are methods that allow you to call a function with a specific “this” context and a set of arguments.

The main difference is the way they accept arguments:

“call()” takes the “this” context as the first argument followed by a list of arguments
“apply()” takes the “this” context as the first argument followed by an array of arguments.

Question 10

What is a closure?

Answer 10

It’s a function that has access to its parent function’s variables and parameters, even after the parent function has returned.

Closures are created when a function is defined inside another function and returned to the outside world.

Allow to create private variables and methods, and to avoid namespace collisions.

Question 11

What is a function?

Answer 11

It’s a block of code that performs a specific task.

Functions are reusable pieces of code that can be called multiple times from different parts of a program.

They can take parameters and return values.

Question 12

What is a method?

Answer 12

It’s a function that is a property of an object.

Methods are used to perform actions on objects or to retrieve information from objects.

Methods are defined inside the object and can be called using dot notation on the object.

Example:
myObject.myMethod() // call the method myMethod() on the object myObject.

Question 13

What is the difference between a function and a method?

Answer 13

The difference is in the way they are called and the object they belong to.

A function is a standalone block of code that can be called from anywhere in the program
A method is a function that is a property of an object and is called using dot notation on the object.

Additionally, methods have access to the properties and other methods of the object they belong to, while functions do not.

Question 14

What is the this keyword?

Answer 14

It refers to the object that the method is called on.

When a method is called using dot notation, the this keyword is set to the object that the method belongs to.

this can be used inside the method to access the properties and methods of the object.

When a function is called standalone, the this keyword is set to the global object (window in a web browser or global in Node.js).

Question 15

What is the difference between a named function and an anonymous function?

Answer 15

Named function
- has a name and can be called by that name from anywhere in the program.
Anonymous function
- does not have a name and is usually declared as an expression.
- are often used as callback functions or as arguments to other functions.

Question 16

What is the difference between a function and a method?

Answer 16

a function is standalone, a method is a function that belongs to an object

Question 17

What is the this keyword?

Answer 17

refers to the object that the method is called on

Question 18

What is an anonymous function?

Answer 18

a function without a name

Question 19

What is a named function?

Answer 19

a function with a name

Question 20

What’s a typical use case for anonymous functions?

Answer 20

They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.

(function () {
  // Some code here.
})();

As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.

setTimeout(function () {
  console.log('Hello world!');
}, 1000);

Arguments to functional programming constructs or Lodash (similar to callbacks).

const arr = [1, 2, 3];
const double = arr.map(function (el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

Question 21

Explain the difference between synchronous and asynchronous functions.

Answer 21

• Sync functions are blocking while async functions are not.
• In sync functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
• Async functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty.
• Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).

Function Declaration

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

Function Expression

foo(); // Uncaught TypeError: foo is not a function
var foo = function () {
  console.log('FOOOOO');
};

Question 22

Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

Answer 22

1st = function declaration
2nd = function expression.

function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as variables).

If you try to invoke a function expression before it is defined, you will get an Uncaught TypeError: XXX is not a function error.

Question 23

Can you give an example of a curry function and why this syntax offers an advantage?

Answer 23

Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time.

This technique can be useful for making code written in a functional style easier to read and compose. It’s important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each accepts one parameter.