By the end of this article, you will know how to use template literals. You will learn the syntax, the benefits, and some use cases. And you will also learn about an even more powerful feature called tagged template literals.

Table of Contents

• What are Template Literals?

• Template Literals vs Regular Strings

• Some Use Cases of Template Literals

• Tagged Template Literals

• Examples of Tagged Template Literals

• Conclusion

What are Template Literals?

Template literasl are a feature in JavaScript that let developers work with strings in a convenient way. You denote regular strings in JavaScript using double quotes "" or single quotes ''.

But with template literals, you denote strings using backticks ````. This lets you embed variables and expressions within your strings.

Here's an example:

const website = 'freeCodeCamp'
const message = `Welcome to ${website}`

console.log(message)

Output of template literal example.

The value of the message variable is an example of a template literal. It includes backticks which are used to define the template literal. And it also includes the syntax ${} which is used to embed variables within the string.

Template Literals vs Regular Strings

Let's now take a look at how template literals differ from regular strings and also some of the benefits of using template literals.

String Concatenation

Before the introduction of template literals, you had to use the plus + symbol when you wanted to concatenate strings.

const userName = 'Marie'
const balance = 10

// Using regular string
const str1 = 'Hi ' + userName + ',' + ' your balance is ' + balance + '.'
console.log("Regular string: ", str1)

// Using template literal
const str2 = `Hi ${userName}, your balance is ${balance}.`
console.log("Template literal: ", str2)

The regular string and template literal produce the same output for the example.

Note how using regular strings involves adding many plus signs. And also accounting for whitespace at the right places. This can get difficult to deal with when working with lengthy strings.

With the template literal example, there was no need to add any plus signs. You write everything together as a single string. The variables are directly embedded using the ${} syntax.

Multi-line Strings

Another way template literals make it easier to work with strings is when dealing with multi line strings. For regular strings, you have to use a combination of the plus + sign and \n to denote a new line. But template literals don't require any of that.

const regularString = 
'Hello there! \n' +
'Welcome to our website. \n' +
'How can we help you today?'

const templateLiteral = 
`Hello there!
Welcome to our website.
How can we help you today?`

console.log(regularString)
console.log(templateLiteral)

Multi line string examples for regular string and template literal.

Both the regularString and templateLiteral variables give the same output. The template string recognises whitespaces and linebreaks automatically.

Readability and Maintainability

Template literals also make your code more readable and easier to maintain. As you've seen already, they doesn't require any concatenation with the plus + sign. And you also don't need to worry about escaping quotations marks.

Here's an example:

const city = "Paris"
const str1 = 'She said, "I love ' + city + ', it\'s a beautiful place."'
const str2 = `She said, "I love ${city}, it's a beautiful place`

console.log(regularString)
console.log(templateLiteral)

Results of regular string and template literal examples

Unlike the template literal, the regular string requires the following;

• The use of the plus + for concatenation.

• Careful use of single and double quotes.

• The need to escape the single quote in string with \.

Some Practical Use Cases of Template Literals

So far, you've learned what template literals are and how they compare with regular strings. Now, let's look at some practical examples.

Generating HTML Markup

You will often see template literals used for generating HTML markup. They allow you to embed JavaScript expressions directly into HTML strings. This makes it easy to create content that's dynamic and data driven.

Example:

const user = {
  name: "Marie",
  age: 25,
};

const userProfile = `
<div>
  <h2>Name: ${user.name}</h2>
  <p>Age: ${user.age}</p>
</div>
`

Note how the ${} syntax allows you to run JavaScript expressions directly within the string. In this case, it's used to read the values of the user object's properties.

Creating Dynamic SQL Queries

You can also use template literals to create dynamic SQL queries by embedding variables or expressions directly into the query strings. This means you can easily create queries based on runtime values.

Example:

const tableName = "users";
const columnName = "name";
const searchValue = "John";

const sqlQuery = 
  `SELECT * FROM ${tableName} WHERE ${columnName} = '${searchValue}'`

Localization and Internalization

Another practical use of template literals is for handling localization and internationalization in your apps. It's easier to manage translations because with template literals, you can embed variables for localized content or language keys directly into strings.

Example:

const user = {
  name: "Marie",
};

const locale = "fr";
const greetings = {
  en: "Hello",
  es: "Hola",
  fr: "Bonjour"
};

const localizedGreeting = `${greetings[locale]} ${user.name}!`;
console.log(localizedGreeting)

Example of using template literals for localized content.

This example creates a localizedGreeting string without relying on any cumbersome concatenation.

Tagged Template Literals

This is a feature of the JavaScript template literal that you can use to perform advanced string manipulation.

To use this feature, you need a tag function and then a tagged template.

The tagFunction takes in a mix of strings and variables as arguments. It then formats them based on some condition or rules you set.

Then, you call (or run) the tag function by placing it before the opening backtick of the template literal.

Syntax for Tagged Template Literal

function taggedFunc(strings, ...values) {
  console.log(strings)
  console.log(values)
}

const name = 'Sarah'
const city = 'Rome'

taggedFunc`Hello ${name}. Welcome to ${city}.`

Log results for the string and value arguments of a tagged template literal

There are three things to take note of here.

First, the first parameter (strings in this example) is always an array of all the blocks of strings in the template literal. In this case, it is the array below.

['Hello ', '. Welcome to ', '.']

Next, the rest of the parameters will be all the variables and evaluated expressions within the template literals. The JavaScript rest parameter syntax ...values makes it simple to get all of them.

['Sarah', 'Rome']

Finally, take note of how the taggedFunc is used. Unlike a regular function, you won't call it with a parenthesis. But by attaching it before the first backtick of the template literal.

taggedFunc`Hello ${name}. Welcome to ${city}.` ✅

taggedFunc(Hello ${name}. Welcome to ${city}.) ❌

Practical Example of Tagged Template Literal

Now let's see some practical examples of using a tagged template literal to handle string manipulation.

Example 1

function receiptTag(strings, ...values) {  

  let finalString = ''
  for (let i = 0; i < values.length; i++) {
    finalString += strings[i] + values[i]
  }

  // Add the last string literal
  finalString += strings[strings.length - 1] 

  return finalString
}

const item = 'apple'
const price = 2.5
const quantity = 3

const message = receiptTag`
  You have ${quantity} ${item}s.
  Unit cost: $${price}. 
  Total cost: $${quantity * price}.
`

console.log(message)

Example of a string formatted with a tagged template literal.

In this example, the recieptTag function receives a template literal with four expressions:

• ${quantity}

• ${item}

• ${price}

• ${quantity * price}

The values array will contain the evaluated values of these expressions.

[3, 'apple', 2.5, 7.5]

And you can process them accordingly in the tagged function.

The result, logged to the console is a message that includes information about the quantity, item, unit cost and total cost.

Example 2

function greetUser(strings, name) {
  const now = new Date()
  const currentHour = now.getHours()

  const timeOfDay = currentHour < 12 ? 'morning' : currentHour < 17 ? 'afternoon' : 'evening'

  return `Good ${timeOfDay} ${name}${strings[1]}`
}

const userName = 'Ama'

console.log(greetUser`Hello ${userName}, nice to meet you!`)

This example uses tagged template literal to determine how to greet the user based on what time of day it is.

The function first gets the current hour using the date object. Then uses a tenary operator to determin time of day. And returns a string with a timeOfDay variable indicating what time of day it is.

Also, pay attention to the first word of the log statement and compare it to the first word of the string passed to the tag to see how the function has changed the string.

Conclusion

Template literals provide a convenient way to work with strings in JavaScript. In this article, you've learned about the syntax, and how to use them in your projects.

You also learned about an advanced feature of template literals: tagged template literals. These are functions that take in an array of string blocks and expressions. They return a string based on the logic you write for the function.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

When you are building an application that can be accessed on the web, there are a lot of dependencies or packages that you will need for your application to function well.

You'll need most of these packages when you're building JAMStack applications with frameworks or libraries like React, Vuejs, Next.js, or Angular.

In this article, I'll walk you through an error you may get when you are building JavaScript apps with Next.js, and how to bypass it.

What the Heck are ESModules?

ESModules are the ECMAScript standards for working with JavaScript modules in the browser.

"What does that have to do with these annoying and frustrating errors that I have been seeing for the past few days?" you might ask me.

Well... Node.js has been using the CommonJS standards for a very long time to properly structure JavaScript code or modules in this scenario, and the majority of the code we write resides/works in the browser.

There were no standards to properly guide how JavaScript modules were used, or interpreted, at least in web browsers. This challenge brought about the ESModules standards which guide how JavaScript modules work in the browser.

This standard was approved when ES6 (ECMAScript 6) was launched in 2015, and brought about the implementation of the standards in various web browsers like Chrome, Safari, Firefox, and Microsoft's Edge.

Most of the packages we use in building frontend UIs are written in JavaScript. They have modules that are exporting a particular function (it could be a JavaScript component), an object, a string, a bunch of arrays, and so on.

These functions, arrays, or strings can be exposed as libraries to other JavaScript files. Say, for example, we have a function that prints the name of anyone in the console. The syntax will be like this:

// name.js
export default (name) => console.log(name)

The snippet above describes a default export, without a specific name. This means that if we want to use the function in this module, we can call it any name, since a name wasn't explicitly assigned to it upon declaration

import printName from "./name.js"

printName("Dodo")

Okay, why do I still get the error though?

Yes. Now on to that error. When we begin to interface with a lot of dependencies or packages in our applications, some things might start going wrong if we don't give proper care to our codebases.

We start to deal with versioning of these packages, breaking changes, and releases sometimes, which we can not keep track of. Then, we might begin to scurry down the rabbit hole of downgrading or upgrading a particular npm package before anything even works at all.

Most of these errors may arise from the maintainers of these packages. Take, for example, the ESModules standard – which is relatively new – that we are discussing in this article. It may take some time for it to be adopted by some frameworks or front-end JavaScript libraries out there, for example, Next.js.

The error in the image below shows that we can't use the CommonJS approach to import a module.

This new standard and the fact that it's a bit unfamiliar to these tools we use is the reason for this error. Nirmalya Ghosh wrote this piece on how to maintain large Next.js apps, you should take a look at it.

How to use Next.js dynamic imports

Now that we've gone through the rudiments of what ESModules are, let's see how we can fix the error that is quite similar to the one we saw in the image above. We'll see how we can fix it with dynamic imports in Next.js.

I'll be assuming you already have a Next.js app running, so I'll just share the corresponding ESModule error I got from my terminal in the code block below:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/package

require() of ES modules is not supported. 

ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.

Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /path/to/package

Take a look at the error above so that you're quite familiar with it. Once you've done that, let's proceed.

What are dynamic imports?

Dynamic imports is a feature of Next.js that allows you to work with JavaScript modules conveniently in the browser.

It provides a means of pre-rendering these modules with SSR (Server-side Rendering) so that users do not need to send requests continuously to the server when they need — say, for example — a page that uses a JavaScript module. With dynamic imports, the modules are already pre-rendered in the browser.

Recently, I was working on a project that had to do with markdown content. I needed to use rehype plugins, but I kept on getting the error in the previous code block.

const rehypeSlug = dynamic(() => import('rehype-slug'), { ssr: false })
const rehypeCodeTitles = dynamic(() => import('rehype-code-titles'), {
  ssr: false,
})
const rehypeAutolinkHeadings = dynamic(
  () => import('rehype-autolink-headings'),
  { ssr: false }
)
const rehypePrism = dynamic(() => import('rehype-prism-plus'), { ssr: false })

The snippet above shows how you can import a module with dynamic imports and pass the ssr object as an argument to it.

With this approach of using dynamic imports, the ESModule errors that kept on showing up were removed.

Wrapping Up

So I hope you'll be able to make use of this feature, and I hope it liberates you from that error.

There's a lot you have to think about when you're building JavaScript applications, so this can be one less thing. Thank you for reading this article, and I hope you enjoyed it.

Here are the ES6 features we'll cover in this guide:

• Modules
• Destructuring
• Spread Operator
• Arrow functions
• Template Literals

All the examples we'll see here are quite basic and should be easy for beginners to grasp.

How to Use ES6 Modules

Modules help you split various functionalities of your app into separate files/scripts. You can have different scripts for form validation, logging a user in, and so on.

Here, we will have two scripts: one for adding numbers and the other for subtracting numbers. We will take it step by step.

This is the structure of our folder:

index.html
script.js
myModules/
add.js
sub.js

First we'll see how to use modules in vanilla JavaScript. Then we'll see how to apply them in React.

Step 1 – Create the HTML file and link your script

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ES6 Modules</title>
</head>
<body>
    <script type="module" src="script.js"></script>
</body>

You will notice that the script tag has a type which has the value of module. That should be the first thing you do if you are going to use the Module feature.

You may come across resources that use a different method like adding a .mjs extension to their files, but to be on the safe side I'd recommend this method. The script.js will act as the "parent script" which we will be importing our modules into.

Step 2 – Create and export functions into separate files

Here's the function for addition in add.js:

export function add(a, b){
    return a + b;
}

Here's the function for subtraction in sub.js:

export function sub(a, b){
    return a - b;
}

Did you notice the export statement? To be able to use these functions in other scripts, you have to export them by adding the export statement.

Here, we used inline export by adding the statement before the function – but you can opt to export this function at the bottom of the document like this: export default add;.

Step 3 – Import the functions into script.js

import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js"

console.log(add(6, 4)); // 10

console.log(sub(6, 4));  // 2

To import the add function, we first typed the import statement followed by the name of the function nested in curly brackets and then the path to the file which the function exists in.

You can see how we used add(6, 4); without reinventing the wheel by creating the function from scratch. Now you can import this function into any script you want.

Step 4 – How to apply modules in React.js

Now that you have seen how we can use modules in vanilla JavaScript, let's have look at how you can use them in a React app.

When you create a React application, the App.js component usually acts as the main component. We are going to create another component called User.js with some content about a user.

Here's the App.js component:

function App() {
  return (
    <div className="App">

    </div>
  )
}

export default App

This component has just a div without any content.

And here's the User.js component:

function User() {
    return (
        <div>
            <h1>My name is Ihechikara.</h1>
            <p>I am a web developer.</p>
            <p>I love writing.</p>
        </div>
    )
}

export default User

If you can recall, you can export your functions at the bottom of the script as we just did. Next, we will import this function into the App.js component:

import User from "./User"

function App() {
  return (
    <div className="App">
      <User/>
    </div>
  )
}

export default App

Just two additions to the script: import User from "./User" which point to the location of the component, and <User/> being the component itself.

Now you can reuse the logic in the User.js component across your app and you can make it more dynamic using props instead of hard coding the user's information – but that is beyond the scope of this tutorial.

How to Use ES6 Destructuring

To destructure means to dismantle the structure of something. In JavaScript, this structure could be an array, an object, or even a string where the properties that make up the structure would be used to create a new identical structure (the properties can be altered).

If what I have said still seems abstract to you, don't worry because you will understand better from the examples.

Prior to ES6, this is how you would extract some data in JavaScript:

var scores = [500, 400, 300];

var x = scores[0],
    y = scores[1],
    z = scores[2];

    console.log(x,y,z); // 500 400 300

But in ES6, using destructuring, we can do this:

let scores = [500, 400, 300];

let [x, y, z] = scores;

console.log(x,y,z); //500 400 300

The x, y and z variables will inherit the values in the scores array in the order which they appear, so x = 500, y = 400 and z = 300. In a situation where all the values in the array have been inherited, any other value left without a parent value will return as undefined. That is:

let scores = [500, 400, 300];

let [x, y, z, w] = scores;

console.log(x,y,z,w); //500 400 300 undefined

Here is an example using objects:

let scores = {
    pass: 70,
    avg: 50,
    fail: 30
};

let { pass, avg, fail} = scores;

console.log(pass, avg, fail); // 70 50 30

The process is the same as destructuring arrays.

Here is another example, but with strings:

let [user, interface] = 'UI';

console.log(user); // U

console.log(interface); // I

The string was split into individuals letters and then assigned to the variables in the array.

How to use destructuring in React.js

There are various scenarios where you might want to use destructuring in React. But a very common one would be with the useState hook.

import { useState } from 'react';

function TestDestructuring() {
    const [grade, setGrade] = useState('A');

    return(
        <>

        </>
    )
}

export default TestDestructuring

Above, we created a constant variable grade along with a function setGrade whose purpose is to update the value of the variable. And we set the value of grade to 'A' using destructuring.

How to Use the ES6 Spread Operator

The spread operator ... lets you copy all or some parts of an array, object, or string into another array, object, or string. For example:

const collectionOne = [10, 20, 30];
const collectionTwo = [40, 50, 60];

const allCollections = [...collectionOne, ...collectionTwo];

console.log(allCollections); //10, 20, 30, 40, 50, 60

There is really not much to this. Using the ... symbol, all the values of the first two collections were assigned to the third collection.

Now that we have all the collections in one array, we will use the spread operator to copy the array and output the highest number. That is:

const allCollections = [10, 20, 30, 40, 50, 60];

const maxNumber = Math.max(...allCollections);
console.log(maxNumber) //60

How to combine the spread operator with destructuring

In the last section, we saw the application of destructuring in JavaScript. Now, let's see how we can combine destructuring and the spread operator:

let scores = [500, 400, 300];

let [x, ...y] = scores;

console.log(x); // 500

console.log(y); // [400, 300]

Here, the x variable inherited the first number in the array then the y variable spread across the array and copied everything that was left.

How to Use ES6 Arrow Functions

Basically, arrow functions allows us write our functions using shorter syntax. Before ES6, this is how you would write a function:

var greetings = function() {
  console.log("Hello World!")
}

//OR

function greetings2() {
  console.log("HI!")
}

With ES6, a different syntax was introduced:

var greetings = () => {
  console.log("Hello World!")
}

var greetings = () => {
  console.log("HI!")
}

The function keyword was removed while the fat arrow operator => was introduced.

Note that arrow functions are anonymous.

How to use arrow functions with parameters

Parameters in arrow functions are passed into the parenthesis that come before the fat arrow operator. Example:

var add = (a,b)=>{
  return a + b;
}
console.log(add(2,2)) //4

How to Use ES6 Template Literals

Template literals allow you use back-ticks (``) instead of quotes ("") to define a string. This has various advantages.

Before ES6:

var name = "My name is Ihechikara" 

console.log(fullname);

With ES6:

var name = `My name is Ihechikara` 

console.log(fullname);

Interpolation in template literals

String interpolation lets you include variables and statements in your strings without breaking it up with the + operator. That is:

var me = 'Ihechikara';

var fullname = `My name is Abba ${me}`;

console.log(fullname);

To interpolate a variable into your string, you use ${} with the name of the variable passed into the curly brackets. Always remember that your string must be nested inside back-ticks and not quotation marks.

The same applies when you are creating your DOM elements dynamically with JavaScript. You would do something like this:

let name = 'Ihechikara';
let myHtmlTemplate = `<h1> This is a paragraph created by ${name}</h1>`;

Conclusion

This article covered some of the most important ES6 features like modules, destructuring, spread operator, arrow functions and template literals.

You will see these features being used frequently while learning or understanding JavaScript frameworks, so it should help you grasp their application in whatever framework they appear.

If you have any questions about these features, you can find me on Twitter @ihechikara2. Thank you for reading!

​Keeping abreast of the newest developments in the language is really important. It can help you get a higher paying job, keep up to date with the latest trends, improve your code quality, and excel in your current job.

And you definitely need to know the latest features if you're trying to learn a JavaScript library like React or framework like Angular or Vue.

Recently, there have been many useful additions to JavaScript like the Nullish coalescing operator, optional chaining, Promises, async/await, ES6 destructuring, and more.

So today, we will look at some of these concepts which every JavaScript developer should be aware of.

Let's get started and dive into the things you need to know about JS.

Let and const in JavaScript

Before ES6, JavaScript used the var keyword which only used function and global scope. There was no block-level scope.

With the addition of let and const JavaScript added block scoping.

How to use let in JavaScript

When we declare a variable using the let keyword, we can assign a new value to that variable later but we cannot re-declare it with the same name.

// ES5 Code
var value = 10;
console.log(value); // 10

var value = "hello";
console.log(value); // hello

var value = 30;
console.log(value); // 30

As you can see above, we have re-declared the variable value using the var keyword multiple times.

Before ES6, we were able to re-declare a variable that had already been declared before if it wasn't used meaningfully and was instead causing confusion.

But what if we already had a variable declared with the same name somewhere else and we're re-declaring it without realizing it? Then we might override the variable value, causing some difficult to debug issues.

So when you use the let keyword, you will get an error when you try to re-declare the variable with the same name – which is a good thing.

// ES6 Code
let value = 10;
console.log(value); // 10

let value = "hello"; // Uncaught SyntaxError: Identifier 'value' has already been declared

But, the following code is valid:

// ES6 Code
let value = 10;
console.log(value); // 10

value = "hello";
console.log(value); // hello

We don't get an error in the above code because we're re-assigning a new value to the value variable. But we're not re-declaring value again.

Now, take a look at the below code:

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

As you can see in this code, when we declare a variable with the var keyword, it's available outside the if block also.

Now take a look at the below code:

// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // Uncaught ReferenceError: number is not defined

As you can see, the number variable when declared using the let keyword is only accessible inside the if block. Outside the block it's not available, so we got a reference error when we tried to access it outside the if block.

But if there is a number variable outside the if block, then it will work as shown below:

// ES6 Code
let isValid = true;
let number = 20;

if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // outside: 20

Here, we have two number variables in a separate scope. So outside the if block, the value of number will be 20.

Take a look at the below code:

// ES5 Code
for(var i = 0; i < 10; i++){
 console.log(i);
}
console.log('outside:', i); // 10

When using the var keyword, i is available even outside the for loop.

// ES6 Code
for(let i = 0; i < 10; i++){
 console.log(i);
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

But when using the let keyword, it's not available outside the loop.

So as you can see from the above code samples, using let makes the variable available only inside that block and it's not accessible outside the block.

We can also create a block by a pair of curly brackets like this:

let i = 10;
{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // outside: 10

If you remember, I said we cannot re-declare a let based variable in the same block but we can re-declare it in another block. As you can see in the above code, we have re-declared i and assigned a new value of 20 inside the block. Once declared, that variable value will be available only in that block.

Outside the block, when we printed that variable, we got 10 instead of the previously assigned value of 30 because outside the block, the inside i variable does not exist.

If we don't have the variable i declared outside, then we'll get an error as you can see in the below code:

{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

How to use const in JavaScript

The const keyword works exactly the same as the let keyword in its block scoping functionality. So let's look at how they differ from each other.

When we declare a variable as const, it's considered a constant variable whose value will never change.

In the case of let, we're able to assign a new value to that variable later like this:

let number = 10;
number = 20;

console.log(number); // 20

But we can't do that in case of const:

const number = 10;
number = 20; // Uncaught TypeError: Assignment to constant variable.

We can't even re-declare a const variable.

const number = 20;
console.log(number); // 20

const number = 10; // Uncaught SyntaxError: Identifier 'number' has already been declared

Now, take a look at the below code:

const arr = [1, 2, 3, 4];

arr.push(5);

console.log(arr); // [1, 2, 3, 4, 5]

We said that the const variable is constant whose value will never change – but we have changed the constant array above. So how does that make sense?

Note: Arrays are reference types and not primitive types in JavaScript

So what actually gets stored in arr is not the actual array but only the reference (address) of the memory location where the actual array is stored.

So by doing arr.push(5); we're not actually changing the reference where the arr points to, but we're changing the values stored at that reference.

The same is the case with objects:

const obj = {
 name: 'David',
 age: 30
};

obj.age = 40;

console.log(obj); // { name: 'David', age: 40 }

Here, also we're not changing the reference of where the obj points to but we're changing the values stored at that reference.

So the above code will work, but the below code will not work.

const obj = { name: 'David', age: 30 };
const obj1 = { name: 'Mike', age: 40 };
obj = obj1; // Uncaught TypeError: Assignment to constant variable.

The above code does not work because we're trying to change the reference that the const variable points to.

So the key point to remember when using const is that, when we declare a variable as a constant using const we cannot re-define it. We also cannot re-assign that variable, but we can change the values stored at that location if the variable is of reference type.

So the below code is invalid because we're re-assigning a new value to it.

const arr = [1, 2, 3, 4];
arr = [10, 20, 30]; // Uncaught TypeError: Assignment to constant variable.

But note that we can change the values inside the array, as we saw previously.

The following code of re-defining a const variable is also invalid.

const name = "David";
const name = "Raj"; // Uncaught SyntaxError: Identifier 'name' has already been declared

let and const wrap up

• The keywords let and const add block scoping in JavaScript.
• When we declare a variable as let, we cannot re-define or re-declare another let variable with the same name in the same scope (function or block scope) but we can re-assign a value to it.
• When we declare a variable as const, we cannot re-define or re-declare another const variable with the same name in the same scope (function or block scope). But we can change the values stored in that variable if the variable is of a reference type like an array or object.

Alright, let's move on to the next big topic: promises.

Promises in JavaScript

Promises are one of the most important yet confusing and difficult to understand part of JavaScript. And most new devs, as well as experienced ones, struggle to understand them.

Promises were added in ES6 as a native implementation.

So what is a promise? A promise represents an asynchronous operation to be completed in the future.

Previously, Before ES6, there was no way to wait for something to perform some operation.

For example, when we wanted to make an API call, there was no way to wait until the results came back before ES6.

For that, we used to use external libraries like Jquery or Ajax which had their own implementation of promises. But there was no browser implemented promise thing.

But now using Promises in ES6, we can make an API call ourselves and wait until it's done to perform some operation.

How to create a Promise

To create a promise we need to use the Promise constructor function like this:

const promise = new Promise(function(resolve, reject) {

});

The Promise constructor takes a function as an argument and that function internally receives resolve and reject as parameters.

The resolve and reject parameters are actually functions that we can call depending on the outcome of the asynchronous operation.

A Promise goes through three states:

• Pending
• Fulfilled
• Rejected

When we create a promise, it’s in a pending state. When we call the resolve function, it goes in a fulfilled state and if we call reject it will go in the rejected state.

To simulate the long-running or asynchronous operation, we will use the setTimeout function.

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

Here, we've created a promise which will resolve to the sum of 4 and 5 after a 2000ms (2 second) timeout is over.

To get the result of the successful promise execution, we need to register a callback using .then like this:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

promise.then(function(result) {
 console.log(result); // 9
});

So whenever we call resolve, the promise will return back the value passed to the resolve function which we can collect using the .then handler.

If the operation is not successful, then we call the reject function like this:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
});

Here, if the sum is not a number, then we call the reject function with the error message. Otherwise we call the resolve function.

If you execute the above code, you will see the following output:

As you can see, we're getting an uncaught error message along with the message we've specified because calling reject function throws an error. But we have not added an error handler for catching that error.

To catch the error, we need to register another callback using .catch like this:

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

You will see the following output:

As you can see, we have added the .catch handler, so we're not getting any uncaught error but we're just logging the error to the console.

This also avoids stopping your application abruptly.

So it's always recommended to add the .catch handler to every promise so your application will not stop from running because of the error.

Promise chaining

We can add multiple .then handlers to a single promise like this:

promise.then(function(result) {
 console.log('first .then handler');
 return result;
}).then(function(result) {
 console.log('second .then handler');
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

When we have multiple .then handlers added, the return value of the previous .then handler is automatically passed to the next .then handler.

As you can see, adding 4 + 5 resolves a promise and we get that sum in the first .then handler. There we're printing a log statement and returning that sum to the next .then handler.

And inside the next .then handler, we're adding a log statement and then we're printing the result we got from the previous .then handler.

This way of adding multiple .then handlers is known as promise chaining.

How to delay a promise's execution in JavaScript

Many times we don't want to create promise immediately but want to create one after some operation is completed.

To achieve this, we can wrap the promise in a function and return that promise from that function like this:

function createPromise() {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = 4 + 5;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

This way, we can use the function parameters inside the promise, making the function truly dynamic.

function createPromise(a, b) {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = a + b;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

createPromise(1,8)
 .then(function(output) {
  console.log(output); // 9
});

// OR

createPromise(10,24)
 .then(function(output) {
  console.log(output); // 34
});

Note: When we create a promise, it will be either resolved or rejected but not both at the same time. So we cannot add two resolve or reject function calls in the same promise.

Also, we can pass only a single value to the resolve or reject function.

If you want to pass multiple values to a resolve function, pass it as an object like this:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve({
   a: 4,
   b: 5,
   sum
  });
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

How to use arrow functions in JavaScript

In all the above code examples, we've used regular ES5 function syntax while creating promises. But it's a common practice to use arrow function syntax instead of ES5 function syntax like this:

const promise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then((result) => {
 console.log(result);
});

You can either use ES5 or ES6 function syntax depending on your preferences and needs.

ES6 Import And Export Syntax

Before ES6 came into play, we used multiple script tags in a single HTML file to import different JavaScript files like this:

<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="profile.js"></script>
<script type="text/javascript" src="user.js"></script>

So, if we had a variable with the same name in different JavaScript files, it would create a naming conflict and the value you were expecting would not be the actual value you got.

ES6 has fixed this issue with the concept of modules.

Every JavaScript file we write in ES6 is known as a module. The variables and functions we declare in each file are not available to other files until we specifically export them from that file and import them into another file.

So the functions and variables defined in the file are private to each file and can’t be accessed outside the file until we export them.

There are two types of exports:

• Named Exports: There can be multiple named exports in a single file
• Default Exports: There can be only one default export in a single file

Named Exports in JavaScript

To export a single value as a named export, we export it like this:

export const temp = "This is some dummy text";

If we have multiple things to export, we can write an export statement on a separate line instead of in front of variable declaration. We specify the things to export in curly brackets.

const temp1 = "This is some dummy text1";
const temp2 = "This is some dummy text2";

export { temp1, temp2 };

Note that the export syntax is not an object literal syntax. So in ES6, to export something we can't use key-value pairs like this:

 // This is invalid syntax of export in ES6

export { key1: value1, key2: value2 }

To import the things we exported as a named export, we use the following syntax:

import { temp1, temp2 } from './filename';

Note that while importing something from the file, we don't need to add the .js extension to the filename as it's considered by default.

// import from functions.js file from current directory 
import { temp1, temp2 } from './functions';

// import from functions.js file from parent of current directory
import { temp1 } from '../functions';

Here's a Code Sandbox demo: https://codesandbox.io/s/hardcore-pond-q4cjx

One thing to note is that the name used while exporting has to match the name we use while importing.

So if you are exporting as:

// constants.js
export const PI = 3.14159;

then while importing you have to use the same name used while exporting:

import { PI } from './constants';

You can't use any other name like this:

import { PiValue } from './constants'; // This will throw an error

But if you already have the variable with the same name as the exported variable, you can use the renaming syntax while importing like this:

import { PI as PIValue } from './constants';

Here we have renamed PI to PIValue and so we can’t use the PI variable name now. Instead, we have to use the PIValue variable to get the exported value of PI.

We can also use the renaming syntax at the time of exporting:

// constants.js
const PI = 3.14159; 

export { PI as PIValue };

then while importing we have to use PIValue like this:

import { PIValue } from './constants';

To export something as a named export, we have to declare it first.

export 'hello'; // this will result in error
export const greeting = 'hello'; // this will work
export { name: 'David' }; // This will result in error
export const object = { name: 'David' }; // This will work

The order in which we import the multiple named exports is not important.

Take a look at the below validations.js file:

// utils/validations.js

const isValidEmail = function(email) {
  if (/^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$/.test(email)) {
    return "email is valid";
  } else {
    return "email is invalid";
  }
};

const isValidPhone = function(phone) {
  if (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(phone)) {
    return "phone number is valid";
  } else {
    return "phone number is invalid";
  }
};

function isEmpty(value) { 
  if (/^\s*$/.test(value)) {
    return "string is empty or contains only spaces";
  } else {
    return "string is not empty and does not contain spaces";
  } 
}

export { isValidEmail, isValidPhone, isEmpty };

and in index.js we use these functions as shown below:

// index.js
import { isEmpty, isValidEmail } from "./utils/validations";

console.log("isEmpty:", isEmpty("abcd")); // isEmpty: string is not empty and does not contain spaces

console.log("isValidEmail:", isValidEmail("abc@11gmail.com")); // isValidEmail: email is valid

console.log("isValidEmail:", isValidEmail("ab@c@11gmail.com")); // isValidEmail: email is invalid

Here's a Code Sandbox demo: https://codesandbox.io/s/youthful-flower-xesus

As you can see, we can import only the required exported things and in any order, so we don’t need to check in what order we exported in another file. That’s the beauty of named exports.

Default Exports in JavaScript

As I said earlier, there can be at most one default export in a single file.

You can, however, combine multiple named exports and one default export in a single file.

To declare a default export we add the default keyword in front of the export keyword like this:

//constants.js
const name = 'David'; 
export default name;

To import the default export we don’t add the curly brackets as we did in named export like this:

import name from './constants';

If we have multiple named exports and one default export like this:

// constants.js
export const PI = 3.14159; 
export const AGE = 30;

const NAME = "David";
export default NAME;

then to import everything on a single line we need to use the default exported variable before the curly bracket only.

// NAME is default export and PI and AGE are named exports here

import NAME, { PI, AGE } from './constants';

One specialty of default export is that we can change the name of the exported variable while importing:

// constants.js
const AGE = 30;
export default AGE;

And in another file, we can use another name while importing

import myAge from ‘./constants’; 

console.log(myAge); // 30

Here, we have changed the name of the default exported variable from AGE to myAge.

This works because there can be only one default export so you can name it whatever you want.

Another thing to note about default export is that the export default keyword cannot come before variable declaration like this:

// constants.js
export default const AGE = 30; // This is an error and will not work

so we have to use the export default keyword on a separate line like this:

// constants.js 

const AGE = 30; 
export default AGE;

We can, however, export default without declaring the variable like this:

//constants.js
export default {
 name: "Billy",
 age: 40
};

and in another file use it like this:

import user from './constants';
console.log(user.name); // Billy 
console.log(user.age); // 40

There is another way of importing all the variables exported in a file using the following syntax:

import * as constants from './constants';

Here, we are importing all the named and default exports we have in constants.js and stored in the constants variable. So, constants will become an object now.

// constants.js
export const USERNAME = "David";
export default {
 name: "Billy",
 age: 40
};

And in another file, we use it as below:

// test.js

import * as constants from './constants';

console.log(constants.USERNAME); // David
console.log(constants.default); // { name: "Billy", age: 40 }
console.log(constants.default.age); // 40

Here's a Code Sandbox demo: https://codesandbox.io/s/green-hill-dj43b

If you don’t want to export on separate lines for default and named
exports, you can combine it as shown below:

// constants.js
const PI = 3.14159; const AGE = 30;
const USERNAME = "David";
const USER = {
 name: "Billy",
 age: 40 
};

export { PI, AGE, USERNAME, USER as default };

Here, we are exporting USER as the default export and others as named exports.

In another file, you can use it like this:

import USER, { PI, AGE, USERNAME } from "./constants";

Here's a Code Sandbox demo: https://codesandbox.io/s/eloquent-northcutt-7btp1

In summary:

1. In ES6, data declared in one file is not accessible to another file until it is exported from that file and imported into another file.
2. If we have a single thing in a file to export like class declaration, we use default export otherwise we use named export. We can also combine default and named exports in a single file.

Default Parameters in JavaScript

ES6 has added a pretty useful feature of providing default parameters while defining functions.

Suppose we have an application, where once the user login into the system, we show them a welcome message like this:

function showMessage(firstName) {
  return "Welcome back, " + firstName;
}
console.log(showMessage('John')); // Welcome back, John

But what if we don’t have the user name in our database as it was an optional field while registering? Then we can show the Welcome Guest message to the user after login.

So we first need to check if the firstName is provided and then display the corresponding message. Before ES6, we would have had to write code like this:

function showMessage(firstName) {
  if(firstName) {
    return "Welcome back, " + firstName;
  } else {
    return "Welcome back, Guest";
  }
}

console.log(showMessage('John')); // Welcome back, John 
console.log(showMessage()); // Welcome back, Guest

But now in ES6 using default function parameters we can write the above code as shown below:

function showMessage(firstName = 'Guest') {
   return "Welcome back, " + firstName;
}

console.log(showMessage('John')); // Welcome back, John 
console.log(showMessage()); // Welcome back, Guest

We can assign any value as a default value to the function parameter.

function display(a = 10, b = 20, c = b) { 
 console.log(a, b, c);
}

display(); // 10 20 20
display(40); // 40 20 20
display(1, 70); // 1 70 70
display(1, 30, 70); // 1 30 70

As you can see, we have assigned unique values to a and b function parameters but for c we're assigning the value of b. So whatever value we have provided for b will be assigned to c also if there is no specific value provided for c while calling the function.

In the above code, we have not provided all the arguments to the function. So the above function calls will be the same as below:

display(); // is same as display(undefined, undefined, undefined)
display(40); // is same as display(40, undefined, undefined)
display(1, 70); // is same as display(1, 70, undefined)

So if the argument passed is undefined, the default value will be used for the corresponding parameter.

We can also assign complex or calculated values as a default value.

const defaultUser = {
  name: 'Jane',
  location: 'NY',
  job: 'Software Developer'
};

const display = (user = defaultUser, age = 60 / 2 ) => { 
 console.log(user, age);
};
display();

/* output

{
  name: 'Jane',
  location: 'NY',
  job: 'Software Developer'
} 30 

*/

Now, take a look at the below ES5 code:

// ES5 Code
function getUsers(page, results, gender, nationality) {
  var params = "";
  if(page === 0 || page) {
   params += `page=${page}&`; 
  }
  if(results) {
   params += `results=${results}&`;
  }
  if(gender) {
   params += `gender=${gender}&`;
  }
  if(nationality) {
   params += `nationality=${nationality}`;
  }

  fetch('https://randomuser.me/api/?' + params) 
   .then(function(response) {
     return response.json(); 
   })
   .then(function(result) { 
    console.log(result);
   }) 
   .catch(function(error) {
     console.log('error', error); 
   }); 
}

getUsers(0, 10, 'male', 'us');

In this code, we’re making an API call to the Random user API by passing various optional parameters in the getUsers function.

So before making the API call, we have added various if conditions to check if the parameter is added or not, and based on that we’re constructing the query string like this: https://randomuser.me/api/? page=0&results=10&gender=male&nationality=us.

But instead of adding so many if conditions, we can use the default parameters while defining the function parameters as shown below:

function getUsers(page = 0, results = 10, gender = 'male',nationality = 'us') {
 fetch(`https://randomuser.me/api/?page=${page}&results=${results}&gender=${gender}&nationality=${nationality}`)
 .then(function(response) { 
  return response.json();
 }) 
 .then(function(result) {
   console.log(result); 
 })
 .catch(function(error) { 
  console.log('error', error);
  }); 
}

getUsers();

As you can see, we have simplified the code a lot. So when we don’t provide any argument to the getUsers function, it will take default values and we can also provide our own values like this:

getUsers(1, 20, 'female', 'gb');

So it will override the default parameters of the function.

null is not equal to undefined

But you need to be aware of one thing: null and undefined are two different things while defining default parameters.

Take a look at the below code:

function display(name = 'David', age = 35, location = 'NY'){
 console.log(name, age, location); 
}

display('David', 35); // David 35 NY
display('David', 35, undefined); // David 35 NY

As we have not provided the third value for the location parameter in the first call to display, it will be undefined by default so the default value of location will be used in both of the function calls. But the below function calls are not equal.

display('David', 35, undefined); // David 35 NY
display('David', 35, null); // David 35 null

When we pass null as an argument, we’re specifically saying to assign a null value to the location parameter which is not the same as undefined. So it will not take the default value of NY.

Array.prototype.includes

ES7 has added a new function that checks if an element is present in the array or not and returns a boolean value of either true or false.

// ES5 Code

const numbers = ["one", "two", "three", "four"];

console.log(numbers.indexOf("one") > -1); // true 
console.log(numbers.indexOf("five") > -1); // false

The same code using the Array includes method can be written as shown below:

// ES7 Code

const numbers = ["one", "two", "three", "four"];

console.log(numbers.includes("one")); // true 
console.log(numbers.includes("five")); // false

So using the Array includes methods makes code short and easy to understand.

The includes method also comes in handy when comparing with different values.

Take a look at the below code:

const day = "monday";

if(day === "monday" || day === "tuesday" || day === "wednesday") {
  // do something
}

The above code using the includes method can be simplified as shown below:

const day = "monday";

if(["monday", "tuesday", "wednesday"].includes(day)) {
  // do something
}

So the includes method is pretty handy when checking for values in an array.

Closing points

There are many changes that have been incorporated into JavaScript starting from ES6. And every JavaScript, Angular, React, or Vue developer should be aware of them.

Knowing them makes you a better developer and can even help you get a higher paying job. And if you're just learning libraries like React and frameworks like Angular and Vue, you'll certainly want to be familiar with these new features.

Learn more about Modern JavaScript features

You can learn everything about the latest features added in JavaScript in my Mastering Modern JavaScript book. It is the only guide you need to learn modern JavaScript concepts.

Subscribe to my weekly newsletter to join 1000+ other subscribers to get amazing tips, tricks, and articles directly in your inbox.

But a few weeks ago, while I was preparing some JavaScript tips to start my YouTube journey, I wrote this list of time-saving tips. I hope they help you as they've helped me.

In this article, I'm going to share with you 5 useful JavaScript tips (are you ready to dive in? 😀).

And now, guess what? Some of these tips are on my YouTube channel📹! (here is the playlist.

Object Destructuring

Destructuring is a feature that was introduced in ES6. It's one of the features you will use daily once you know how.

It helps you deal with three main issues:

• Repetition. Every time you want to extract one object property and create a new variable, you create a new line.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

// Wow... should we display
// John's password like that?

const firstName = user.firstName;
const lastName = user.lastName;
const password = user.password;

• Accessibility. Each time you want to access an object property, you should write the path to it. (example: user.firstName, user.family.sister, and so on).
• Usage. As an example, when you create a new function, and you are only working with one property of an object.

Now that you've seen what these three issues with objects are, how do you think you can solve them?

How to Solve the Repetition Issue

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const { firstName, lastName, password } = user;

console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123'

Destructuring is the process of extracting a property from an object by its key. By taking an existing key in your object, then placing it between two brackets ({ firstName }) you tell JavaScript:

"Hey JavaScript, I want to create a variable with the same name as my property. I want to create a variable firstName for the firstName property of my object."

Note: If you want to destructure an object, you should always use an existing key. Otherwise, it will not work.

How to Solve the Accessibility Issue

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
  family: {
    sister: {
      firstName: "Maria",
    },
  },
};

// We access to the nested object `sister`
// and we extract the `firstName` property
const { firstName } = user.family.sister;

console.log(firstName);
// Output: 'Maria'

When you work with nested objects, it can become quite repetitive and wastes a lot of time accessing the same property many times.

Using destructuring, in one line only, you can reduce the property path to one variable.

How to Solve the Usage Issue

Now that you know how to destructure an object, let me show you how to extract properties directly in your function parameter definition.

If you know React, you're probably already familiar with it.

function getUserFirstName({ firstName }) {
  return firstName;
}

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

console.log(getUserFirstName(user));
// Output: 'John'

In the above example, we have a getUserFirstName function, and we know that it will only use one property of our object, firstName.

Rather than passing the whole object or creating a new variable, we can destructure the object's function parameters.

How to Merge Objects in ES6

In programming, you often have to tackle issues with data structures. Thanks to the spread operator introduced in ES6, object and array manipulations are more straightforward.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

Let's imagine that we have two objects:

• User. An object defining general information about the user.
• UserJob. An object defining job information of the user.

We want to create one object that only contains the properties of these two objects.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

const myNewUserObject = {
  ...user,
  ...userJob,
};

console.log(myNewUserObject);
// Output:
//{
//  firstName: 'John',
//  lastName: 'Doe',
//  password: '123',
//  jobName: 'Developer',
//  jobCountry: 'France',
//  jobTimePerWeekInHour: '35'
//}

Using the spread operator (...), we can extract all the properties of one object to another.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const myNewUserObject = {
  ...user,
  // We extract:
  // - firstName
  // - lastName
  // - password
  // and send them to
  // a new object `{}`
};

How to Merge Arrays

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Like objects, the spread operator (...) extracts all the elements from one array to another.

const girlNames = ["Jessica", "Emma", "Amandine"];

const newNewArray = [
  ...girlNames,
  // We extract:
  // - 'Jessica'
  // - 'Emma'
  // - 'Amandine'
  // and send them to
  // a new array `[]`
];

How to Remove Array Duplicates

Because arrays are lists, you can have many items of the same value. If you want to remove duplicates in your array, you can follow one of the examples below.

One of them will be only one line thanks to ES6, but I let the "old" example in there so you can compare.

How to remove array duplicates "the old way"

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithFilter = animals.filter(
  // Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl']
  (animal, index, array) => array.indexOf(animal) == index
);

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

In the above example, we want to clean the animals array by removing all duplicates.

We can do that by using the function filter with indexOf inside it.

The filter function takes all elements of the animals array (animals.filter). Then for each occurrence it provides:

• the current value (example: duck)
• the index (example: 0)
• the initial array (example: the animals array => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

We will apply indexOf on the original array for each occurrence and give as a parameter the animal variable (the current value).

indexOf will return the first index of the current value (example: for 'owl' the index is 0).

Then inside of the filter, we compare the value of indexOf to the current index. If it's the same, we return true otherwise false.

filter will create a new array with only the elements where the returned value was true.

So, in our case: ['owl', 'frog', 'canary', 'duck', 'goose'].

How to remove array duplicates "the new way"

Well, the "old way" is interesting to understand, but it's long and a bit hard. So let's check out the new way now:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithSet = [...new Set(animals)];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Let's separate out the different steps:

// 1
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

// 2
const animalsSet = new Set(animals);

console.log(animalsSet);
// Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' }

// 3
const uniqueAnimalsWithSet = [...animalsSet];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

We have an animals array, and we convert it into a Set, which is a special type of object in ES6.

The thing that's different about it is that it lets you create a collection of unique values.

Note: Set is a collection of unique values, but it's not an Array.

Once we have our Set object with unique values, we need to convert it back to an array.

To do that, we use the spread operators to destructure it and send all the properties to a new Array.

Because the Set object has unique properties, our new array will also have unique values only.

How to Use Ternary Operators

Have you already heard about a way to write small conditions in only one line?

If not, it's time to remove a lot of your if and else blocks and convert them to small ternary operations.

Let's look at an example with console.log to start. The idea is to check the value of a variable and conditionally display an output.

const colour = "blue";

if (colour === "blue") {
  console.log(`It's blue!`);
} else {
  console.log(`It's not blue!`);
}

This example is a typical case where you can use the ternary operator to reduce these 5 if and else lines to only one!

One line to rule them all!

const colour = "blue";

colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else]

Ternary operators replace if and else for small conditions.

Note: It's not recommended to create complex conditions with ternary operators because it can reduce readability.

Below is another example that uses ternary operators, but this time in the return of a function.

function sayHelloToAnne(name) {
  return name === "Anne" ? "Hello, Anne!" : "It's not Anne!";
}

console.log(sayHelloToAnne("Anne"));
// Output: 'Hello, Anne!'

console.log(sayHelloToAnne("Gael"));
// Output: "It's not Anne!"

Want to Contribute? Here's How.

You are welcome to contribute to this GitHub repository. Any contribution is appreciated, and it will help each of us improve our JavaScript skills. GitHub: JavaScript Awesome Tips

Conclusion

I hope you learned some new things about JavaScript while reading this post.

If you want more content like this, you can follow me on Twitter where I tweet about web development, self-improvement, and my journey as a full stack developer!

If you want to build serious web applications, the language to use is JavaScript.

But what JavaScript skills do you need to build apps effectively?

What Are the Essential JavaScript Skills?

There are tons of courses on JavaScript available find online, but few specialize in what so many developers want to know:

What JavaScript skills are essential to building your own applications?

There is a gap between learning vanilla JavaScript and learning a library like React, Angular, and Vue for creating single-page JavaScript applications.

I've put together a complete course with the goal of showing you how to bridge this gap.

My goal is not only to teach you the skills you need while presenting real-world examples to solidify your understanding, but also to give you a new perspective. You'll find a better way of looking at your JavaScript code that will help you start thinking like a professional app developer.

Want to get started now? Take the entire course here.

Course Overview

Let's take a brief tour through the course and each major section. We'll see how each section will ensure that you're taught JavaScript in the most effective, no-nonsense way possible.

In this course, we'll develop our skills from basic concepts to more complex ones. Even if you're an intermediate JavaScript developer, we'll cover every concept with additional depth and observations on the language that you likely haven't heard before.

Variables and Strings

We'll begin with the building blocks of any JS program: variables.

First we'll cover declaring variables with let and const and how they are an improvement over the old var syntax. We'll learn concepts like block scoping, variable shadowing and the temporal dead zone, but also discover how these new keywords can make our code easier to process.

For example, why the salePrice variable below becomes more readable when we declare it with const instead of let or var.

Click to watch this lecture

Because we declare the variable with as a constant, we know that it won't be assigned a different value later on. This makes our code easier to understand both for other developers and for ourselves.

Finally, in this section we'll touch on template literals, and how they improve strings within JavaScript in basically every way, from formatting text, to inserting dynamic values, and more.

Types and Conditionals

Next we'll touch on types and conditionals, which go hand in hand.

We'll first take a look at a strange (and often poorly understood) part of JavaScript called type coercion, which means how types are changed from one value to another.

Types can change implicitly when we write conditionals and this means we must know about truthy and falsy values, values that are subtly coerced to the boolean true and falsy, respectively.

We'll see how we can use truthy and falsy values to our advantage by creating shorter conditionals using the && (and) and || (or) operators. This trick, known as short circuiting, is the basis of how JS libraries like React display or hide elements.

Click to watch this lecture

Then we'll see how to shorten our if-else conditionals with the ternary operator, and how they come in handy in situations when we want to conditionally set a variable's value.

Functions

After that, we'll dive into functions, the powerhouse of any Javascript app.

We'll demystify a crucial feature of functions called closures. We'll wrap our head around what a closure is by through creating our in a practical example.

This will enable us to see why closures are worth knowing and how they can improve our JavaScript code by keeping track of values between function calls:

Click to watch this lecture

We'll cover a type of function, which you'll find in every modern Javascript app, namely, arrow functions. With arrow functions, we can greatly cut down our code as we go through all of the available tricks to making them as concise as possible.

Lastly, we'll touch on default values in functions and how they can make our code more reliable, especially if an expected argument isn't provided.

Objects

From primitive data types, we'll move onto objects.

Understanding essential app-building concepts like mutations and immutability isn't possible without knowing the difference between primitive types and object types in JavaScript. We'll cover this difference in detail and see firsthand why it matters for the reliability of our code.

We'll touch on a variety of practical patterns to more easily get our object data through object destructuring, as you see below:

Click to watch this lecture

Then after destructuring our objects, we'll see how to better assemble them. By using the object spread operator we can seamlessly merge multiple objects in an immutable fashion.

Arrays

Arrays are essential for any list of data that we display in our apps and we need to know how to manipulate them with ease.

We'll cover how to perform actions on all elements in arrays through higher order array functions like map and filter to transform our elements or remove them from our array.

Additionally, we'll use methods like find to get individual elements based on certain conditions:

Click to watch this lecture

Then we'll cover the most important array method, reduce, and see its power to transform our array data into virtually any data type we want.

Object-Oriented JavaScript

Next we'll get started with object-oriented programming and cover the core idea behind it that makes object oriented programming in JavaScript possible–the constructor function.

Constructor functions make it possible to give our objects shared behavior (functions) through something called the prototype chain.

Through another newer JavaScript feature called classes, we'll cover how we can easily inherit functionality through what's known as prototypical inheritance and extend our classes to share features between them.

Click to watch this lecture

Async JavaScript

After that we'll move on to async JavaScript, which is a necessary skill to have and understand if want to create sophisticated JavaScript programs of any kind.

We'll begin with a discussion of what asynchronous code is and how it was handled in the past using callback functions and how this creates problems in our code (such as 'callback hell').

Fortunately, we'll fix some of the inherent problems with using callbacks through an ES6 feature called a Promise. We'll gain experience using promises in a practical way by getting familiar with the browser's Fetch API, which allows us to make HTTP requests and bring outside data into our apps.

Then, best of all, we'll touch on how to make our promises work and look just like synchronous code so we can easily reason about it with the help of the new async-await syntax for functions.

Click to watch this lecture

Essential Topics

We'll wrap up the course with some key skills necessary for starting to build complete JavaScript projects. First of all, we'll do a deep dive into ES Modules, an ES6 feature which allows us to share our JavaScript code across files.

We'll tackle thorny issues such as the this keyword by covering a list of concrete rules to follow in order to figure out it's value in any context, such as in a DOM event handler:

Click to watch this lecture

And finally, we'll wrap up the course with a general discussion of imperative versus declarative code, which you should strive for in your coding career, and why.

Watch the course now

Take this course and, within an afternoon or two, you'll learn concepts that will meaningfully grow your JavaScript skillset and enable you to tackle high-powered front-end libraries like React, Angular, Svelte, Vue, and more with confidence.

Enjoy!

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor.

In this tutorial, we're going to build a multiplayer tabletop game simulator using Vue, Phaser, Node/Express, and Socket.IO to learn several concepts that will be useful in any full stack app.

You can follow along with this video tutorial as well (1 hour 16 minute watch):

All of the project files for this tutorial are available on GitHub.

Project Overview

Our project will feature a Phaser game instance that will allow us to create tokens and cards on screen, and move them around on a digital game board.

The Phaser instance will be wrapped in a Vue component that will handle things like multiplayer chat and commands. Together, Phaser and Vue will comprise our front end (referred to from here on as the "client"), and we'll use Socket.IO to communicate with other players and tie together the front and back ends of our app.

The back end (referred to from here on as the "server") will be a simple Express server that receives Socket.IO events from the client and acts accordingly. The whole application will run on Node as its runtime.

You don't need to be an expert in any of the above frameworks to complete this project, but it would be a good idea to have a solid foundation in basic JavaScript and HTML/CSS before trying to tackle the specifics. You can also follow along with my series on Learning JavaScript by Making Digital Tabletop Games and Web Apps.

You'll also want to make sure that you have Node and Git installed, along with your favorite code editor and a command line interface (you can follow my tutorial on setting up an IDE here if you need help).

Let's get started!

Part 1: Client Basics

We'll begin building our client by installing the Vue CLI, which will help us with some tooling and allow us to make changes to our files without having to reload our web browser.

In a command line, type in the following to install the Vue CLI globally:

npm install -g @vue/cli

Navigate to a desired directory and create a new folder for our project:

mkdir tabletop-project
cd tabletop-project

Now we can use the Vue CLI to template a front end project for us:

vue create client

You can just hit "enter" at the ensuing prompts unless you have specific preferences.

The Vue CLI has helpfully templated a front end project for us, which we can view in our code editor:

Let's navigate to our new client folder in our CLI and run the template app:

cd client
npm run serve

After a little work, the Vue CLI should begin displaying our app in a web browser at the default http://localhost:8080:

Cool! We have the basic structure of our client. Let's break it by creating two new components in the /components folder, called Game.vue and Chat.vue (you can go ahead and delete HelloWorld.vue and anything in the assets folder if you're obsessed with tidiness like I am).

Replace the code in App.vue with the following:

<template>
    <div id="app">
        <div id="game">
            <Game />
        </div>
        <div id="border" />
        <div id="input">
            <Chat />
        </div>
    </div>
</template>

<script>
    import Chat from './components/Chat.vue';
    import Game from './components/Game.vue';

    export default {
        name: 'App',
        components: {
            Chat,
            Game
        }
    }
</script>

<style>
    #app {
        font-family: 'Trebuchet MS';
        text-align: left;
        background-color: black;
        color: cyan;
        display: flex;
    }
    #game {
        width: 50vw;
        height: 100vh;
    }
    #input {
        width: 50vw;
        height: 100vh;
    }
    #border {
        border-right: 2px solid cyan;
    }
    @media (max-width: 1000px) {
        #app {
            flex-direction: column;
        }
        #game {
            width: 100vw;
            height: 50vh;
        }
        #input {
            width: 100vw;
            height: 50vh;
        }
    }
</style>

As you can see, a Vue component ordinarily has three sections: Template, Script, and Style, which contain any HTML, JavaScript, and CSS for that component, respectively. We've just imported our Game and Chat components here and added a little styling to give it a cyberpunk feel when it's all up and running.

That's actually all that we need to do to set up our App.vue component, which will house everything else in our client. Before we can actually do anything with it, we'll need to get our server working!

Part 2: Server Basics

At our root directory (tabletop-project, above /client), initialize a new project in a new command line interface by typing:

npm init

Like with our client, you can go ahead and press "enter" at the prompts unless there are specifics that you'd like to designate at this time.

We'll need to install Express and Socket.IO, along with Nodemon to watch our server files for us and reboot as necessary:

npm install --save express socket.io nodemon

Let's open up the new package.json file in that root directory and add a "start" command in the "scripts" section:

  "scripts": {
    "start": "nodemon server.js"
  },

Create a new file called server.js in this directory, and enter the following code:

const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);

    socket.on('send', function (text) {
        let newText = "<" + socket.id + "> " + text;
        io.emit('receive', newText);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

Excellent! Our simple server will now listen at http://localhost:3000, and use Socket.IO to log to the console when a user connects and disconnects, with their socket ID.

When the server receives a "send" event from a client, it will create a new text string that includes the socket ID of the client that emitted the event, and emit its own "receive" event to all clients with the text that it received, interpolated with the socket ID.

We can test the server by returning to our command line and starting it up :

npm run start

The command console should now display:

Cool! Let's return to the Chat component of our client to start building out our front end functionality.

Part 3: Chat

Let's open a separate command line interface and navigate to the /client directory. Within that directory, install the client version of Socket.IO:

npm install --save socket.io-client

In /client/src/components/Chat.vue, add the following code:

<template>
    <div id="container">
        <div id="output">
            <h1>STRUCT</h1>
            <p v-for="(text, index) in textOutput" :key="index">{{text}}</p>
        </div>
        <div id="input">
            <form>
                <input type="text" v-model="textInput" :placeholder="textInput" />
                <input type="submit" value="Send" v-on:click="submitText" />
            </form>
        </div>
    </div>
</template>

<script>
    import io from 'socket.io-client';
    let socket = io('http://localhost:3000');

    export default {
        name: 'Chat',
        data: function () {
            return {
                textInput: null,
                textOutput: []
            }
        },
        methods: {
            submitText: function (event) {
                event.preventDefault();
                socket.emit('send', this.textInput);
            }
        },
        created: function () {
            socket.on('connect', () => {
                console.log('Connected!');
            });
            socket.on('receive', (text) => {
                this.textOutput.push(text);
                this.textInput = null;
            });
        }
    }
</script>

<style scoped>
    #container {
        text-align: left;
        display: flex;
        flex-direction: column;
        margin-left: 1vw;
        min-height: 100vh;
    }
    h1 {
        text-align: center;
    }
    .hotpink {
        color: hotpink;
    }
    #input {
        position: fixed;
        margin-top: 95vh;
    }
    input[type=text] {
        height: 20px;
        width:  40vw;
        border: 2px solid cyan;
        background-color: black;
        color: hotpink;
        padding-left: 1em;
    }
    input[type=submit]{
        height: 25px;
        width: 5vw;
        background-color: black;
        color: cyan;
        border: 2px solid cyan;
        margin-right: 2vw;
    }
    input[type=submit]:focus{
        outline: none;
    }
    input[type=submit]:hover{
        color: hotpink;
    }
    @media (max-width: 1000px) {
        #container {
            border-left: none;
            border-top: 2px solid cyan;
            min-height: 50vh;
        }
        #input {
            margin-top: 43vh;
        }
        #output {
            margin-right: 10vw;
        }
        input[type=text] {
            width: 60vw;
        }
        input[type=submit] {
            min-width: 10vw;
        }
    }
</style>

Let's examine the above from bottom to top before moving forward. Between the

Building 2D games can be a great way to learn JavaScript, especially when working through the basics of complex tabletop game logic.

In this series, I’m going to introduce you to the basics of programming, with a focus on exposing you to JavaScript development best practices and frameworks. Keep in mind that the things we’re going to learn will be applicable in other programming languages as well.

Throughout this series, I’ll be providing an emphasis on learning to code for digital tabletop game and web development. This should be useful for roleplaying, card game, and board game developers who want to create companion apps or digital versions of their games, as well as all JavaScript newcomers.

After learning JavaScript and some of the frameworks and engines that we’re going to work with, along with some practice projects and outside learning of your own, you’ll be able to:

• run simulations
• make your own apps, games, and websites
• and even develop and deploy multi-user “full stack” projects that you can share with the world.

If you’re not specifically interested in digital tabletop game development, you’ll probably still find this series to be helpful. We’ll be learning core concepts that are central to game and web development that you’ll be able to apply to other programming languages and frameworks.

I’m a big proponent of using digital tabletop games in learning to code. Tabletop games are great because they involve a lot of logic and complex rulesets, but not physics, vector math, animation, and that sort of thing.

We’ll be exploring real programming practices such as setting up an integrated development environment and using GitHub for source control. We'll also be taking on projects that will help you polish the skills that will be fundamental in your long-term development as a coder.

Start by learning the basics (Beginner Series):

Learn more about setting up an integrated development environment (Beginner Tutorial):

Learn how to use GitHub and ES6 to create and structure your code (Intermediate Tutorial):

Learn more about Phaser for digital tabletop game development (Intermediate Tutorial):

Learn more about Vue for digital tabletop web development (Intermediate Tutorial):

Build a multiplayer card game with Phaser 3, Express, and Socket.IO (Advanced Project):

Build a Multiplayer Tabletop Game Simulator with Vue, Phaser, Express, Node, and Socket.IO (Advanced Project):

Build a full stack roleplaying game character generator with MongoDB, Express, Vue, and Node (MEVN) (Advanced Project):

Learn how to deploy a full stack web app to Heroku (Advanced Project):

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

You’ve probably seen arrow functions written a few different ways.

//example 1
const addTwo = (num) => {return num + 2;};

//example 2
const addTwo = (num) => num + 2;

//example 3
const addTwo = num => num + 2;

//example 4
const addTwo = a => {
 const newValue = a + 2;
 return newValue;
};

Some have parentheses around the parameters, while others don’t. Some use curly brackets and the return keyword, others don’t. One even spans multiple lines, while the others consist of a single line.

Interestingly, when we invoke the above arrow functions with the same argument we get the same result.

console.log(addTwo(2));
//Result: 4

How do you know which arrow function syntax to use? That’s what this article will uncover: how to declare an arrow function.

A Major Difference

Arrow functions are another—more concise—way to write function expressions. However, they don’t have their own binding to the this keyword.

//Function expression
const addNumbers = function(number1, number2) {
   return number1 + number2;
};

//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;

When we invoke these functions with the same arguments we get the same result.

console.log(addNumbers(1, 2));
//Result: 3

There's an important syntactical difference to note: arrow functions use the arrow => instead of the function keyword. There are other differences to be aware of when you write arrow functions, and that’s what we’ll explore next.

Parentheses

Some arrow functions have parentheses around the parameters and others don't.

//Example with parentheses
const addNums = (num1, num2) => num1 + num2;

//Example without parentheses
const addTwo = num => num + 2;

As it turns out, the number of parameters an arrow function has determines whether or not we need to include parentheses.

An arrow function with zero parameters requires parentheses.

const hello = () => "hello";
console.log(hello());
//Result: "hello"

An arrow function with one parameter does not require parentheses. In other words, parentheses are optional.

const addTwo = num => num + 2;

So we can add parentheses to the above example and the arrow function still works.

const addTwo = (num) => num + 2;
console.log(addTwo(2));
//Result: 4

An arrow function with multiple parameters requires parentheses.

const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3

Arrow functions also support rest parameters and destructuring. Both features require parentheses.

This is an example of an arrow function with a rest parameter.

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
//Result: [ 2, 3, 4 ]

And here’s one that uses destructuring.

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"

To summarize: if there’s only one parameter—and you’re not using rest parameters or destructuring—then parentheses are optional. Otherwise, be sure to include them.

The Function Body

Now that we’ve got the parentheses rules covered, let’s turn to the function body of an arrow function.

An arrow function body can either have a “concise body” or “block body”. The body type influences the syntax.

First, the “concise body” syntax.

const addTwo = a => a + 2;

The “concise body” syntax is just that: it’s concise! We don’t use the return keyword or curly brackets.

If you have a one-line arrow function (like the example above), then the value is implicitly returned. So you can omit the return keyword and the curly brackets.

Now let’s look at “block body” syntax.

const addTwo = a => {
    const total = a + 2;
    return total;
}

Notice that we use both curly brackets and the return keyword in the above example.

You normally see this syntax when the body of the function is more than one line. And that’s a key point: wrap the body of a multi-line arrow function in curly brackets and use the return keyword.

Objects and Arrow Functions

There’s one more syntax nuance to know about: wrap the function body in parentheses when you want to return an object literal expression.

const f = () => ({
 city:"Boston"
})
console.log(f().city)

Without the parentheses, we get an error.

const f = () => {
   city:"Boston"
}
//Result: error

If you find the arrow function syntax a bit confusing, you’re not alone. It takes some time to get familiar with it. But being aware of your options and requirements are steps in that direction.

I write about learning to program and the best ways to go about it (amymhaddad.com).

A lot of shiny new features came out with ES2015 (ES6). And now, since it's 2020, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features.

While this assumption might be partially true, it's still possible that some of these features remain a mystery to some devs.

One of the features that came with ES6 is the addition of let and const, which can be used for variable declaration. The question is, what makes them different from good ol' var which we've been using? If you are still not clear about this, then this article is for you.

In this article, we'll discuss var, let and const with respect to their scope, use, and hoisting. As you read, take note of the differences between them that I'll point out.

Here's an Interactive Scrim of Var, Let, and Const

Var

Before the advent of ES6, var declarations ruled. There are issues associated with variables declared with var, though. That is why it was necessary for new ways to declare variables to emerge. First, let's get to understand var more before we discuss those issues.

Scope of var

Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.

The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.

var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.

To understand further, look at the example below.

    var greeter = "hey hi";

    function newFunction() {
        var hello = "hello";
    }

Here, greeter is globally scoped because it exists outside a function while hello is function scoped. So we cannot access the variable hello outside of a function. So if we do this:

    var tester = "hey hi";

    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

We'll get an error which is as a result of hello not being available outside the function.

var variables can be re-declared and updated

This means that we can do this within the same scope and won't get an error.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

and this also

    var greeter = "hey hi";
    greeter = "say Hello instead";

Hoisting of var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:

    console.log (greeter);
    var greeter = "say hello"

it is interpreted as this:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

So var variables are hoisted to the top of their scope and initialized with a value of undefined.

Problem with var

There's a weakness that comes with var. I'll use the example below to explain:

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }

    console.log(greeter) // "say Hello instead"

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.

If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

Let

let is now preferred for variable declaration. It's no surprise as it comes as an improvement to var declarations. It also solves the problem with var that we just covered. Let's consider why this is so.

let is block scoped

A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block.

So a variable declared in a block with let is only available for use within that block. Let me explain this with an example:

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped .

let can be updated but not re-declared.

Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:

    let greeting = "say Hi";
    greeting = "say Hello instead";

this will return an error:

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, if the same variable is defined in different scopes, there will be no error:

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

    const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable.

nor this:

    const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

    const greeting = {
        message: "say Hi",
        times: 4
    }

while we cannot do this:

    greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

we can do this:

    greeting.message = "say Hello instead";

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.

That's all. Got any question or additions? Please let me know.

Thank you for reading :)

I'm a tabletop game developer, and am continually looking for ways to digitize game experiences. In this tutorial, we're going to build a multiplayer card game using Phaser 3, Express, and Socket.IO.

In terms of prerequisites, you'll want to make sure that you have Node/NPM and Git installed and configured on your machine. Some experience with JavaScript would be helpful, and you may want to run through the basic Phaser tutorial before tackling this one.

Major kudos to Scott Westover for his tutorial on the topic, Kal_Torak and the Phaser community for answering all my questions, and my good friend Mike for helping me conceptualize the architecture of this project.

Note: we'll be using assets and colors from my tabletop card game, Entromancy: Hacker Battles. If you prefer, you can use your own images (or even Phaser rectangles) and colors, and you can access the entire project code on GitHub.

If you'd prefer a more visual tutorial, you can also follow along with the companion video to this article:

Let's get started!

The Game

Our simple card game will feature a Phaser client that will handle most of the game logic and doing things like dealing cards, providing drag-and-drop functionality, and so on.

On the back end, we'll spin up an Express server that will utilize Socket.IO to communicate between clients and make it so that when one player plays a card, it shows up in another player's client, and vice-versa.

Our goal for this project is to create a basic framework for a multiplayer card game that you can build upon and adjust to suit your own game's logic.

First, let's tackle the client!

The Client

To scaffold our client, we're going to clone the semi-official Phaser 3 Webpack Project Template on GitHub.

Open your favorite command line interface and create a new folder:

mkdir multiplayer-card-project
cd multiplayer-card-project

Clone the git project:

git clone https://github.com/photonstorm/phaser3-project-template.git

This command will download the template in a folder called "phaser3-project-template" within /multiplayer-card-project. If you want to follow along with our tutorial's file structure, go ahead and change that template folder's name to "client."

Navigate into that new directory and install all dependencies:

cd client
npm install

Your project folder structure should look something like this:

Before we muck with the files, let's go back to our CLI and enter the following command in the /client folder:

npm start

Our Phaser template utilizes Webpack to spin up a local server that in turn serves up a simple game app in our browser (usually at http://localhost:8080). Neat!

Let's open our project in your favorite code editor and make some changes to fit our card game. Delete everything in /client/src/assets and replace them with the card images from GitHub.

In the /client/src directory, add a folder called "scenes" and another called "helpers."

In /client/src/scenes, add an empty file called "game.js".

In /client/src/helpers, add three empty files: "card.js", "dealer.js", and "zone.js".

Your project structure should now look like this:

Cool! Your client might be throwing you errors because we deleted some things, but not to worry. Open /src/index.js, which is the main entry point to our front end app. Enter the following code:

import Phaser from "phaser";
import Game from "./scenes/game";

const config = {
    type: Phaser.AUTO,
    parent: "phaser-example",
    width: 1280,
    height: 780,
    scene: [
        Game
    ]
};

const game = new Phaser.Game(config);

All we've done here is restructure the boilerplate to utilize Phaser's "scene" system so that we can separate our game scenes rather than try to cram everything in one file. Scenes can be useful if you're creating multiple game worlds, building things like instruction screens, or generally trying to keep things tidy.

Let's move to /src/scenes/game.js and write some code:

export default class Game extends Phaser.Scene {
    constructor() {
        super({
            key: 'Game'
        });
    }

    preload() {
        this.load.image('cyanCardFront', 'src/assets/CyanCardFront.png');
        this.load.image('cyanCardBack', 'src/assets/CyanCardBack.png');
        this.load.image('magentaCardFront', 'src/assets/MagentaCardFront.png');
        this.load.image('magentaCardBack', 'src/assets/MagentaCardBack.png');
    }

    create() {
        this.dealText = this.add.text(75, 350, ['DEAL CARDS']).setFontSize(18).setFontFamily('Trebuchet MS').setColor('#00ffff').setInteractive();
    }

    update() {

    }
}

We're taking advantage of ES6 classes to create a new Game scene, which incorporates preload(), create() and update() functions.

preload() is used to...well...preload any assets that we'll be using for our game.

create() is run when the game starts up, and where we'll be establishing much of our user interface and game logic.

update() is called once per frame, and we won't be making use of it in our tutorial (but it may be useful in your own game depending on its requirements).

Within the create() function, we've created a bit of text that says "DEAL CARDS" and set it to be interactive:

Very cool. Let's create a bit of placeholder code to understand how we want this whole thing to work once it's up and running. Add the following to your create() function:

        let self = this;

        this.card = this.add.image(300, 300, 'cyanCardFront').setScale(0.3, 0.3).setInteractive();
        this.input.setDraggable(this.card);

        this.dealCards = () => {

        }

        this.dealText.on('pointerdown', function () {
            self.dealCards();
        })

        this.dealText.on('pointerover', function () {
            self.dealText.setColor('#ff69b4');
        })

        this.dealText.on('pointerout', function () {
            self.dealText.setColor('#00ffff');
        })

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = dragX;
            gameObject.y = dragY;
        })

We've added a lot of structure, but not much has happened. Now, when our mouse hovers over the "DEAL CARDS" text, it's highlighted in cyberpunk hot pink, and there's a random card on our screen:

We've placed the image at the (x, y) coordinates of (300, 300), set its scale to be a bit smaller, and made it interactive and draggable. We've also added a little bit of logic to determine what should happen when dragged: it should follow the (x, y) coordinates of our mouse.

We've also created an empty dealCards() function that will be called when we click on our "DEAL CARDS" text. Additionally, we've saved "this" - meaning the scene in which we're currently working - into a variable called "self" so that we can use it throughout our functions without worrying about scope.

Our Game scene is going to get messy fast if we don't start moving things around, so let's delete the code block that begins with "this.card" and move to /src/helpers/card.js to write:

export default class Card {
    constructor(scene) {
        this.render = (x, y, sprite) => {
            let card = scene.add.image(x, y, sprite).setScale(0.3, 0.3).setInteractive();
            scene.input.setDraggable(card);
            return card;
        }
    }
}

We've created a new class that accepts a scene as a parameter, and features a render() function that accepts (x, y) coordinates and a sprite. Now, we can call this function from elsewhere and pass it the necessary parameters to create cards.

Let's import the card at the top of our Game scene:

import Card from '../helpers/card';

And enter the following code within our empty dealCards() function:

        this.dealCards = () => {
            for (let i = 0; i < 5; i++) {
                let playerCard = new Card(this);
                playerCard.render(475 + (i * 100), 650, 'cyanCardFront');
            }
        }

When we click on the "DEAL CARDS" button, we now iterate through a for loop that creates cards and renders them sequentially on screen:

NICE. We can drag those cards around the screen, but it might be nice to limit where they can be dropped to support our game logic.

Let's move over to /src/helpers/zone.js and add a new class:

export default class Zone {
    constructor(scene) {
        this.renderZone = () => {
            let dropZone = scene.add.zone(700, 375, 900, 250).setRectangleDropZone(900, 250);
            dropZone.setData({ cards: 0 });
            return dropZone;
        };
        this.renderOutline = (dropZone) => {
            let dropZoneOutline = scene.add.graphics();
            dropZoneOutline.lineStyle(4, 0xff69b4);
            dropZoneOutline.strokeRect(dropZone.x - dropZone.input.hitArea.width / 2, dropZone.y - dropZone.input.hitArea.height / 2, dropZone.input.hitArea.width, dropZone.input.hitArea.height)
        }
    }
}

Phaser has built-in dropzones that allow us to dictate where game objects can be dropped, and we've set up one here and provided it with an outline. We've also added a tiny bit of data called "cards" to the dropzone that we'll use later.

Let's import our new zone into the Game scene:

import Zone from '../helpers/zone';

And call it in within the create() function:

        this.zone = new Zone(this);
        this.dropZone = this.zone.renderZone();
        this.outline = this.zone.renderOutline(this.dropZone);

Not too shabby!

We need to add a bit of logic to determine how cards should be dropped into the zone. Let's do that below the "this.input.on('drag')" function:

        this.input.on('dragstart', function (pointer, gameObject) {
            gameObject.setTint(0xff69b4);
            self.children.bringToTop(gameObject);
        })

        this.input.on('dragend', function (pointer, gameObject, dropped) {
            gameObject.setTint();
            if (!dropped) {
                gameObject.x = gameObject.input.dragStartX;
                gameObject.y = gameObject.input.dragStartY;
            }
        })

        this.input.on('drop', function (pointer, gameObject, dropZone) {
            dropZone.data.values.cards++;
            gameObject.x = (dropZone.x - 350) + (dropZone.data.values.cards * 50);
            gameObject.y = dropZone.y;
            gameObject.disableInteractive();
        })

Starting at the bottom of the code, when a card is dropped, we increment the "cards" data value on the dropzone, and assign the (x, y) coordinates of the card to the dropzone based on how many cards are already on it. We also disable interactivity on cards after they're dropped so that they can't be retracted:

We've also made it so that our cards have a different tint when dragged, and if they're not dropped over the dropzone, they'll return to their starting positions.

Although our client isn't quite complete, we've done as much as we can before implementing the back end. We can now deal cards, drag them around the screen, and drop them in a dropzone. But to move forward, we'll need to set up a server than can coordinate our multiplayer functionality.

The Server

Let's open up a new command line at our root directory (above /client) and type:

npm init
npm install --save express socket.io nodemon

We've initialized a new package.json and installed Express, Socket.IO, and Nodemon (which will watch our server and restart it upon changes).

In our code editor, let's change the "scripts" section of our package.json to say:

  "scripts": {
    "start": "nodemon server.js"
  },

Excellent. We're ready to put our server together! Create an empty file called "server.js" in our root directory and enter the following code:

const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

We're importing Express and Socket.IO, asking for the server to listen on port 3000. When a client connects to or disconnects from that port, we'll log the event to the console with the client's socket id.

Open a new command line interface and start the server:

npm run start

Our server should now be running on localhost:3000, and Nodemon will watch our back end files for any changes. Not much else will happen except for the console log that the "Server started!"

In our other open command line interface, let's navigate back to our /client directory and install the client version of Socket.IO:

cd client
npm install --save socket.io-client

We can now import it in our Game scene:

import io from 'socket.io-client';

Great! We've just about wired up our front and back ends. All we need to do is write some code in the create() function:

        this.socket = io('http://localhost:3000');

        this.socket.on('connect', function () {
            console.log('Connected!');
        });

We're initializing a new "socket" variable that points to our local port 3000 and logs to the browser console upon connection.

Open and close a couple of browsers at http://localhost:8080 (where our Phaser client is being served) and you should see the following in your command line interface:

YAY. Let's start adding logic to our server.js file that will serve the needs of our card game. Replace the existing code with the following:

const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);
let players = [];

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);

    players.push(socket.id);

    if (players.length === 1) {
        io.emit('isPlayerA');
    };

    socket.on('dealCards', function () {
        io.emit('dealCards');
    });

    socket.on('cardPlayed', function (gameObject, isPlayerA) {
        io.emit('cardPlayed', gameObject, isPlayerA);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
        players = players.filter(player => player !== socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

We've initialized an empty array called "players" and add a socket id to it every time a client connects to the server, while also deleting the socket id upon disconnection.

If a client is the first to connect to the server, we ask Socket.IO to "emit" an event that they're going to be Player A. Subsequently, when the server receives an event called "dealCards" or "cardPlayed", it should emit back to the clients that they should update accordingly.

Believe it or not, that's all the code we need to get our server working! Let's turn our attention back to the Game scene. Right at the top of the create() function, type the following:

        this.isPlayerA = false;
        this.opponentCards = [];

Under the code block that starts with "this.socket.on(connect)", write:

        this.socket.on('isPlayerA', function () {
            self.isPlayerA = true;
        })

Now, if our client is the first to connect to the server, the server will emit an event that tells the client that it will be Player A. The client socket receives that event and turns our "isPlayerA" boolean from false to true.

Note: from this point forward, you may need to reload your browser page (set to http://localhost:8080), rather than having Webpack do it automatically for you, for the client to correctly disconnect from and reconnect to the server.

We need to reconfigure our dealCards() logic to support the multiplayer aspect of our game, given that we want the client to deal us a certain set of cards that may be different from our opponent's. Additionally, we want to render the backs of our opponent's cards on our screen, and vice versa.

We'll move to the empty /src/helpers/dealer.js file, import card.js, and create a new class:

import Card from './card';

export default class Dealer {
    constructor(scene) {
        this.dealCards = () => {
            let playerSprite;
            let opponentSprite;
            if (scene.isPlayerA) {
                playerSprite = 'cyanCardFront';
                opponentSprite = 'magentaCardBack';
            } else {
                playerSprite = 'magentaCardFront';
                opponentSprite = 'cyanCardBack';
            };
            for (let i = 0; i < 5; i++) {
                let playerCard = new Card(scene);
                playerCard.render(475 + (i * 100), 650, playerSprite);

                let opponentCard = new Card(scene);
                scene.opponentCards.push(opponentCard.render(475 + (i * 100), 125, opponentSprite).disableInteractive());
            }
        }
    }
}

With this new class, we're checking whether the client is Player A, and determining what sprites should be used in either case.

Then, we deal cards to our client, while rendering the backs of our opponent's cards at the top the screen and adding them to the opponentCards array that we initialized in our Game scene.

In /src/scenes/game.js, import the Dealer:

import Dealer from '../helpers/dealer';

Then replace our dealCards() function with:

        this.dealer = new Dealer(this);

Under code block that begins with "this.socket.on('isPlayerA')", add the following:

        this.socket.on('dealCards', function () {
            self.dealer.dealCards();
            self.dealText.disableInteractive();
        })

We also need to update our dealText function to match these changes:

        this.dealText.on('pointerdown', function () {
            self.socket.emit("dealCards");
        })

Phew! We've created a new Dealer class that will handle dealing cards to us and rendering our opponent's cards to the screen. When the client socket receives the "dealcards" event from the server, it will call the dealCards() function from this new class, and disable the dealText so that we can't just keep generating cards for no reason.

Finally, we've changed the dealText functionality so that when it's pressed, the client emits an event to the server that we want to deal cards, which ties everything together.

Fire up two separate browsers pointed to http://localhost:8080 and hit "DEAL CARDS" on one of them. You should see different sprites on either screen:

Note again that if you're having issues with this step, you may have to close one of your browsers and reload the first one to ensure that both clients have disconnected from the server, which should be logged to your command line console.

We still need to figure out how to render our dropped cards in our opponent's client, and vice-versa. We can do all of that in our game scene! Update the code block that begins with "this.input.on('drop')" with one line at the end:

        this.input.on('drop', function (pointer, gameObject, dropZone) {
            dropZone.data.values.cards++;
            gameObject.x = (dropZone.x - 350) + (dropZone.data.values.cards * 50);
            gameObject.y = dropZone.y;
            gameObject.disableInteractive();
            self.socket.emit('cardPlayed', gameObject, self.isPlayerA);
        })

When a card is dropped in our client, the socket will emit an event called "cardPlayed", passing the details of the game object and the client's isPlayerA boolean (which could be true or false, depending on whether the client was the first to connect to the server).

Recall that, in our server code, Socket.IO simply receives the "cardPlayed" event and emits the same event back up to all of the clients, passing the same information about the game object and isPlayerA from the client that initiated the event.

Let's write what should happen when a client receives a "cardPlayed" event from the server, below the "this.socket.on('dealCards')" code block:

         this.socket.on('cardPlayed', function (gameObject, isPlayerA) {
            if (isPlayerA !== self.isPlayerA) {
                let sprite = gameObject.textureKey;
                self.opponentCards.shift().destroy();
                self.dropZone.data.values.cards++;
                let card = new Card(self);
                card.render(((self.dropZone.x - 350) + (self.dropZone.data.values.cards * 50)), (self.dropZone.y), sprite).disableInteractive();
            }
        })

The code block first compares the isPlayerA boolean it receives from the server against the client's own isPlayerA, which is a check to determine whether the client that is receiving the event is the same one that generated it.

Let's think that through a bit further, as it exposes a key component to how our client - server relationship works, using Socket.IO as the connector.

Suppose that Client A connects to the server first, and is told through the "isPlayerA" event that it should change its isPlayerA boolean to true. That's going to determine what kind of cards it generates when a user clicks "DEAL CARDS" through that client.

If Client B connects to the server second, it's never told to alter its isPlayerA boolean, which stays false. That will also determine what kind of cards it generates.

When Client A drops a card, it emits a "cardPlayed" event to the server, passing information about the card that was dropped, and its isPlayerA boolean, which is true. The server then relays all that information back up to all clients with its own "cardPlayed" event.

Client A receives that event from the server, and notes that the isPlayerA boolean from the server is true, which means that the event was generated by Client A itself. Nothing special happens.

Client B receives the same event from the server, and notes that the isPlayerA boolean from the server is true, although Client B's own isPlayerA is false. Because of this difference, it executes the rest of the code block.

The ensuing code stores the "texturekey" - basically, the image - of the game object that it receives from the server into a variable called "sprite". It destroys one of the opponent card backs that are rendered at the top of the screen, and increments the "cards" data value in the dropzone so that we can keep placing cards from left to right.

The code then generates a new card in the dropzone that uses the sprite variable to create the same card that was dropped in the other client (if you had data attached to that game object, you could use a similar approach to attach it here as well).

Your final /src/scenes/game.js code should look like this:

import io from 'socket.io-client';
import Card from '../helpers/card';
import Dealer from "../helpers/dealer";
import Zone from '../helpers/zone';

export default class Game extends Phaser.Scene {
    constructor() {
        super({
            key: 'Game'
        });
    }

    preload() {
        this.load.image('cyanCardFront', 'src/assets/CyanCardFront.png');
        this.load.image('cyanCardBack', 'src/assets/CyanCardBack.png');
        this.load.image('magentaCardFront', 'src/assets/magentaCardFront.png');
        this.load.image('magentaCardBack', 'src/assets/magentaCardBack.png');
    }

    create() {
        this.isPlayerA = false;
        this.opponentCards = [];

        this.zone = new Zone(this);
        this.dropZone = this.zone.renderZone();
        this.outline = this.zone.renderOutline(this.dropZone);

        this.dealer = new Dealer(this);

        let self = this;

        this.socket = io('http://localhost:3000');

        this.socket.on('connect', function () {
            console.log('Connected!');
        });

        this.socket.on('isPlayerA', function () {
            self.isPlayerA = true;
        })

        this.socket.on('dealCards', function () {
            self.dealer.dealCards();
            self.dealText.disableInteractive();
        })

        this.socket.on('cardPlayed', function (gameObject, isPlayerA) {
            if (isPlayerA !== self.isPlayerA) {
                let sprite = gameObject.textureKey;
                self.opponentCards.shift().destroy();
                self.dropZone.data.values.cards++;
                let card = new Card(self);
                card.render(((self.dropZone.x - 350) + (self.dropZone.data.values.cards * 50)), (self.dropZone.y), sprite).disableInteractive();
            }
        })

        this.dealText = this.add.text(75, 350, ['DEAL CARDS']).setFontSize(18).setFontFamily('Trebuchet MS').setColor('#00ffff').setInteractive();

        this.dealText.on('pointerdown', function () {
            self.socket.emit("dealCards");
        })

        this.dealText.on('pointerover', function () {
            self.dealText.setColor('#ff69b4');
        })

        this.dealText.on('pointerout', function () {
            self.dealText.setColor('#00ffff');
        })

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = dragX;
            gameObject.y = dragY;
        })

        this.input.on('dragstart', function (pointer, gameObject) {
            gameObject.setTint(0xff69b4);
            self.children.bringToTop(gameObject);
        })

        this.input.on('dragend', function (pointer, gameObject, dropped) {
            gameObject.setTint();
            if (!dropped) {
                gameObject.x = gameObject.input.dragStartX;
                gameObject.y = gameObject.input.dragStartY;
            }
        })

        this.input.on('drop', function (pointer, gameObject, dropZone) {
            dropZone.data.values.cards++;
            gameObject.x = (dropZone.x - 350) + (dropZone.data.values.cards * 50);
            gameObject.y = dropZone.y;
            gameObject.disableInteractive();
            self.socket.emit('cardPlayed', gameObject, self.isPlayerA);
        })
    }

    update() {

    }
}

Save everything, open two browsers, and hit "DEAL CARDS". When you drag and drop a card in one client, it should appear in the dropzone of the other, while also deleting a card back, signifying that a card has been played:

That's it! You should now have a functional template for your multiplayer card game, which you can use to add your own cards, art, and game logic.

One first step could be to add to your Dealer class by making it shuffle an array of cards and return a random one (hint: check out Phaser.Math.RND.shuffle([array])).

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

By Rohit Kumar

Here’s what we will build in this tutorial: a nice React card like this one.

In this tutorial, we’ll use server-side rendering to deliver an HTML response when a user or crawler hits a page URL. We’ll handle the latter requests on the client side.

Why do we need it?

Let me guide you to the answer.

What’s the difference between client-side rendering and server-side rendering?

In Client-side rendering, your browser downloads a minimal HTML page. It renders the JavaScript and fills the content into it.

Server-side rendering, on the other hand, renders the React components on the server. The output is HTML content.

You can combine these two to create an isomorphic app.

Cons of Rendering React on the Server

• SSR can improve performance if your application is small. But it can also degrade performance if it is heavy.
• It increases response time (and it can be worse if the server is busy).
• It increases response size, which means the page takes longer to load.
• It increases the complexity of the application.

When should you use Server Side Rendering?

Despite these consequences of SSR, there are some situations in which you can and should use it.

1. SEO

Every website wants to appear in searches. Correct me if I’m wrong.

Unfortunately, Search engine crawlers do not yet understand/render JavaScript.

This means they see a blank page, no matter how helpful your site is.

Many folks say that Google’s crawler now renders JavaScript.

To test this, I deployed the app on Heroku. Here is what I saw on the Google Search Console:

Google’s crawler does not render React

A blank page.

This was the biggest reason I explored server-side rendering. Especially when it is a cornerstone page such as a landing page, blog, and so on.

To verify if Google renders your site, visit:

Search Console Dashboard > Crawl > Fetch as Google. Enter the page URL or leave it empty for the homepage.

Select FETCH AND RENDER. Once complete, click to see the result.

2. Improve performance

In SSR, the application performance depends on the server’s resources and user’s network speed. This makes it very useful for content-heavy sites.

For Example, say that you have a medium-price mobile phone with slow internet speed. You try to access a site that downloads 4MB of data before you can see anything.

Would you be able to see anything on your screen within 2–4 seconds?

Would you visit that site again?

I don’t think you would.

Another major improvement is in First User Interaction Time. This is the difference in time from when a user hits the URL to when they see content.

Here’s the comparison. I tested it on a development Mac.

React Rendered on Server

SSR performance report (Chrome)

The first interaction time is 300ms. Hydrate finishes at 400ms. The load event exits at 500ms approximately. You can see this by checking out the image above.

React Rendered on Client’s Browser

Client side performance report (Chrome)

The first interaction time is 400ms. The load event exits at 470ms.

The result speaks for itself. There’s a 100ms difference in the First User Interaction Time for such a small app.

How does it Work? — (4 Simple Steps)

• Create a fresh Redux Store on every request.
• Optionally dispatch some actions.
• Get the state out of the Store and perform SSR.
• Send the state obtained in the previous step along with the response.

We will use the state passed in the response for creating the initial state on client-side.

Before you get started, clone/download the complete example from Github and use it for reference.

Getting Started by Setting up our App

First, open your favourite editor and shell. Create a new folder for your application. Let’s start.

npm init --yes

Fill in the details. After package.json is created, copy the dependencies and scripts below into it.

Install all dependencies by running:

npm install

You need to configure Babel and webpack for our build script to work.

Babel transforms ESM and react into Node and browser-understood code.

Create a new file .babelrc and put the line below in it.

{
  "presets": ["@babel/env", "@babel/react"]
}

webpack bundles our app and its dependencies into a single file. Create another file webpack.config.js with the following code in it:

const path = require('path');module.exports = {
    entry: {
        client: './src/client.js',
        bundle: './src/bundle.js'
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: "[name].js"
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
}

The build process output’s two files:

1. assets/bundle.js — pure client side app.
2. assets/client.js — client side companion for SSR.

The src/ folder contains the source code. The Babel compiled files go into views/. views directory will be created automatically if not present.

Why do we need to compile source files?

The reason is the syntax difference between ESM & CommonJS. While writing React and Redux, we heavily use import and export in all files.

Unfortunately, they don’t work in Node. Here comes Babel to rescue. The script below tells Babel to compile all files in the src directory and put the result in views.

"babel": "babel src -d views",

Now, Node can run them.

Copy Precoded & Static files

If you have already cloned the repository, copy from it. Otherwise download ssr-static.zip file from Dropbox. Extract it and keep these three folders inside your app directory. Here’s what they contain.

1. React App and components resides in src/components.
2. Redux files in src/redux/.
3. assets/ & media/: Contain static files such as style.css and images.

Server Side

Create two new files named server.js and template.js inside the src/ folder.

1. src/server.js

Magic happens here. This is the code you’ve been searching for.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

module.exports = function render(initialState) {
  // Model the initial state  
  const store = configureStore(initialState);
  let content = renderToString(<Provider store={store} ><App /></Provider>);
  const preloadedState = store.getState();
  return {
    content,
    preloadedState
  };
};

Instead of rendering our app, we need to wrap it into a function and export it. The function accepts the initial state of the application.

Here’s how it works.

1. Pass initialState to configureStore(). configureStore()returns a new Store instance. Hold it inside the store variable.
2. Call renderToString() method, providing our App as input. It renders our app on the server and returns the HTML produced. Now, the variable content stores the HTML.
3. Get the state out of Redux Store by calling getState() on store. Keep it in a variable preloadedState.
4. Return the content and preloadedState. We will pass these to our template to get the final HTML page.

2. src/template.js

template.js exports a function. It takes title, state and content as input. It injects them into the template and returns the final HTML document.

To pass along the state, the template attaches state to window.__STATE__ inside a <script> tag.

Now you can read state on the client side by accessing window.__STATE__.

We also include the SSR companion assets/client.js client-side application in another script tag.

If you request the pure client version, it only puts assets/bundle.js inside the script tag.

The Client Side

The client side is pretty straightforward.

1. src/bundle.js

This is how you write the React and Redux Provider wrap. It is our pure client-side app. No tricks here.

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

const store = configureStore();
render(
  <Provider store={store} > <App /> </Provider>,
  document.querySelector('#app')
);

2. src/client.js

Looks familiar? Yeah, there is nothing special except window.__STATE__. All we need to do is grab the initial state from window.__STATE__ and pass it to our configureStore() function as the initial state.

Let’s take a look at our new client file:

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state);
hydrate(
  <Provider store={store} > <App /> </Provider>,
  document.querySelector('#app')
);

Let’s review the changes:

1. Replace render() with hydrate(). [hydrate()](https://reactjs.org/docs/react-dom.html#hydrate) is the same as render() but is used to hydrate elements rendered by [ReactDOMServer](https://reactjs.org/docs/react-dom-server.html). It ensures that the content is the same on the server and the client.
2. Read the state from the global window object window.__STATE__. Store it in a variable and delete the window.__STATE__.
3. Create a fresh store with state as initialState.

All done here.

Putting it all together

Index.js

This is the entry point of our application. It handles requests and templating.

It also declares an initialState variable. I have modelled it with data in the assets/data.json file. We will pass it to our ssr() function.

Note: While referencing a file that is inside src/ from a file outside src/ , use normal require() and replace src/ by views/. You know the reason (Babel compile).

Routing

1. /: By default server-rendered homepage.
2. /client: Pure client-side rendering example.
3. /exit: Server stop button. Only available in development.

Build & Run

It’s time to build and run our application. We can do this with a single line of code.

npm run build && npm run start

Now, the application is running at http://localhost:3000.

Ready to become a React Pro?

I am starting a new series from next Monday to get your React skills blazing, immediately.

subscription link below ?

Thank you for reading this.

If you like it and find it useful, follow me on Twitter & Webflow.

If you're moving from coding tutorials into creating your own JavaScript projects, you'll want to become familiar with using a version control system like GitHub and benefiting from ES6 features to clean up your code and streamline your development process.

In this new video, we'll walk through cloning an existing repository from GitHub, creating your own local and remote repositories, utilizing node package manager (NPM) to install dependencies, creating a streamlined code base using ES6 classes, import/export modules, and arrow functions, and adding, committing, and pushing changes to GitHub.

Plus, we'll talk through the basic file structure for a Phaser 3 project!

Check it out (50 minute watch):

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

Introduction

Nodejs gives you the power to write server side code using JavaScript. In fact, it is very easy and fast to create a web server using Nodejs. There are several frameworks available on Node package manager which makes the development even easier and faster.

But there are a few challenges in Nodejs development:

• Nodejs is all about callbacks, and with more and more callbacks you end up with a situation called callback hell.
• Writing readable code.
• Writing maintainable code.
• You don't get much intellisense support which makes development slow.

If you are quite experienced and have a good knowledge of Nodejs, you can use different techniques and try to minimize these challenges.

The best way to solve these problems is by using modern JavaScript ES6, ES7 or TypeScript, whatever you feel comfortable with. I recommend TypeScript, because it provides intillisense support for every word of code which makes your development faster.

So I created a framework called FortJs which is very easy to learn and use. FortJs enables you to write server-side code using ES6 or TypeScript which is modular, secure, and pretty much just beautiful and readable.

Features

Some of the important features of FortJs are:

• Based on Fort architecture.
• MVC Framework and follows OOPS approach so everything is class and object.
• Provides components - Wall, Shield and Guard. Components help modularize the application.
• Uses ES6 async/await or promise for executing asychronous code.
• Everything is configurable - you can configure your session store, view engine, websocket etc.
• Dependency Injection.
• Everything can be unit tested, so you can use a TDD approach.

Let's Code

In this article I am going to create a REST API using FortJs and ES6. But you can use the same code and steps to implement using TypeScript too.

Project Setup

FortJs provides a CLI - fort-creator. This helps you set up the project and develop faster. Let's use the CLI to develop.

Perform the below steps sequentially:

• Open your terminal or command prompt.
• Install fort-creator globally - run the command "npm i fort-creator -g". Note: Make sure you have Nodejs installed in your system.
• Create a new project - run the command "fort-creator new my-app". Here “my-app” is the name of the app, so you can choose any name. The CLI will prompt you to choose the language with two options: TypeScript and JavaScript. Choose your language by using the arrow keys and press enter - i have chosen JavaScript. It will take some time to create the project, so please wait until you see "new project my-app created".
• Enter into the project directory - "cd my-app".
  Start the development server with live reloading - run the command "fort-creator start".
• Open the browser and type the URL - http://localhost:4000/.

You should see something like this in the browser.

FortJs starter page

Let's understand how this page is rendered:

• Open the project folder in your favourite code editor. I am going to use VS Code. You will see many folders inside project root such as controllers, views, etc. Every folder is grouped by their use - for example, the controllers folder contains all controllers and the views folder contains all views.
• Open the controllers folder -> Inside the controllers, you will see a file name - default_controller. Let's open it and observe the code. The file contains a class DefaultController - this is a controller class and it contains methods which return some http response.
• Inside the class DefaultController, you will see a method 'index' - this is the one which is rendering current output to the browser. The method is known as worker in FortJs because they do some kind of work and return the result as an http response. Let's observe the index method code:

const data = {  
    title: title  
}  
const result = await viewResult('default/index.html', data);  
return result;

It creates a data object and passes that object into the viewResult method. The viewResult method takes two parameters - the view location and view data. The work of viewResult is to render the view and return a response, which we are seeing in the browser.

• Let's find the view code and understand it. Open the views folder - > open default folder - > open index.html. This is our view code. It is simple HTML code along with some mustache syntax. The default view engine for Fortjs is mustache.

I hope you have understood the project architecture. If you are having any difficulties or doubts, please feel free to ask in the comments section.

Now we will move to next part of this article where we will learn how to create a simple rest API.

REST

We are going to create a REST endpoint for entity user - which will perform CRUD operations for the user such as adding a user, deleting a user, getting a user, and updating a user.

According to REST:

1. Adding user - should be done using the http method "POST"
2. Deleting user - should be done using the http method "REMOVE"
3. Getting user - should be done using the http method "GET"
4. Updating user - should be done using the http method "PUT"

For creating an endpoint, we need to create a Controller similar to the default controller explained earlier.

Execute the command "fort-creator add". It will ask you to "Choose the component to add ?" Choose Controller & press enter. Enter the controller name "User" and press enter.

Now that we have created the user controller we need to inform FortJs by adding it to routes. The route is used to map our controller to a path.

Since our entity is user, "/user" will be a good route. Let's add it. Open routes.js inside the root directory of the project and add UserController to routes.

After adding UserController, routes.js will look like this:

import { DefaultController } from "./controllers/default_controller";
import { UserController } from "./controllers/user_controller";

export const routes = [{
    path: "/*",
    controller: DefaultController
},
{
    path: "/user",
    controller: UserController
}]

So when an http request has the path "/user" then UserController will be called.

Let's open the url - http://localhost:4000/user.

Note: If you have stopped FortJs while adding the controller, please start it again by running the cmd - fort-creator start

And you see a white page right?

This is because we are not returning anything from the index method and thus we get a blank response. Let's return a text "Hello World" from the index method. Add the below code inside the index method and save:

return textResult('Hello World');

Refresh the url - http://localhost:4000/user

And you see "Hello World" right?

Now, let's convert "UserController" to a REST API. But before writing code for the REST API, let's create a dummy service which will do CRUD operations for users.

Service

Create a folder called “services” and then a file “user_service.js” inside the folder. Paste the below code inside the file:

const store = {
    users: [{
        id: 1,
        name: "ujjwal",
        address: "Bangalore India",
        emailId: "ujjwal@mg.com",
        gender: "male",
        password: "admin"
    }]
}

export class UserService {
    getUsers() {
        return store.users;
    }

    addUser(user) {
        const lastUser = store.users[store.users.length - 1];
        user.id = lastUser == null ? 1 : lastUser.id + 1;
        store.users.push(user);
        return user;
    }

    updateUser(user) {
        const existingUser = store.users.find(qry => qry.id === user.id);
        if (existingUser != null) {
            existingUser.name = user.name;
            existingUser.address = user.address;
            existingUser.gender = user.gender;
            existingUser.emailId = user.emailId;
            return true;
        }
        return false;
    }

    getUser(id) {
        return store.users.find(user => user.id === id);
    }

    removeUser(id) {
        const index = store.users.findIndex(user => user.id === id);
        store.users.splice(index, 1);
    }
}

The above code contains a variable store which contains a collection of users. The method inside the service does operations like add, update, delete, and get on that store.

We will use this service in REST API implementation.

GET

For the route "/user" with the http method "GET", the API should return a list of all users.

In order to implement this, let's rename the "index" method inside user_controller.js to "getUsers" making it semantically correct. Then paste the below code inside the method:

const service = new UserService();
return jsonResult(service.getUsers());

Now user_controller.js looks like this:

import { Controller, DefaultWorker, Worker, textResult, jsonResult } from "fortjs";
import { UserService } from "../services/user_service";

export class UserController extends Controller {

    @DefaultWorker()
    async getUsers() {
        const service = new UserService();
        return jsonResult(service.getUsers());
    }
}

Here, we are using the decorator DefaultWorker. The DefaultWorker does two things: it adds the route "/" & the http method "GET". It's a shortcut for this scenario. In the next part, we will use other decorators to customize the route.

Let's test this by calling the url http://localhost:4000/user. You can open this in the browser or use any http client tools like postman or curl.

Ok, so we have successfully created an end point :) .

Let's look again at our code and see if we can make it better:

1. The service "UserService" is tightly coupled with Controller "UserController" which becomes a problem for unit testing "UserController". So we will use dependency injection by FortJs to inject UserService.
2. We are creating an instance of "UserService" every time the method getUsers is called. But what we need from "UserService" is a single object and then call the "UserService" method from the object.

So if we can somehow store an object of "UserService" then we can make our code faster (because calling new does some work under the hood). For this we will use the singleton feature of FortJs.

Let's change the user_controller.js code by the below code:

import { Controller, DefaultWorker, Worker, textResult, jsonResult, Singleton } from "fortjs";
import { UserService } from "../services/user_service";

export class UserController extends Controller {

    @DefaultWorker()
    async getUsers(@Singleton(UserService) service) {
        return jsonResult(service.getUsers());
    }
}

As you can see, the only change is that we are using the "Singleton" decorator in the method getUsers. This will create a singleton and inject that singleton when getUsers is called. This singleton will be available throughout the application.

Since service is now a parameter, we can manually pass the parameter while calling. This makes getUsers unit testable.

For doing unit testing or E2E testing, please read this test doc - http://fortjs.info/tutorial/test/

POST

Let's add a method "addUser" which will extract data from the request body and call service to add a user.

async addUser(@Singleton(UserService) service) {
        const user = {
            name: this.body.name,
            gender: this.body.gender,
            address: this.body.address,
            emailId: this.body.emailId,
            password: this.body.password
        };
        const newUser = service.addUser(user);
        return jsonResult(newUser, HTTP_STATUS_CODE.Created);
}

In the above code we are creating the Singleton of the UserService again. So the question is will it create another object?

No it will be same object that was in getUser. FortJs supplies the object as a parameter when it calls the method.

The methods created are by default not visible for an http request. So in order to make this method visible for the http request, we need to mark this as a worker.

A method is marked as a worker by adding the decorator "Worker". The Worker decorator takes a list of http methods and makes that method available for only those http methods. So let's add the decorator:

@Worker([HTTP_METHOD.Post])
async addUser(@Singleton(UserService) service) {
    const user = {
        name: this.body.name,
        gender: this.body.gender,
        address: this.body.address,
        emailId: this.body.emailId,
        password: this.body.password
    };
    const newUser = service.addUser(user);
    return jsonResult(newUser, HTTP_STATUS_CODE.Created);
}

Now the route of this method is the same as the name of the method that is "addUser". You can check this by sending a post request to http://localhost:4000/user/addUser with user data in the body.

But we want the route to be "/", so that it will be a rest API. The route of the worker is configured by using the decorator "Route". Let's change the route now.

@Worker([HTTP_METHOD.Post])
@Route("/")
async addUser(@Singleton(UserService) service) {
    const user = {
        name: this.body.name,
        gender: this.body.gender,
        address: this.body.address,
        emailId: this.body.emailId,
        password: this.body.password
    };
    const newUser = service.addUser(user);
    return jsonResult(newUser, HTTP_STATUS_CODE.Created);
}

Now our end point is configured for a post request. Let's test this by sending a post request to http://localhost:4000/user/ with user data in the body.

It returns the user created with id which is our logic. So we have created the end point for the post request, but one important thing to do is to validate the data. Validation is an essential part of any app and is very important for a backend application.

So far, our code is clean and readable. But if we add validation code it will become a little dirty.

Worry not, FortJs provides the component Guard for this kind of work. A/c to the FortJs docs:

Guard is security layer on top of Worker. It controls whether a request should be allowed to call the Worker.

So we are going to use guard for validation of the data. Let's create the guard using fort-creator. Execute the command fort-creator add and choose Guard. Enter the file name "UserValidator". There will be a file "user_validator_guard.js" created inside the guards folder. Open that file.

A guard has access to the body, so you can validate the data inside that. Returning null inside the method check means that we're allowing to call the worker. Returning anything else means block the call.

Let's make it clearer by writing code for the validation. Paste the below code inside the file "user_validator_guard.js":

import { Guard, textResult, HTTP_STATUS_CODE } from "fortjs";

export class UserValidatorGuard extends Guard {

    async check() {
        const user = {
            name: this.body.name,
            gender: this.body.gender,
            address: this.body.address,
            emailId: this.body.emailId,
            password: this.body.password
        };
        const errMsg = this.validate(user);
        if (errMsg == null) {
            // pass user to worker method, so that they dont need to parse again  
            this.data.user = user;
            // returning null means - guard allows request to pass  
            return null;
        } else {
            return textResult(errMsg, HTTP_STATUS_CODE.BadRequest);
        }
    }

    validate(user) {
        let errMessage;
        if (user.name == null || user.name.length < 5) {
            errMessage = "name should be minimum 5 characters"
        } else if (user.password == null || user.password.length < 5) {
            errMessage = "password should be minimum 5 characters";
        } else if (user.gender == null || ["male", "female"].indexOf(user.gender) < 0) {
            errMessage = "gender should be either male or female";
        } else if (user.emailId == null || !this.isValidEmail(user.emailId)) {
            errMessage = "email not valid";
        } else if (user.address == null || user.address.length < 10) {
            errMessage = "address length should be greater than 10";
        }
        return errMessage;
    }

    isValidEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }


}

In the above code:

• We have created a method validate which takes the parameter user. It validates the user & returns the error message if there is a validation error, otherwise null.
• We are validating data inside the check method, which is part of guard lifecycle. We are validating the user inside it by calling the method validate.
  If the user is valid, then we are passing the user value by using the "data" property and returning null. Returning null means guard has allowed this request and the worker should be called.
• If a user is not valid, we are returning an error message as a text response with the HTTP code "Bad Request". In this case, execution will stop here and the worker won't be called.

In order to activate this guard for the method addUser, we need to add this on top of addUser. The guard is added by using the decorator "Guards". So let's add the guard:

@Worker([HTTP_METHOD.Post])
@Route("/")
@Guards([UserValidatorGuard])
async addUser(@Singleton(UserService) service) {
    const newUser = service.addUser(this.data.user);
    return jsonResult(newUser, HTTP_STATUS_CODE.Created);
}

In the above code:

• I have added the guard, “UserValidatorGuard” using the decorator Guards.
• With the guard in the process, we don't need to parse the data from the body anymore inside the worker. Rather, we are reading it from this.data which we are passing from "UserValidatorGuard".
• The method “addUser” will only be called when Guard allows, which means all data is valid.

One thing to note is that the method "addUser" looks very light after using a component, and it's doing validation too. You can add multiple guards to a worker which gives you the ability to modularize your code into multiple guards and use that guard at multiple places.

Isn't this cool :D?

Let's try adding a user with some invalid data:

As you can see in the screenshot, I have tried sending a request without a password. The result is - "password should be minimum 5 characters". So it means that guard is activated and working perfectly.

PUT

Let’s add another method - “updateUser” with route “/” , guard “UserValidatorGuard” (for validation of user) and most important - worker with http method “PUT”.

@Worker([HTTP_METHOD.Put])
@Guards([UserValidatorGuard])
@Route("/")
async updateUser(@Singleton(UserService) service) {
    const user = this.data.user;
    const userUpdated = service.updateUser(user);
    if (userUpdated === true) {
        return textResult("user updated");
    } else {
        return textResult("invalid user");
    }
}

The updated code is similar to the addUser code except functionality wise it is updating the data. Here, we have reutilized UserValidatorGuard to validate data.

DELETE

In order to delete data, user needs to pass the id of the user. This can be passed by:

• Sending data in body just like we did for add & update - {id:1}
• Sending data in query string - ?id=1
• Sending data in route - for this, we need to customize our route - "/user/1"

We have already implemented getting data from body. So let's see other two ways:

Sending Data in Query String

Let's create a method "removeByQueryString" and paste the below code:

@Worker([HTTP_METHOD.Delete])
@Route("/")
async removeByQueryString(@Singleton(UserService) service) {
    // taking id from query string
    const userId = Number(this.query.id);
    const user = service.getUser(userId);
    if (user != null) {
        service.removeUser(userId);
        return textResult("user deleted");
    } else {
        return textResult("invalid user", 404);
    }
}

Sending Data in Route

You can parameterise the route by using "{var}" in a route. Let's see how.

Let's create another method "removeByRoute" and paste the below code:

@Worker([HTTP_METHOD.Delete])
@Route("/{id}")
async removeByRoute(@Singleton(UserService) service) {

    // taking id from route
    const userId = Number(this.param.id);

    const user = service.getUser(userId);
    if (user != null) {
        service.removeUser(userId);
        return textResult("user deleted");
    } else {
        return textResult("invalid user");
    }
}

The above code is exactly the same as removeByQueryString except that it is extracting the id from the route and using parameter in route i.e., "/{id}" where id is parameter.

Let's test this:

So we have finally created a REST API for all the funtionalities except GETting a particular user by id. I will leave that to you for practice.

POINTS OF INTEREST

Q: How do we add authentication to "UserController", so that any unauthenticated request can't call the "/user" end point.

A: There are multiple approaches for this:

• We can check in every worker for authentication. (BAD - so much extra work and code repetition)
• Create a Guard component and assign to every worker . (GOOD)
• Create a Shield component and assign to controller. Shield is a security layer similar to guard but works on top of controller, so if shield rejects then controller is not initiated. (BEST)

Take a look at the FortJs authentication docs - http://fortjs.info/tutorial/authentication/

REFERENCES

• http://fortjs.info/
• https://medium.com/fortjs

In this article, I would show you various methods of manipulating arrays in JavaScript [^^]

What are Arrays in JavaScript?

Before we proceed, you need to understand what arrays really mean.

In JavaScript, an array is a variable that is used to store different data types. It basically stores different elements in one box and can be later assesssed with the variable.

Declaring an array:

let myBox = [];   // Initial Array declaration in JS

Arrays can contain multiple data types

let myBox = ['hello', 1, 2, 3, true, 'hi'];

Arrays can be manipulated by using several actions known as methods. Some of these methods allow us to add, remove, modify and do lots more to arrays.

I would be showing you a few in this article, let’s roll :)

NB: I used Arrow functions in this post, If you don’t know what this means, you should read here. Arrow function is an ES6 feature.

toString()

The JavaScript method toString() converts an array to a string separated by a comma.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.toString()); // green,yellow,blue

join()

The JavaScript join() method combines all array elements into a string.

It is similar to toString() method, but here you can specify the separator instead of the default comma.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.join('-')); // green-yellow-blue

concat

This method combines two arrays together or add more items to an array and then return a new array.

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

push()

This method adds items to the end of an array and changes the original array.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.push('safari', 'opera mini');
console.log(browsers); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

pop()

This method removes the last item of an array and returns it.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.pop(); // "edge"
console.log(browsers); // ["chrome", "firefox"]

shift()

This method removes the first item of an array and returns it.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.shift(); // "chrome"
console.log(browsers); // ["firefox", "edge"]

unshift()

This method adds an item(s) to the beginning of an array and changes the original array.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]

You can also add multiple items at once

splice()

This method changes an array, by adding, removing and inserting elements.

The syntax is:

array.splice(index[, deleteCount, element1, ..., elementN])

• **Index** here is the starting point for removing elements in the array

• **deleteCount** is the number of elements to be deleted from that index

• **element1, …, elementN** is the element(s) to be added

Removing items

after running splice() , it returns the array with the item(s) removed and removes it from the original array.

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

NB: The deleteCount does not include the last index in range.

If the second parameter is not declared, every element starting from the given index will be removed from the array:

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(3);
console.log(colors); // ["green", "yellow", "blue"]
// deletes ['purple']

In the next example we will remove 3 elements from the array and replace them with more items:

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

Adding items

To add items, we need to set the deleteCount to zero

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

slice()

This method is similar to splice() but very different. It returns subarrays instead of substrings.

This method copies a given part of an array and returns that copied part as a new array. It does not change the original array.

The syntax is:

array.slice(start, end)

Here’s a basic example:

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) // returns the original array

The best way to use slice() is to assign it to a new variable.

let message = 'congratulations'
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // returns "congrats!"

split()

This method is used for strings. It divides a string into substrings and returns them as an array.

Here’s the syntax:string.split(separator, limit);

• The **separator** here defines how to split a string either by a comma.

• The **limit** determines the number of splits to be carried out

let firstName = 'Bolaji';
// return the string as an array
firstName.split() // ["Bolaji"]

another example:

let firstName = 'hello, my name is bolaji, I am a dev.';
firstName.split(',', 2); // ["hello", " my name is bolaji"]

NB: If we declare an empty array, like this firstName.split(''); then each item in the string will be divided as substrings:

let firstName = 'Bolaji';
firstName.split('') // ["B", "o", "l", "a", "j", "i"]

indexOf()

This method looks for an item in an array and returns the index where it was found else it returns -1

let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

lastIndexOf()

This method works the same way indexOf() does except that it works from right to left. It returns the last index where the item was found

let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

filter()

This method creates a new array if the items of an array pass a certain condition.

The syntax is:

let results = array.filter(function(item, index, array) {
  // returns true if the item passes the filter
});

Example:

Checks users from Nigeria

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter( code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

map()

This method creates a new array by manipulating the values in an array.

Example:

Displays usernames on a page. (Basic friend list display)

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {
return '<li>' + item + '</li>';
})
const render = '<ul>' + display.join('') + '</ul>';
document.write(render);

another example:

// adds dollar sign to numbers
const numbers = [10, 3, 4, 6];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

reduce()

This method is good for calculating totals.

reduce() is used to calculate a single value based on an array.

let value = array.reduce(function(previousValue, item, index, array) {
  // ...
}, initial);

example:

To loop through an array and sum all numbers in the array up, we can use the for of loop.

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {
sum += n;
}
console.log(sum);

Here’s how to do same with reduce()

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) =>
accummulator + value
, 0);
console.log(sum); // 970

If you omit the initial value, the total will by default start from the first item in the array.

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) => accummulator + value);
console.log(sum); // still returns 970

The snippet below shows how the reduce() method works with all four arguments.

source: MDN Docs

More insights into the reduce() method and various ways of using it can be found here and here.

forEach()

This method is good for iterating through an array.

It applies a function on all items in an array

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

iteration can be done without passing the index argument

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item) => console.log(item));
// returns every item in the array
// "green"
// "yellow"
// "blue"

every()

This method checks if all items in an array pass the specified condition and returntrue if passed, else false.

check if all numbers are positive

const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

some()

This method checks if an item (one or more) in an array pass the specified condition and return true if passed, else false.

c_hecks if at least one number is positive_

const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

includes()

This method checks if an array contains a certain item. It is similar to .some(), but instead of looking for a specific condition to pass, it checks if the array contains a specific item.

let users = ['paddy', 'zaddy', 'faddy', 'baddy'];
users.includes('baddy'); // returns true

If the item is not found, it returns false

There are more array methods, this is just a few of them. Also, there are tons of other actions that can be performed on arrays, try checking MDN docs herefor deeper insights.

Summary

• toString() converts an array to a string separated by a comma.

• join() combines all array elements into a string.

• concat combines two arrays together or add more items to an array and then return a new array.

• push() adds item(s) to the end of an array and changes the original array.

• pop() removes the last item of an array and returns it

• shift() removes the first item of an array and returns it

• unshift() adds an item(s) to the beginning of an array and changes the original array.

• splice() changes an array, by adding, removing and inserting elements.

• slice() copies a given part of an array and returns that copied part as a new array. It does not change the original array.

• split() divides a string into substrings and returns them as an array.

• indexOf() looks for an item in an array and returns the index where it was found else it returns -1

• lastIndexOf() looks for an item from right to left and returns the last index where the item was found.

• filter() creates a new array if the items of an array pass a certain condition.

• map() creates a new array by manipulating the values in an array.

• reduce() calculates a single value based on an array.

• forEach() iterates through an array, it applies a function on all items in an array

• every() checks if all items in an array pass the specified condition and return true if passed, else false.

• some() checks if an item (one or more) in an array pass the specified condition and return true if passed, else false.

• includes() checks if an array contains a certain item.

Let’s wrap it here; Arrays are powerful and using methods to manipulate them creates the Algorithms real-world applications use.

Let's do a create a small function, one that converts a post title into a urlSlug.

URL slug is the exact address of a specific page or post on your site.

When you write an article on Freecodecamp News or any other writing platform, your post title is automatically converted to a slug with white spaces removed, characters turned to lowercase and each word in the title separated by a hyphen.

Here’s a basic function that does that using some of the methods we learnt just now.

const url = 'https://bolajiayodeji.com/'
const urlSlug = (postTitle) => {
let postUrl = postTitle.toLowerCase().split(' ');
let postSlug = `${url}` + postUrl.join('-');
return postSlug;
}
let postTitle = 'Introduction to Chrome Lighthouse'
console.log(urlSlug(postTitle));
// https://bolajiayodeji.com/introduction-to-chrome-lighthouse

in postUrl, we convert the string to lowercase then we use the **split()**method to convert the string into substrings and returns it in an array

["introduction", "to", "chrome", "lighthouse"]

in post slug we join the returned array with a hyphen and then concatenate it to the category string and main url.

let postSlug = `${url}` + postUrl.join('-');
postUrl.join('-') // introduction-to-chrome-lighthouse

That’s it, pretty simple, right? :)

If you’re just getting started with JavaScript, you should check this repository here, I’m compiling a list of basic JavaScript snippets ranging from

• Arrays

• Control flow

• Functions

• Objects

• Operators

Don’t forget to Star and share! :)

PS: This article was first published on my blog here