Style Guide Flashcards
Which of these is correct:
1. if (n < 0) {alert(Power ${n} is not supported
);}
- if (n < 0)
alert(Power ${n} is not supported
);
3.
if (n < 0) alert(Power ${n} is not supported
);
4.
if (n < 0) {
alert(Power ${n} is not supported
);
}
They all work but use:
- for short statements
- for most cases
What are some tricks to keep line lengths down under 80-120 characters?
(2 things)
- use backticks for multiple lineslet str = `
ECMA International’s TC39 is a group of JavaScript developers,
implementers, academics, and more, collaborating with the community
to maintain and evolve the definition of JavaScript.
`;
Regular quotation marks assume a ; on new line
- put conditionals on new lines in if statements if ( (id === 123) && (moonPhase === 'Waning Gibbous') && (zodiacSign === 'Libra') ) { letTheSorceryBegin(); }
When do you add a vertical space between code lines? (1 main principal??)
Give examples within a single function (3 points)
Even a single function can often be divided into logical blocks. - the initialization of variables - the main loop - returning the result should be split vertically
function por() { let result = 1;
for () {
}
let x =
let y =
…
How do you avoid nesting if/else statements in a function?
Use return to just escape the function. so:
if this, do this and return
If this, do this and return
Rather than
If, if else, etc.
Instead of: function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); } else { let result = 1;
for (let i = 0; i < n; i++) { result *= x; }
return result; } }
do: function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); return; }
let result = 1;
for (let i = 0; i < n; i++) { result *= x; }
return result;
}
Which of these 3 are preferred?
- functions declared, then used
- functions used, then declared
- functions declared right before their first use
Why?
Functions used, then declared
This way the functions are all at the bottom and, if the functions are named well, the user may not need to read functions at all to understand the code.
Basics of JS Case style guide
Style Guide:
constant variables (known and unknown prior to page load)
functions and non-constant variables
constructor functions
SCREAMING_SNAKE_CASE- for constants that are known (pi)
but camelCase for unknown constants.- const pageLoadTime;
It’s a constant, but not known prior to page load.
camelCase- for identifier names (variables and functions)
PascalCase for constructors
Tools that can automatically check the style of your code and make improving suggestions.
Linter
How to avoid nesting if/else statements in a loop.
Instead of: for (let i = 0; i < 10; i++) {
if (i % 2) {
alert( i );
}
}
Do: for (let i = 0; i < 10; i++) {
if (i % 2 == 0) continue;
alert(i); // 1, then 3, 5, 7, 9
}
What do you do if your code needs comments?
If the code NEEDS comments, then maybe change the code to be more readable.
How would you change this to make the code more readable:
function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { //iterates over number up to input number
for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; //checks if prime }
alert(i); } }
Create another function to handle as much as possible:
function showPrimes(n) {
for (let i = 2; i < n; i++) { if (!isPrime(i)) continue;
alert(i); } }
Then have another funcion: isPrime()
function isPrime(input) { for (let i = 0; i < input; i++) { if prime continue (input % i == 0) else return false }
How would you change this to make the code more readable:
// here we add whiskey for(let i = 0; i < 10; i++) { let drop = getWhiskey(); smell(drop); add(drop, glass); }
// here we add juice for(let t = 0; t < 3; t++) { let tomato = getTomato(); examine(tomato); let juice = press(tomato); add(juice, glass); }
// …
Split each task into functions. Name the functions something understandable:
addWhiskey(glass);
addJuice(glass);
function addWhiskey(container) { for(let i = 0; i < 10; i++) { let drop = getWhiskey(); //... } }
function addJuice(container) { for(let t = 0; t < 3; t++) { let tomato = getTomato(); //... } }
If explanatory comments are bad, what are comments for?
(1 reason for functions
3 reason for overall
)
- Document function parameters and usage For example: /** * Returns x raised to the n-th power. * * @param {number} x The number to raise. * @param {number} n The power, must be a natural number. * @return {number} x raised to the n-th power. */ function pow(x, n) { ... }
- Provide birds-eye view of the code (UML)
- dates and authorship
- explain WHY the code was chosen for the task. Maybe you did it a less obvious way but it was for a specific reason.
Like in law: the law that pirating software is bad is one thing, but provide an argument so future you and future generations can understand whether they need to change it or not.
What does UML stand for? Briefly what is it?
Unified Modeling Language
Diagrams to visualize system or database
https://www.youtube.com/watch?v=WnMQ8HlmeXc
Shorter code is better code
T or F
False
Readability and loading speed are the main goals
You should avoid using abbreviations and single letters for variable names
T or F
True
Readability is more important than variable shortness. You can press tab to get the variable name faster anyway