After creating a game, it would be nice to save our best scores. If we only save the score in memory it will be gone the next time we play. Instead, we can save the scores in the browser’s local storage.
This article steps through how to save high scores in local storage and then how to present them on the screen for the player. If you want to read about the game that inspired this article you can read about it here:
With local storage, we can store data in the browser in the…
JavaScript version ES6 (ES2015) brought us a couple of useful features for arrays represented by three dots (…), the rest parameter, and the spread operator. And ES2018 introduced the same syntax for objects.
It can be confusing to have one syntax represent two different uses. In this article, we will try to clear up the confusion and look into the two ways of using Javascript’s three dots.
In short we could say that:
argument
— An argument is a value passed to a function.parameter
— A Parameter is a variable used…Introduced in 2015 with ECMAScript6, template literals let us dynamically construct strings of text and embedded expressions, even multi-line strings of text, in a more elegant way than concatenation.
The syntax is not much different from the old one at first glance:
const newWay = `is cool`;
Can you spot the difference? Instead of single '’
or double "”
quotes we use backticks ``
.
In ES5 you had string concatenation:
const name = 'Jack';
const old = 'My name is '+ name + '.';
Using +
for both addition and concatenation can be confusing and even lead to unexpected bugs:
JavaScript proxies were introduced in 2015 with ECMAScript 6. They allow us to intercept and override operations such as object property lookup and assignment. A Proxy
object wraps another object and acts as a middleman.
The two most used data structures in JavaScript are Object
and Array
. The destructuring assignment introduced in ECMAScript 2015 is a shorthand syntax that allows us to extract array values or object properties into variables. In this article, we go through the syntax of both data structures and give examples when you can use them.
In ES5 you could access items in an array by index:
With ES6 destructuring, the code becomes simpler:
const [apple, banana, kiwi] = fruit;
Sometimes you might want to skip over items in the array being destructured:
const [,,kiwi] = ['apple', 'banana', 'kiwi'];
Or…
One of the most popular new features in ECMAScript 2015 is arrow functions. Is it because of the new cleaner syntax or the sharing of this with the parent scope? Maybe both. Let’s look into them in more detail.
The first factor that influenced the introduction of arrow functions was a shorter function syntax. The syntax can look a bit different depending on the function. Let’s see some options!
Here is a function written in ES5 syntax:
var sum = function(a, b) {
return a + b;
}sum(1, 2) // -> 3
And here is the same function as…
We often need to create many objects of the same kind, like users or cars. In object-oriented languages, a class is often used for this purpose.
JavaScript, being a prototype-based language, has something called constructor functions.
Classes, introduced with ES6 provide “syntactical sugar”, that is comparable to inheritance in object-oriented languages. Classes are special functions meant to mimic the class
keyword from these other languages. In this article we go through how to use JavaScript classes.
To define a class we use the class
keyword followed by the name of the class. …
In this article, we introduce variables and scope in JavaScript.
A variable is a named container with a unique name for storing data values. The statement below declares a variable with the name “car”:
let car;console.log(car); // undefined
In JavaScript, variables are initialized with the value of undefined
when they are created. You can assign a value to a variable using the assignment operator (=) when you declare it:
const car = "Volvo";console.log(car); // Volvo
Always initialize your variables before using them or you will get an error:
console.log(car); // ReferenceError: car is not definedconst car =…
Today, I’m taking you along for a journey in game development with the classic game of Tetris. We are going to touch upon concepts like graphics, game loops, and collision detection. In the end, we have a fully functioning game with points and levels. Part of the journey is using concepts of modern JavaScript, meaning features introduced in ECMAScript 2015 (ES6) like:
I hope you pick up something new that you can bring into your arsenal of JavaScript tricks!
If you are creating the project and get an error from the code…
Angular by day, React by night. Senior Consultant jProfessionals. Educator wannabe. ngVikings organizer.