Style refers to the way we write our code. Our goal is to write code in such a way that it is readable and easily understood. Good style will help others understand what you are doing in your code and it will also help you stay organized in your own brain as you solve a problem. It may seem like a chore to follow these style guidelines, but good code style can be free points on a technical interview!
This is an outline of some fundamental style guidelines you should practice here at App Academy whenever you write JavaScript code.
Indentation is one of the most important aspects of style, especially when our code is very complex and nested. The rule of thumb is to add an additional indent to all the code in the body of a structure. That is, all code inside the braces of a if, else, for, while, function, etc. should be indented! If we indent properly, it is easy to see what code is inside what structures. We are able to easily spot where a structure ends since the closing braces are always lined up vertically with the name of the structure:
// Good style:
function skip5(){
for (let i = 1; i < 10; i += 1){
if (i === 5) {
continue;
}
console.log(i);
}
}
// Bad style:
function skip5(){
for (let i = 1; i < 10;i += 1){
if (i === 5) {
continue;}
console.log(i);
}}
Use a space around operators that use two things like +, *, = , +=, <=, etc.
// Good style:
let num1 = 3;
let num2 = 5;
if (num1 + num2 === 8) {
console.log("the sum is 8");
}
// Bad style:
let num1=3;
let num2 =5;
if (num1+num2=== 8) {
console.log("the sum is 8");
}
Did you know? Operators that work on two things are called binary operators, since they apply to 2 operands (hence binary).
Don't use a space for operators that use one thing like ++, --, etc..
// Good style:
myNum++;
// Bad style:
myNum ++;
Did you know? Operators that apply to only a single operand are called unary operators.
Use a space after , in arrays and a space after ; in for loops.
// Good style:
let names = ['alvin', 'chase', 'phi', 'eliot'];
for (let i = 0; i < names.length; i++) {
// ...
}
// Bad style:
let names = ['alvin','chase','phi','eliot'];
for (let i = 0;i < names.length;i++) {
// ...
}
Feel free to break lines in large or complex arrays.
// Good style:
let names = [
'alvin',
'chase',
'phi',
'eliot'
];
Use blank lines to section off different logical sections in your code:
// Good style:
function sumArray(arr){
let sum = 0;
for (let i = 0; i < arr.length; i++) {
let ele = arr[i];
sum += ele;
}
return sum;
}
// Not as good style:
function sumArray(arr){
let sum = 0;
for (let i = 0; i < arr.length; i++) {
let ele = arr[i];
sum += ele;
}
return sum;
}
Use variables to store values that are tedious to write out over and over again. This will also increase readability if you choose a descriptive name.
// Good style:
function printStudents(arr) {
for (let i = 0; i < arr.length; i++) {
let name = arr[i];
console.log(name.toUpperCase());
console.log(name.toLowerCase());
}
}
// Not as good style:
function printStudents(arr) {
for (let i = 0; i < arr.length; i++) {
console.log(arr[i].toUpperCase());
console.log(arr[i].toLowerCase());
}
}
Use variables to "label" complex expressions. Good variables can act as notes:
// Nice and readable:
let num = 15;
let isDivByEither = (num % 5 === 0 || num % 3 === 0);
console.log(isDivByEither);
// Not as readable:
let num = 15;
console.log(num % 5 === 0 || num % 3 === 0);
Use a semicolon to end lines. You may have noticed that sometimes omitting a semicolon still allows our code to run. Know that this is the programming environment being nice to you and secretly filling in your missing semicolons! You should terminate appropriate lines with ;.
Semicolons separate different expressions in our code. This helps JavaScript interpret our code.
It is technically "correct" to write all our code on a single line. We break lines to make our code readable for other humans. However, when we run code on our computers, the JavaScript interpreter will look for semicolons.
See this example where omitting a semicolon is deadly. It is technically correct to not break lines, but what happens if we don't use a semicolon:
// Not good style, but still runs:
console.log('hello'); console.log('world');
// Worse style and does not run at all:
console.log('hello') console.log('world')
We do not need semicolons on every line that we write. For example, we do not need to put a semicolon after the closing brace } of an if, etc. See any code in our curriculum for examples where to put semicolons.