JavaScript Exceptions: Knowing When NOT to Use Certain Syntax

As I work through the Introduction to JavaScript course, I find myself using syntax that is legal in general, but illegal in the context where I’m attempting to use it. I thought that it might be helpful to compile a master list of exceptions for other learners to reference as they work through the material, rather than having to hunt down each exception back when the material was first introduced. I would love if we could all add specific instances we’ve run into, then have the list distilled by a moderator or something. If such a list exists already, I’d appreciate being pointed to it.

Both of my questions come from working on the Named Imports exercise under the Intermediate JavaScript Modules section. After step 6, my code inside missionControl.js looks like this:

import { availableAirplanes, flightRequirements, meetsStaffRequirements } from './airplane';

function displayFuelCapacity() {
  // .forEach() uses an anonymous arrow function with 1 parameter (element) as its argument
  availableAirplanes.forEach(element => {
    console.log(`Fuel Capacity of ${element.name} : ${element.fuelCapacity}`);
  });
}

displayFuelCapacity();

function displayStaffStatus() {
  // .forEach() uses an anonymous function declared with the function keyword
  availableAirplanes.forEach(function(element) {
    console.log(`${element.name} meets staff requirements: ${meetsStaffRequirements(element.availableStaff, flightRequirements.requiredStaff)}`);
  });
}

The relevant properties and methods are defined within airplane.js:

let availableAirplanes = [
  {name: 'AeroJet', fuelCapacity: 800, availableStaff: ['pilots', 'flightAttendants', 'engineers', 'medicalAssistance', 'sensorOperators']},
  {name: 'SkyJet', fuelCapacity: 500, availableStaff: ['pilots', 'flightAttendants']}
];

let flightRequirements = {requiredStaff: 4};

function meetsStaffRequirements(availableStaff, requiredStaff) {
  if (availableStaff.length >= requiredStaff) {
    return true;
  } else {
    return false;
  }
}

export { availableAirplanes, flightRequirements, meetsStaffRequirements };

Notice that in missionControl.js I am importing variables via the './airplane' string directory path rather than './airplane.js'. This exemplifies what I mean to accomplish here; '.js' can be omitted because it is the default file extension when using the import command, so it’s implied when there is no extension specified. However, you cannot omit the file extension for all other extensions that aren’t '.js'.

One area where I’m seeking clarification is regarding arrow function syntax. A couple of exceptions I already understand include:

  1. The argument(s) need to be surrounded by parentheses unless there is only 1 argument (functions with 0 and 2+ arguments need parentheses).
  2. An implicit return can be used only if the body contains only 1 line that returns a value. The function body needs to be surrounded by curly braces otherwise.

My question: which contexts don’t allow the use of arrow functions? Are there contexts when using arrow functions is inappropriate, or bad coding practice? I’ve run into problems where changing the syntax back to using the function keyword rather than an arrow function seemed to be a possible solution.

Secondly, notice how I’ve written the body of the displayStaffStatus() function. As you can see, I called the appropriate method and passed in the relevant parameters to the anonymous function nested within displayStaffStatus(), but unlike the pre-ES6 string concatenation syntax used by the instructions, I’m attempting to use template literals to log the string to the console. Hitting run results in an error message from Codecademy:

Did you write a console.log() statement to log the element’s name to the console and whether it meets staff requirements?

I’m unsure why the lesson is not happy with this syntax. Are there restrictions to what data you can pass as template literals into a string (i.e., is calling the meetsStaffRequirements() method inside the template literal not allowed)?

I realize that using ES5 syntax is always a safe bet, but nevertheless I think that centralizing a list of exceptions for other learners with the same questions would be widely beneficial.