Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
0.1: New JS Syntax

Introduction

In Coding Basics we omitted some best-practice JS syntax to focus on foundational concepts. We introduce these best practices in Coding Bootcamp for professional software engineering.

+= 1

You can use x = x + 1 , x += 1 , or x++ to increment the value of variable x by 1. ESLint recommends against using ++, so we default to += 1 for brevity.
1
var dice = 5;
2
var kilos = 5;
3
var minutes = 5;
4
​
5
// Old
6
dice = dice + 1; // 6
7
// New, += is recommended
8
kilos += 1; // 6
9
minutes++; // 6
Copied!

for loops

By now we should be relatively familiar with the mechanics of loops. From now onward, we will use for loops for loops with a fixed number of iterations.

Old Way (While Loop)

In Coding Basics we used while loops everywhere.
1
// initialize loop counter
2
var counter = 0;
3
​
4
// run 10 times
5
while (counter < 10) {
6
// main part of the loop
7
console.log(`current counter: ${counter}`);
8
​
9
// increment always the last line in the loop
10
counter += 1;
11
}
Copied!

New Way (For Loop)

For a fixed number of iterations, for loop syntax is more concise.
1
// initialize loop
2
for (var counter = 0; counter < 10; counter += 1) {
3
// main part of the loop
4
console.log(`current counter: ${counter}`);
5
}
Copied!

Shorter Counter or Index Variable Name

It's quite common to shorten the name of our counter variable name to i, where "i" is short for "index". If your index also represents something more specific, use the more specific name, but i is a generally accepted short name for an index in a loop. If you have nested loops, j is the standard name for the index in the nested loop.
1
// initialize loop
2
for (var i = 0; i < 10; i += 1) {
3
// main part of the loop
4
console.log(`current counter: ${i}`);
5
}
Copied!

Strict Equivalence (===)

We have been using == to test equivalence in our boolean statements.
When testing values, == does not take data type into account. This means that it is more forgiving and less work to check / correct for data type.
1
3 == '3'; // true
2
true == 'true'; // true
Copied!
Some equivalence checks are not intuitive for what are referred to as truthy or falsy values.
1
0 == false; // true
2
true == 'true'; // true
3
'' == null; // true
Copied!
We should default to not allowing any of the above to be true. Your code is less likely to have errors if the conditional is helping check the data and the data type.
1
3 === '3'; // false
2
true === 'true'; // false
3
0 === false; // false
4
true === 'true'; // false
5
'' === null; // false
Copied!
To make examples like these evaluate to true we can cast the variable value into the correct type:
1
Number('3') === 3; // true
2
Boolean('true') === true; // true
Copied!

Exercises

  1. 1.
    Find an old exercise from Coding Basics
  2. 2.
    Update your code with new code for each of the above syntax changes
  3. 3.
    Make your code run without errors
When making comparisons with user input in the Coding Basics starter code, logic like input === 3will not evaluate to true, because input is of type string.
Last modified 2mo ago