🖌️ Code style

Code style is extremely important when developing code that lasts. This is especially important with JavaScript because the interpreter is very tolerant and will allow a great deal of syntactic mistakes to pass undetected when code is executed. JS developers must exhibit great discipline in writing idiomatic code that is easily readable to all other developers.

Because of this, we're going to be adhering to a style guide for code written in this class. If you ever go out and write code professionally, you would do well to adhere to a structured style guide as well.

🛠️ Linting and formatting

In order to do ensure that your JavaScript submissions adhere to this style guide, we will be using ESLint. You should definitely check your code style with ESLint before submitting. If you are not following the rules, 1 style point will be deducted for each type of error.

For each homework, you will have to set up ESLint by following the steps in the development guide (if it is not provided in the stub file). Our configuration for ESLint is based on the AirBNB style guide, which (believe it or not) is one of the most consistently used and loved configs out there. We also use a plugin called Unicorn which enables some unique good practice rules.

Because code readability includes formatting, we give some extra credit for formatting your code. Our setup is configured to use Prettier, a popular formatter for web development.

✏️ Syntax

• Use object destructuring and structuring consistently

const dog = { name: 'Rocket', age: 10 };
const cat = { name: 'Meowy', age: 4 };
const { name, age } = dog;

// ✅ correct - use previous destructuring
console.log('dog:', name, age);
// dots are fine as long as we haven't already destructured cat
console.log('cat:', cat.name, cat.age);

// ❌ incorrect - we've already destructured dog
console.log('dog:', dog.name, dog.age);

• Omit boolean literal comparisons

// ❌ incorrect
if (b === true) { ... }

// ✅ correct
if (b) { ... }

• Use ternary expression instead of if/else block whenever possible

// ❌ incorrect
let a;
if (b) {
  a = 3;
} else {
  a = 2;
}

// ✅ correct
let a = b ? 3 : 2;

• Use === and !== instead of == and !=

• No {} and return in arrow functions when the body is one line

// ❌ incorrect
const func = (a) => {
  return a;
};

// ✅ correct
const func = (a) => a;

• Declare functions with either => or function

// ❌ incorrect (evil)
const func = new Function('console.log("hello!")');

// ✅ all correct
const func = () => {};
const func = function () {};
function func() {}

• Use let or const for variable declaration instead of var
• Use template literals instead of string concatenation

const s1 = 'the result of 3 + 3 is';
const s2 = 6;

// ❌ incorrect
const newString = s1 + ' ' + s2;
// ✅ correct
const newString = `${s1} ${s2}`;

• No leftover console.log() statements - definitely use them while debugging though!