Object and Arrays – Reference vs Copy

Screenshot of working through the "Object and Arrays - Reference vs Copy" tutorial.

Screenshot of working through the “Object and Arrays – Reference vs Copy” tutorial.

This tutorial worked through the differences between referring to a variable, array or object and making a copy that you can then manipulate without affecting the original. There were a couple key takeaways I found interesting with this exercise.

The first was that if you let one variable be assigned a value, then refer that variable to a new one and then reassign the first variable this doesn’t change the second.

Next I learnt three ways of copying an array. I think my favourite is using the spread syntax as follows:

const showHosts = ['Pinacolada Soundsystem', 'Fraserhead', 'Dave Branton', 'Dr Hitchcock'];
const eightKayMembers = [...showHosts];

K-O-N-A-M-I code!! Key Sequence Detection

KONAMI key sequence code screenshot

KONAMI key sequence code screenshot

For any kid that grew up playing computer games in the 80s and 90s the Konami key sequence brings back fond memories. In the latest tutorial from Wes Bos’ #JavaScript30 course he walks you through how to build this into your web page but instead of extra lives or invincibility you get rainbows and unicorns.

First up an empty array is created and your secret (or Konami) code is assigned to a constant. Then an event listener is added to the window to listen for any time a key on the keyboard is released. Every keystoke is then pushed to the end of the “pressed” array.

The .splice method is then used on the array. We want to match the six characters of the secret code which means keeping the array at a length of six characters. To ensure that key stokes keep passing through the array and not just stop when the array is full at 6 positions we pass as an argument:

-secretCode.length - 1, pressed.length - secretCode.length

This is constantly compared as a string in a if statement to the “secretCode” constant. On a successful key sequence match a rainbow or unicorn is added to the window with the “cornify_add” function.

Phew! What a fun little program. I can’t wait to add this to one of my websites.

14 Must Know Dev Tools Tricks

Screenshot of dev tools tutorial.

Screenshot of dev tools tutorial.

Today’s tutorial on Wes Bos’ course “JavaScript 30” was all about using dev tools to debug JavaScript and titled “14 Must Know Dev Tools Tricks”.

As I said before JavaScript has come a LONG way since I studied it properly in 2010. I’m not sure if the Web Console was part of Firefox back then but it is super slick and very helpful. We’ve been using console.log() regularly in the other tutorials and it was interesting to see how to send other information there such as warning, error and info messages. You can even style your console message with CSS styles which looks fun.