From f6ea6dc2b5ff90d0d773bd1a6b2f138707cf517f Mon Sep 17 00:00:00 2001
From: j0lol <me@j0.lol>
Date: Tue, 17 Mar 2026 23:28:10 +0000
Subject: [PATCH 1/3] Change JS var usage to let or const

---
 js/lesson1/tutorial.md |  39 +++++++++-----
 js/lesson2/tutorial.md | 114 ++++++++++++++++++++---------------------
 js/lesson3/tutorial.md |   8 +--
 js/lesson4/tutorial.md |  18 +++----
 js/lesson6/tutorial.md |   4 +-
 js/lesson9/tutorial.md |   8 +--
 6 files changed, 102 insertions(+), 89 deletions(-)

diff --git a/js/lesson1/tutorial.md b/js/lesson1/tutorial.md
index e616934d..918d34cd 100644
--- a/js/lesson1/tutorial.md
+++ b/js/lesson1/tutorial.md
@@ -141,7 +141,7 @@ Remember:
 Try typing this on the console:
 
 ```js
-var a = 17;
+let a = 17;
 ```
 
 You'll see that it returns the value as `undefined`, undefined
@@ -153,16 +153,20 @@ Now try typing `a` on the console. You should see that you get back 17. Variable
 Try typing these:
 
 ```js
-var b = 12;
-var c = a + b;
+let b = 12;
+let c = a + b;
 ```
 
 Now look at the values of b and c. See how it's storing the values of
 these expressions?
 
-A line starting with `var` is a **variable definition**. You should
+A line starting with `let` is a **variable definition**. You should
 use this whenever you are creating a new variable.
 
+> In previous versions of JavaScript, `var` was used for all
+**variable defintions**, but `let` is now considered better to use.
+[You can read more about why on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#description).
+
 You can also change the value of a variable. That's why it's a
 "variable": because its value can vary. Try this:
 
@@ -170,7 +174,7 @@ You can also change the value of a variable. That's why it's a
 b = 2;
 ```
 
-Notice that you don't have `var` this time. If you have a
+Notice that you don't have `let` this time. If you have a
 variable name, an equals sign, and an expression, then this is a
 **variable assignment**, which changes the value of a variable that
 you defined earlier.
@@ -187,16 +191,25 @@ c = a + b;
 See that it's changed this time? This is because the **expression**
 `a + b` is converted into its **value** immediately when it is used.
 
+If you want a **value** that cannot be changed, you would use
+**const**. These types of variables are called **constants**.
+
+```js
+const tryChangingMe = 1;
+tryChangingMe = 2; // Error! "invalid assignment to const"
+```
+
+
 ### Keywords, identifiers, and strings
 
-The word `var` is a **keyword**: a word that means something special
-to the language. `var` means "create a new variable".
+The word `let` is a **keyword**: a word that means something special
+to the language. `let` means "create a new variable".
 
 Earlier in this tutorial, we had you try typing `Hello` on the console
 without quotes, and you got an error about it not being defined. You
 can put anything you like into a string, but things that aren't in a
 string need to be defined to mean something before you can use
-them. The `var` keyword defines a new word to be a variable. In this
+them. The `let` keyword defines a new word to be a variable. In this
 section you created the variables `a`, `b`, and `c`, so you could use
 those.
 
@@ -209,11 +222,11 @@ used in identifiers.
 
 The other important rule is that you can't write an identifier that is
 the same as a keyword, so you cannot create a variable called
-`var`. If you try writing this then you will get a fairly obscure
+`let`. If you try writing this then you will get a fairly obscure
 error message:
 
 ```js
-var var = 1;
+let let = 1;
 ```
 
 ## Functions
@@ -432,7 +445,7 @@ We apologise for this quirk of the language.
 Another type of **value** in JavaScript is an **object**. An object looks like this:
 
 ```js
-var person = {
+const person = {
     first_name: "Archibald",
     likes: "owls"
 };
@@ -461,11 +474,11 @@ variable". This is important because you can, and often will, have
 several variables that refer to the same object. Try this:
 
 ```js
-var person_a = {
+const person_a = {
     first_name: "Archibald",
     likes: "owls"
 };
-var person_b = person_a;
+const person_b = person_a;
 
 console.log("Before");
 console.log(person_a.first_name);
diff --git a/js/lesson2/tutorial.md b/js/lesson2/tutorial.md
index 7d11a65f..19d493fc 100644
--- a/js/lesson2/tutorial.md
+++ b/js/lesson2/tutorial.md
@@ -19,7 +19,7 @@ In the first tutorial, we learnt all about **values**.
 **Strings**:
 
 ```js
-var name = 'codebar';
+const name = 'codebar';
 
 console.log(name + ' is amazing!'); // this is an expression
 ```
@@ -27,7 +27,7 @@ console.log(name + ' is amazing!'); // this is an expression
 **Numbers**:
 
 ```js
-var pi = 3.14;
+const pi = 3.14;
 
 console.log('The value of pi: ' + pi);
 ```
@@ -35,7 +35,7 @@ console.log('The value of pi: ' + pi);
 and **Objects**:
 
 ```js
-var person = {
+const person = {
   first_name: 'Archibald'
 };
 
@@ -46,8 +46,8 @@ We are now going to introduce one more important type: **booleans**. A
 boolean can only be `true` or `false`, for example:
 
 ```js
-var codebarIsAwesome = true;
-var weatherIsAmazing = false;
+const codebarIsAwesome = true;
+const weatherIsAmazing = false;
 
 console.log('Is codebar AWESOME? ' + codebarIsAwesome);
 console.log('Is the weather in London amazing? ' + weatherIsAmazing);
@@ -61,21 +61,21 @@ In the first tutorial, we learnt about expressions using the `+` operator. The
 other basic math operators are `-`, `*`, and `/`:
 
 ```js
-var x = 6;
-var y = 3;
-var addition = x + y;
+const x = 6;
+const y = 3;
+const addition = x + y;
 
 console.log('Addition: x + y = ' + addition); // Addition: x + y = 9
 
-var subtraction = x - y;
+const subtraction = x - y;
 
 console.log('Subtraction: x - y = ' + subtraction); // Subtraction: x - y = 3
 
-var multiplication = x * y;
+const multiplication = x * y;
 
 console.log('Multiplication: x * y = ' + multiplication); // Multiplication: x * y = 18
 
-var division = x / y;
+const division = x / y;
 
 console.log('Division: x / y = ' + division); // Division: x / y = 2
 ```
@@ -93,21 +93,21 @@ Other useful math operators are `%`, `**`, `++` and `--`:
 > The increment `++` and decrement `--` operators return the result of adding one and subtracting one from an operand respectively.
 
 ```js
-var x = 5;
-var y = 3;
-var modulus = x % y;
+let x = 5;
+let y = 3;
+const modulus = x % y;
 
 console.log('Remainder: x % y = ' + modulus);
 
-var exponentiation = x ** y;
+const exponentiation = x ** y;
 
 console.log('Exponentiation: x ** y = ' + exponentiation);
 
-var increment = x++;
+const increment = x++;
 
 console.log('Increment: x++ = ' + increment);
 
-var decrement = y--;
+const decrement = y--;
 
 console.log('Decrement: y-- = ' + decrement);
 ```
@@ -117,10 +117,10 @@ console.log('Decrement: y-- = ' + decrement);
 The `===` operator compares two values, it returns the boolean `true` if they are equal and `false` if they are not.
 
 ```js
-var apples = 'apples';
-var oranges = 'oranges';
+const apples = 'apples';
+const oranges = 'oranges';
 
-var equal = apples === oranges;
+const equal = apples === oranges;
 
 console.log('Apples and oranges are the exactly same: ' + equal);
 ```
@@ -128,10 +128,10 @@ console.log('Apples and oranges are the exactly same: ' + equal);
 The opposite of `===` is `!==`. It returns `true` if they are not equal, and `false` if they are.
 
 ```js
-var apples = 'apples';
-var oranges = 'oranges';
+const apples = 'apples';
+const oranges = 'oranges';
 
-var notEqual = apples !== oranges;
+const notEqual = apples !== oranges;
 
 console.log('Apples and oranges are different: ' + notEqual);
 ```
@@ -143,14 +143,14 @@ The `>` and `<` operators are "greater than" and "less than". You can
 use them to tell which of two numbers is bigger.
 
 ```js
-var coaches = 20;
-var students = 24;
-var pizzas = 25;
+const coaches = 20;
+const students = 24;
+const pizzas = 25;
 
-var moreStudents = students > coaches;
+const moreStudents = students > coaches;
 console.log('Are there more students than coaches?' + moreStudents);
 
-var lessStudents = students < pizzas;
+const lessStudents = students < pizzas;
 console.log('Are there fewer students than pizzas?' + lessStudents);
 
 ```
@@ -159,7 +159,7 @@ console.log('Are there fewer students than pizzas?' + lessStudents);
 You can also combine operators.
 
 ```js
-var enoughPizzas = (coaches + students) < pizzas;
+const enoughPizzas = (coaches + students) < pizzas;
 console.log('Do we have enough pizzas for everybody? ' + enoughPizzas);
 ```
 > Now sit with your coach and create 2 variables, one is your age and one is the
@@ -170,7 +170,7 @@ console.log('Do we have enough pizzas for everybody? ' + enoughPizzas);
 An if statement lets you run a piece of code if an expression is `true`.
 
 ```js
-var codebarIsAwesome = true;
+let codebarIsAwesome = true;
 
 if (codebarIsAwesome) {
   console.log('codebar is AWESOME!');
@@ -182,11 +182,11 @@ if (codebarIsAwesome) {
 You can use an expression inside an if statement.
 
 ```js
-var coaches = 20;
-var students = 24;
-var pizzas = 25;
+const coaches = 20;
+const students = 24;
+const pizzas = 25;
 
-var totalPeople = coaches + students;
+const totalPeople = coaches + students;
 
 if (totalPeople > pizzas) {
   console.log('We have more people than pizzas!');
@@ -248,8 +248,8 @@ For example, if we wanted to set a timer on an online ticket outlet, we could co
 We can use this to sum all numbers from 1 to 10:
 
 ```js
-var i = 1;
-var total = 0;
+let i = 1;
+let total = 0;
 
 while (i <= 10) {
   total = total + i;
@@ -292,8 +292,8 @@ For example, if we had an online shopping basket, we could loop over the items i
 The `while` loop above can be rewritten as a `for` loop:
 
 ```js
-var total = 0;
-var i;
+let total = 0;
+let i;
 
 for (i = 1; i <= 10; i = i + 1) {
   total = total + i;
@@ -301,7 +301,7 @@ for (i = 1; i <= 10; i = i + 1) {
 
 console.log('Total: ' + total);
 ```
-> Another way to write the for loop is `for (var i = 1; i <= 10; i++)`. The `i++` is a short way of writing "increase i by one".
+> Another way to write the for loop is `for (let i = 1; i <= 10; i++)`. The `i++` is a short way of writing "increase i by one".
 
 Even though `while` loops are simpler than `for` loops, it is more common to see `for` loops. This is because loops are often used to do something with arrays, which are introduced in the next section.
 
@@ -314,7 +314,7 @@ Confusingly, the first index of an array in JavaScript is 0, not 1.
 To understand this better, let's create an array of strings.
 
 ```js
-var animals = ['dog', 'cat', 'rabbit', 'horse', 'elephant', 'monkey'];
+const animals = ['dog', 'cat', 'rabbit', 'horse', 'elephant', 'monkey'];
 ```
 
 ![](assets/images/animals_array.png)
@@ -337,10 +337,10 @@ animals.length
 The length property is extremely useful when you want to do something with every element in an array. For example, to log each entry of the `animals` array, you can use `animals.length` with a `for` loop:
 
 ```js
-var i;
+let i;
 
 for (i = 0; i < animals.length; i = i + 1) {
-  var animal = animals[i];
+  const animal = animals[i];
   console.log(animal);
 }
 ```
@@ -358,7 +358,7 @@ The word `method` is usually used to mean a function that belongs to an object.
 `array.unshift(object)` adds an element to the beginning of the array
 
 ```js
-var animals = ['dog', 'cat', 'rabbit', 'horse', 'elephant', 'monkey'];
+const animals = ['dog', 'cat', 'rabbit', 'horse', 'elephant', 'monkey'];
 
 animals.unshift('cow');
 animals.push('zebra');
@@ -387,7 +387,7 @@ animals.sort();
 Try this out on an array of strings.
 
 ```js
-var names = ['Jane', 'Barry', 'Helen', 'David', 'Sam'];
+const names = ['Jane', 'Barry', 'Helen', 'David', 'Sam'];
 
 names.sort();
 
@@ -403,7 +403,7 @@ function sortNumbersAscending(a, b) {
     return a - b;
 }
 
-var nums = [1, 5, 3, 19, 2, 10];
+const nums = [1, 5, 3, 19, 2, 10];
 
 nums.sort(sortNumbersAscending);
 
@@ -424,9 +424,9 @@ nums.sort(sortNumbersAscending).reverse();
 Now that we know what arrays are, we can use that to understand loops better. Let's try out another example:
 
 ```js
-var fruitAndVeg = ['apple', 'orange', 'banana', 'kiwi', 'avocado', 'celery', 'aubergine'];
-var noAvocados = [];
-var i = 0;
+const fruitAndVeg = ['apple', 'orange', 'banana', 'kiwi', 'avocado', 'celery', 'aubergine'];
+const noAvocados = [];
+let i = 0;
 
 while (i < fruitAndVeg.length) {
   if (fruitAndVeg[i] !== 'avocado') {
@@ -441,10 +441,10 @@ while (i < fruitAndVeg.length) {
 There is a counter here though, so a better way to write this would be:
 
 ```js
-var fruitAndVeg = ['apple', 'orange', 'banana', 'kiwi', 'avocado', 'celery', 'aubergine'];
-var noAvocados = [];
+const fruitAndVeg = ['apple', 'orange', 'banana', 'kiwi', 'avocado', 'celery', 'aubergine'];
+const noAvocados = [];
 
-for (var i = 0; i < fruitAndVeg.length; i = i + 1) {
+for (let i = 0; i < fruitAndVeg.length; i = i + 1) {
   if (fruitAndVeg[i] !== 'avocado') {
     noAvocados.push(fruitAndVeg[i]);
   }
@@ -495,8 +495,8 @@ Write a function that lists all DOM children elements.
 
 ```js
 function listDomElements() {
-  var children = document.body.childNodes;
-  var i;
+  const children = document.body.childNodes;
+  let i;
 
   for (i = 0; i <  children.length; i = i + 1) {
     console.log(children[i]);
@@ -526,7 +526,7 @@ The most common way, is by retrieving elements by id.
 Add an id `description`to the paragraph element.
 
 ```js
-var description = document.getElementById('description');
+const description = document.getElementById('description');
 console.log(description.innerHTML);
 ```
 
@@ -552,7 +552,7 @@ document.appendChild('<node>');
 Try this out using the london object we declared previously
 
 ```js
-var london = {
+const london = {
   name: 'London',
   population: 8308369,
   tallestBuilding: {
@@ -574,10 +574,10 @@ var london = {
 ```js
 function displayPopulation() {
   // Make a new <p></p> for population. This is not attached to the DOM yet.
-  var paragraph = document.createElement('p');
+  const paragraph = document.createElement('p');
 
   // Make some text content to put into your <p></p>
-  var content = document.createTextNode('Population: ' + london.population);
+  const content = document.createTextNode('Population: ' + london.population);
 
   // Put the text content into the <p></p>.
   paragraph.appendChild(content);
diff --git a/js/lesson3/tutorial.md b/js/lesson3/tutorial.md
index 06d2e549..35962cea 100644
--- a/js/lesson3/tutorial.md
+++ b/js/lesson3/tutorial.md
@@ -215,7 +215,7 @@ will be the `<li>`.
 So, begin your new event handler with this line:
 
 ```js
-var li_node = $(this).parent();
+const li_node = $(this).parent();
 ```
 
 Now that you have the right list item, use `.append()` to add a new
@@ -447,7 +447,7 @@ For this next part, we're going to use a function that belongs to arrays.
 Open the javascript console. Start by defining an array:
 
 ```js
-var words = ['these', 'are', 'some', 'words'];
+const words = ['these', 'are', 'some', 'words'];
 ```
 
 We're going to use your array's `forEach` function. You can use it to call another function once for each thing in the array. Try this:
@@ -485,7 +485,7 @@ $(document).ready(function() {
 Pick a few colour codes you like and store them in an array:
 
 ```js
-var colors = [ '22ac5e', 'd68236', '770077' ];
+const colors = [ '22ac5e', 'd68236', '770077' ];
 ```
 
 Now you can use a `colors.forEach` inside your `ready` function to call
@@ -616,7 +616,7 @@ Make a new variable, outside your event handler functions. You're
 going to use this to store the original colour:
 
 ```js
-var previewColor;
+let previewColor;
 ```
 
 In the `mouseenter` event, get the current `background-color` of the
diff --git a/js/lesson4/tutorial.md b/js/lesson4/tutorial.md
index 0a95b861..3d3692f7 100644
--- a/js/lesson4/tutorial.md
+++ b/js/lesson4/tutorial.md
@@ -106,8 +106,8 @@ We will need to pass the username to GitHub, so we need to extract it from the i
 $(document).ready(function() {
   $(document).on('keypress', '#username', function(event) {
     if (event.which === 13) { // check the key was <enter>
-      var input = $(this);
-      var username = input.val();
+      const input = $(this);
+      const username = input.val();
 
       console.log('username was: ' + username);
     }
@@ -119,13 +119,13 @@ Now we're ready to pass this through to GitHub. Let's make another function, som
 
 ```js
 function getGithubInfo(username) {
-  var url = 'https://api.github.com/users/' + username;
+  const url = 'https://api.github.com/users/' + username;
 
-  var xmlhttp = new XMLHttpRequest();
+  const xmlhttp = new XMLHttpRequest();
   xmlhttp.open('GET', url, false);
   xmlhttp.send();
 
-  var data = xmlhttp.responseText;
+  const data = xmlhttp.responseText;
 
   console.log(data);
 }
@@ -152,9 +152,9 @@ Our `getGithubInfo` method will return the response from the server, including t
 
 ```js
 function getGithubInfo(username) {
-  var url = 'https://api.github.com/users/' + username;
+  const url = 'https://api.github.com/users/' + username;
 
-  var xmlhttp = new XMLHttpRequest();
+  const xmlhttp = new XMLHttpRequest();
   xmlhttp.open('GET', url, false);
   xmlhttp.send();
 
@@ -182,8 +182,8 @@ Once we've checked the status, we need to decode the data which is stored in `xm
 function showUser(xmlhttp) {
   if(xmlhttp.status === 200) {
     // show the user details
-    var json = xmlhttp.responseText;
-    var user = JSON.parse(json);
+    const json = xmlhttp.responseText;
+    const user = JSON.parse(json);
   } else {
     // show an error
   }
diff --git a/js/lesson6/tutorial.md b/js/lesson6/tutorial.md
index 87c2d922..34047897 100644
--- a/js/lesson6/tutorial.md
+++ b/js/lesson6/tutorial.md
@@ -28,8 +28,8 @@ Canvas is specified using the HTML `<canvas>` element.
 To render to the canvas, we must use the canvas drawing context, which handles all the nice stuff.
 
 ```js
-var canvas = document.getElementById('canvas-id');
-var context = canvas.getContext('2d');
+const canvas = document.getElementById('canvas-id');
+const context = canvas.getContext('2d');
 ```
 
 ### Controls
diff --git a/js/lesson9/tutorial.md b/js/lesson9/tutorial.md
index 086b2ca4..d7f6b6dd 100644
--- a/js/lesson9/tutorial.md
+++ b/js/lesson9/tutorial.md
@@ -96,10 +96,10 @@ If you don't have Node, refer to the top of this tutorial for how to load files
 This means that we have loaded our very first object into our REPL! Without exiting the REPL, now try typing:
 
 ```
-var cat = new Cat ();
+const cat = new Cat ();
 ```
 
-(It doesn't really matter what you call the variable. Variable names are arbitrary in all programming languages, so we could say ```var ginger = new Cat ();``` or ```var luciferTheEvilCat = new Cat ();```. However, it is good practice to pick variable names that are clear and intuitive.)
+(It doesn't really matter what you call the variable. Variable names are arbitrary in all programming languages, so we could say ```const ginger = new Cat ();``` or ```var luciferTheEvilCat = new Cat ();```. However, it is good practice to pick variable names that are clear and intuitive.)
 
 This creates a new Cat object. Think about the Cat function as a blueprint for how every new Cat object ought to be made. However, a blueprint of a cat is not a cat! Using JavaScript, we created an "instance" of a cat based on the blueprint.
 
@@ -124,7 +124,7 @@ Remember how when we created a new Cat, we got an `undefined` value?
 You will need to reload the file into your Node REPL each time you change the source code. Now, try creating a new Cat object, and calling `meow` on it:
 
 ```
-var fluffy = new Cat();
+const fluffy = new Cat();
 fluffy.meow();
 ```
 
@@ -161,7 +161,7 @@ function Cat (initialHunger) {
 If using this approach, we will have to supply the correct number of arguments to the constructor function every time a new cat is created. (See what happens if you don't!)
 
 ```
-var hungryCat = new Cat("starving");
+const hungryCat = new Cat("starving");
 ```
 
 Let's give him two new methods that will affect his hunger levels:

From e1e2558741c80567d412d74e6bfd54f6fe2a20e9 Mon Sep 17 00:00:00 2001
From: jo! <dev@j0.lol>
Date: Wed, 18 Mar 2026 11:30:44 +0000
Subject: [PATCH 2/3] Apply suggestions from code review

Co-authored-by: Burhan Ali <1482649+biggianteye@users.noreply.github.com>
---
 js/lesson1/tutorial.md | 2 +-
 js/lesson9/tutorial.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/lesson1/tutorial.md b/js/lesson1/tutorial.md
index 918d34cd..beac57a8 100644
--- a/js/lesson1/tutorial.md
+++ b/js/lesson1/tutorial.md
@@ -164,7 +164,7 @@ A line starting with `let` is a **variable definition**. You should
 use this whenever you are creating a new variable.
 
 > In previous versions of JavaScript, `var` was used for all
-**variable defintions**, but `let` is now considered better to use.
+**variable definitions**, but `let` is now considered better to use.
 [You can read more about why on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#description).
 
 You can also change the value of a variable. That's why it's a
diff --git a/js/lesson9/tutorial.md b/js/lesson9/tutorial.md
index d7f6b6dd..ee6ed2b0 100644
--- a/js/lesson9/tutorial.md
+++ b/js/lesson9/tutorial.md
@@ -99,7 +99,7 @@ This means that we have loaded our very first object into our REPL! Without exit
 const cat = new Cat ();
 ```
 
-(It doesn't really matter what you call the variable. Variable names are arbitrary in all programming languages, so we could say ```const ginger = new Cat ();``` or ```var luciferTheEvilCat = new Cat ();```. However, it is good practice to pick variable names that are clear and intuitive.)
+(It doesn't really matter what you call the variable. Variable names are arbitrary in all programming languages, so we could say 
 
 This creates a new Cat object. Think about the Cat function as a blueprint for how every new Cat object ought to be made. However, a blueprint of a cat is not a cat! Using JavaScript, we created an "instance" of a cat based on the blueprint.
 

From a873f2b071ad2e316a3e358d133c6e38e3b318a0 Mon Sep 17 00:00:00 2001
From: j0lol <me@j0.lol>
Date: Wed, 18 Mar 2026 00:41:00 +0000
Subject: [PATCH 3/3] Replace string addition with Template Literals

Yes reviewers, ` \`\` \` \`\` ` is the only way
to put backticks in backtics in Jekyll. I tried \
---
 js/lesson1/tutorial.md | 16 +++++++++++-----
 js/lesson2/tutorial.md | 42 +++++++++++++++++++++---------------------
 js/lesson3/tutorial.md |  7 +++----
 js/lesson4/tutorial.md |  6 +++---
 4 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/js/lesson1/tutorial.md b/js/lesson1/tutorial.md
index beac57a8..f926eb9a 100644
--- a/js/lesson1/tutorial.md
+++ b/js/lesson1/tutorial.md
@@ -308,10 +308,15 @@ Change your `sayHello` function definition to look like this:
 
 ```js
 function sayHello(person) {
-  console.log('Hello ' + person + '!');
+  console.log(`Hello ${person}!`);
 }
 ```
 
+This is a **template literal** string and is denoted with the backtick
+`` ` `` symbol instead of `'`. Inside of a template literal, you can
+include **variables** with the `${variable}` syntax. This is called a
+**string interpolation**.
+
 Now try calling it using `sayHello('Archibald')`.
 
 > Try calling the function again using your own name?
@@ -337,7 +342,7 @@ like the others.
 In the body of this new function, write this line:
 
 ```js
-return 'Hello ' + person + '!';
+return `Hello ${person}!`;
 ```
 
 Try calling this function from the console. Look carefully at the
@@ -363,8 +368,8 @@ with commas. Change the first line of your `conversation` function to be:
 function conversation(person, topic) {
 ```
 
-Now add another line to the function that prints `"Do you like " +
-topic + "?"` on the console.
+Now add another line to the function that prints
+`` `Do you like ${topic}?` `` on the console.
 
 Similarly, you call the function like this:
 
@@ -536,7 +541,8 @@ You also know how to do all these things:
 
 * Use the javascript console
 * Store values in variables
-* Add numbers and combine strings with `+`
+* Add numbers with `+`
+* Combine strings with template literals (`` ` ``) and `${}`
 * Define and call functions
 * Access object properties
 * Call object methods
diff --git a/js/lesson2/tutorial.md b/js/lesson2/tutorial.md
index 19d493fc..7eb6b6f1 100644
--- a/js/lesson2/tutorial.md
+++ b/js/lesson2/tutorial.md
@@ -21,7 +21,7 @@ In the first tutorial, we learnt all about **values**.
 ```js
 const name = 'codebar';
 
-console.log(name + ' is amazing!'); // this is an expression
+console.log(`${name} is amazing!`); // this is an expression
 ```
 
 **Numbers**:
@@ -29,7 +29,7 @@ console.log(name + ' is amazing!'); // this is an expression
 ```js
 const pi = 3.14;
 
-console.log('The value of pi: ' + pi);
+console.log(`The value of pi: ${pi}`);
 ```
 
 and **Objects**:
@@ -39,7 +39,7 @@ const person = {
   first_name: 'Archibald'
 };
 
-console.log('Hello ' + person.first_name + '!');
+console.log(`Hello ${person.first_name}!`);
 ```
 
 We are now going to introduce one more important type: **booleans**. A
@@ -49,8 +49,8 @@ boolean can only be `true` or `false`, for example:
 const codebarIsAwesome = true;
 const weatherIsAmazing = false;
 
-console.log('Is codebar AWESOME? ' + codebarIsAwesome);
-console.log('Is the weather in London amazing? ' + weatherIsAmazing);
+console.log(`Is codebar AWESOME? ${codebarIsAwesome}`);
+console.log(`Is the weather in London amazing? ${weatherIsAmazing}`);
 ```
 
 ## Expressions
@@ -65,19 +65,19 @@ const x = 6;
 const y = 3;
 const addition = x + y;
 
-console.log('Addition: x + y = ' + addition); // Addition: x + y = 9
+console.log(`Addition: x + y = ${addition}`); // Addition: x + y = 9
 
 const subtraction = x - y;
 
-console.log('Subtraction: x - y = ' + subtraction); // Subtraction: x - y = 3
+console.log(`Subtraction: x - y = ${subtraction}`); // Subtraction: x - y = 3
 
 const multiplication = x * y;
 
-console.log('Multiplication: x * y = ' + multiplication); // Multiplication: x * y = 18
+console.log(`Multiplication: x * y = ${multiplication}`); // Multiplication: x * y = 18
 
 const division = x / y;
 
-console.log('Division: x / y = ' + division); // Division: x / y = 2
+console.log(`Division: x / y = ${division}`); // Division: x / y = 2
 ```
 
 > Why not try some other maths problem using the `x` and `y` variables?
@@ -97,19 +97,19 @@ let x = 5;
 let y = 3;
 const modulus = x % y;
 
-console.log('Remainder: x % y = ' + modulus);
+console.log(`Remainder: x % y = ${modulus}`);
 
 const exponentiation = x ** y;
 
-console.log('Exponentiation: x ** y = ' + exponentiation);
+console.log(`Exponentiation: x ** y = ${exponentiation}`);
 
 const increment = x++;
 
-console.log('Increment: x++ = ' + increment);
+console.log(`Increment: x++ = ${increment}`);
 
 const decrement = y--;
 
-console.log('Decrement: y-- = ' + decrement);
+console.log(`Decrement: y-- = ${decrement}`);
 ```
 
 #### Comparisons
@@ -122,7 +122,7 @@ const oranges = 'oranges';
 
 const equal = apples === oranges;
 
-console.log('Apples and oranges are the exactly same: ' + equal);
+console.log(`Apples and oranges are the exactly same: ${equal}`);
 ```
 
 The opposite of `===` is `!==`. It returns `true` if they are not equal, and `false` if they are.
@@ -133,7 +133,7 @@ const oranges = 'oranges';
 
 const notEqual = apples !== oranges;
 
-console.log('Apples and oranges are different: ' + notEqual);
+console.log(`Apples and oranges are different: ${notEqual}`);
 ```
 
 > You may also see `==` and `!=`, these are similar but have some quirks so it's generally recommended to avoid them.
@@ -148,10 +148,10 @@ const students = 24;
 const pizzas = 25;
 
 const moreStudents = students > coaches;
-console.log('Are there more students than coaches?' + moreStudents);
+console.log(`Are there more students than coaches? ${moreStudents}`);
 
 const lessStudents = students < pizzas;
-console.log('Are there fewer students than pizzas?' + lessStudents);
+console.log(`Are there fewer students than pizzas? ${lessStudents}`);
 
 ```
 > Play around with changing the `coaches`, `students` and `pizzas` variable numbers to familiarise yourself with operators.
@@ -160,7 +160,7 @@ You can also combine operators.
 
 ```js
 const enoughPizzas = (coaches + students) < pizzas;
-console.log('Do we have enough pizzas for everybody? ' + enoughPizzas);
+console.log(`Do we have enough pizzas for everybody? ${enoughPizzas}`);
 ```
 > Now sit with your coach and create 2 variables, one is your age and one is the
 > minimum driving age. Then console log whether you are old enough to drive.
@@ -256,7 +256,7 @@ while (i <= 10) {
   i = i + 1;
 }
 
-console.log('Total: ' + total);
+console.log(`Total: ${total}`);
 ```
 
 > We can also express `<= 10` using `< 11`
@@ -299,7 +299,7 @@ for (i = 1; i <= 10; i = i + 1) {
   total = total + i;
 }
 
-console.log('Total: ' + total);
+console.log(`Total: ${total}`);
 ```
 > Another way to write the for loop is `for (let i = 1; i <= 10; i++)`. The `i++` is a short way of writing "increase i by one".
 
@@ -577,7 +577,7 @@ function displayPopulation() {
   const paragraph = document.createElement('p');
 
   // Make some text content to put into your <p></p>
-  const content = document.createTextNode('Population: ' + london.population);
+  const content = document.createTextNode(`Population: ${london.population}`);
 
   // Put the text content into the <p></p>.
   paragraph.appendChild(content);
diff --git a/js/lesson3/tutorial.md b/js/lesson3/tutorial.md
index 35962cea..23ffbf1d 100644
--- a/js/lesson3/tutorial.md
+++ b/js/lesson3/tutorial.md
@@ -98,7 +98,7 @@ wrote on the console earlier, but instead of adding 'My first item',
 we want to add the parameter to this function:
 
 ```js
-'<li>' + item + '</li>'
+`<li>${item}</li>`
 ```
 
 Once you've done that, reload `index.html` in your browser, and try
@@ -257,8 +257,7 @@ Store those lengths in two variables called `pending` and `completed`.
 
 Now let's display them on the page. Look at `index.html` and find the
 span that comes just below the `<ol>` element. Write a jQuery selector
-for that element, and then call `.text('Pending: ' + pending + '
-Completed: ' + completed)` on it.
+for that element, and then call `` `.text(`Pending: ${pending} Completed: ${completed}`)` `` on it.
 
 ### Write some code
 
@@ -425,7 +424,7 @@ method to add something to the start of an element, and something like
 this to make the new box:
 
 ```js
-'<div class="item" style="background-color: ' + color + ';"></div>'
+`<div class="item" style="background-color: ${color};"></div>`
 ```
 
 > Run `addBox('FF0033')` from the console to make sure your code works.
diff --git a/js/lesson4/tutorial.md b/js/lesson4/tutorial.md
index 3d3692f7..af696acf 100644
--- a/js/lesson4/tutorial.md
+++ b/js/lesson4/tutorial.md
@@ -109,7 +109,7 @@ $(document).ready(function() {
       const input = $(this);
       const username = input.val();
 
-      console.log('username was: ' + username);
+      console.log(`username was: ${username}`);
     }
   });
 });
@@ -119,7 +119,7 @@ Now we're ready to pass this through to GitHub. Let's make another function, som
 
 ```js
 function getGithubInfo(username) {
-  const url = 'https://api.github.com/users/' + username;
+  const url = `https://api.github.com/users/${username}`;
 
   const xmlhttp = new XMLHttpRequest();
   xmlhttp.open('GET', url, false);
@@ -152,7 +152,7 @@ Our `getGithubInfo` method will return the response from the server, including t
 
 ```js
 function getGithubInfo(username) {
-  const url = 'https://api.github.com/users/' + username;
+  const url = `https://api.github.com/users/${username}`;
 
   const xmlhttp = new XMLHttpRequest();
   xmlhttp.open('GET', url, false);