JavaScript Functions

JavaScript Fundamentals: JavaScript Functions

What are the SEVEN types of functions in JavaScript?

View Answer:

Interview Response: The seven types of functions include the function declaration, function expression, arrow function, shorthand methods, generators, constructor functions, and JS built-in methods.

Code Example:

// 1. Function Declaration
function timesSelf(x) {
  return x * x;
}

console.log(timesSelf(5));
// expected output: 25

// 2. Function Expression
const getRectArea = function (width, height) {
  return width * height;
};

console.log(getRectArea(3, 4));
// expected output: 12

// 3. Arrow Function
const helloUser = (name) => 'Hello, ' + name;

console.log(helloUser('JavaScript'));
// expected output: Hello, JavaScript

// 4. Shorthand Methods - Function
const fruits = {
  items: [],
  add(...items) {
    this.items.push(...items);
  },
  get(index) {
    return this.items[index];
  },
};

fruits.add('mango', 'banana', 'guava'); // shortand method function
fruits.get(1); // banana

// 5. Generator - Function
function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(generator().next().value); // 1
console.log(generator().next().value); // 1

---

What is the definition of a JavaScript Function?

View Answer:

Interview Response: A JavaScript function is a callable block of code designed to perform a particular task.

Technical Response: Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure — a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.

Code Example:

function square(x) {
  return x * x;
}
square(10); // 100

---

Describe the basic structure of a JavaScript function declaration?

View Answer:

Interview Response: A function declaration starts first with declaring the function keyword, then the function name, followed by a list of parameters between parentheses (comma-separated, or no parameters are okay), and finally the function body (code) inside of the curly brackets.

Code Example:

function name(parameters) {
  ...body...
}

---

What is one of the primary purposes of JavaScript functions?

View Answer:

Interview Response: The primary purpose of JS functions is to avoid code duplication.

Technical Response: The primary purpose of functions is to avoid code duplication. If we ever need to change the message or the way it displays, it is enough to modify the code in one place based on the function which outputs it.

Code Example:

function showMessage(name) {
  alert('Hello, ' + name);
}

showMessage('John'); // John
showMessage('Jane'); // Jane

---

Is there a limitation on variables declared inside a function?

View Answer:

Interview Response: Yes, they are only visible within the function's scope; we cannot access the variable outside of the function.

Code Example:

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable

  alert(message);
}

showMessage(); // Hello, I'm JavaScript!

alert(message); // <-- Error! The variable is local to the function.

---

Can functions access variables outside the function body?

View Answer:

Interview Response: Functions can access top-level variables, variables inside of the function, and variables inside of a function that they are getting called.

Technical Response: Globals or variables are accessible by functions because it is within their lexical scope, and they can also modify it. Functions also can access variables inside a function or the scope they are getting called.

Code Example:

let userName = 'John';

function showMessage() {
  userName = 'Bob'; // (1) changed the outer variable

  let message = 'Hello, ' + userName;
  alert(message);
}

alert(userName); // John before the function call

showMessage(); // Hello, Bob modified through invocation

alert(userName); // Bob, the value was modified by the function

---

What is a Global variable?

View Answer:

Interview Response: Variables declared outside of any function or code block are called global. Global variables are visible from any function (unless shadowed by locals).

---

What is the Modern JavaScript rule for using Global Variables?

View Answer:

Interview Response: It is a good practice to minimize the use of global variables. Modern code has few or no global variables.

Technical Response: It is a good practice to minimize the use of global variables. Modern code has few or no global variables, and most variables reside in their functions. Sometimes though, global variables can be helpful to store project-level data.

---

Can you explain how you use parameters in functions?

View Answer:

Interview Response: We use parameters (function arguments) to pass arbitrary data to functions.

Code Example:

function showMessage(from, text) {
  // arguments: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

---

What happens when a function parameter does not get provided?

View Answer:

Interview Response: If a parameter (function argument) has no default, the value becomes undefined.

Code Example:

function showMessage(from, text) {
  // arguments: from, text
  alert(from + ': ' + text);
}

showMessage('Ann'); // "Ann: undefined"

---

How is a default function parameter evaluated in JavaScript?

View Answer:

Interview Response: In JavaScript, a default parameter evaluates every time the function gets called without the respective parameter.

Code Example:

function showMessage(from, text = anotherFunction()) {
  // anotherFunction() only executed if text is not given
  // the result becomes the value of text
}

---

Is there a way to check for an omitted function parameter and return a new value?

View Answer:

Interview Response: We can use a conditional statement with strict equality or logical OR to check for the omitted parameter.

Technical Response: Yes, you can run a conditional statement or check in the function body. The most common way is a conditional if statement or the logical || OR operator.

Code Example:

function showMessage(text) {
  if (text === undefined) {
    text = 'empty message';
  }

  alert(text);
}

showMessage(); // empty message

// Or we could use the || operator

// if text parameter is omitted or "" is passed, set it to 'empty'
function showMessage(text) {
  text = text || 'empty';
  ...
}

---

Can you implement multiple occurrences of the return statement in a single function?

View Answer:

Interview Response: We can use a conditional statement to handle multiple return statements (Not recommended in Modern Application development.).

Technical Response: Yes, you can implement multiple occurrences of the return statement in a single function. There are better ways to implement code without multiple return statements because it can reduce application performance.

Code Example:

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('Do you have permission from your parents?');
  }
}

let age = prompt('How old are you?', 18);

if (checkAge(age)) {
  alert('Access granted');
} else {
  alert('Access denied');
}

---

Is it possible to use a return statement without a value?

View Answer:

Interview Response: Yes, we can use a return statement without a value. We call it an empty return statement; an empty return statement exits a program and returns undefined where it gets called.

Code Example:

function showMovie(age) {
  if (!checkAge(age)) {
    return;
  }

  alert('Showing you the movie'); // (*)
  // ...
}

---

What does a return statement with an empty value output?

View Answer:

Interview Response: A function with an empty return or without it returns undefined.

Code Example:

function doNothing() {
  /* empty */
}

alert(doNothing() === undefined); // true

// An empty return is also the same as return undefined:

function doNothing() {
  return;
}

alert(doNothing() === undefined); // true

---

You should use caution when using the return statement. What is the most important thing to remember when using a return statement?

View Answer:

Interview Response: The most important thing to remember when using the return statement is to add a semi-colon and never add a new line between the return and the value.

Code Example:

return some + long + expression + or + whatever * f(a) + f(b);

Hint:

If you want the returned expression to wrap across multiple lines, we should start it at the same line as return. Or at least put the opening parentheses.

---

What are good naming practices for function names?

View Answer:

Interview Response: Functions should start with a verb as an action word as a prefix. For example, a function that returns a user’s name should use “getUserName()” as the function name.

Technical Response: It is a widespread practice to start a function with a verbal prefix that vaguely describes the action, and there must be an agreement on the meaning of the prefixes within the team. For example, functions that get something usually start with getting like “getUserName()”.

It should be brief, as accurate as possible, and describe what the function does so that someone reading the code indicates what the function does.

Code Example:

showMessage(..)     // shows a message
getAge(..)          // returns the age (gets it somehow)
calcSum(..)         // calculates a sum and returns the result
createForm(..)      // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false

---

What are best practices for the creation of a function?

View Answer:

Interview Response: A function should only do what its name implies. Even if they generally get referred to as one function, two separate actions usually warrant two functions (in that case, we can make a 3rd function that calls those two).

---

Should there be a separation of the concerns in functions?

View Answer:

Interview Response: Yes, it is imperative to make every effort to apply separate actions in each function. Sometimes, following this rule may not be that easy, but it is the best approach.

Example 1: Show Prime Numbers using a label (No Separation)

function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {
    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert(i); // a prime
  }
}

Example 2: Show Prime Numbers (Separation of Concerns using separate functions)

function showPrimes(n) {
  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i); // a prime
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if (n % i == 0) return false;
  }
  return true;
}

---