Tagged Template Literals

Once in a while you come across a JavaScript syntax that looks strange in nature. However, that’s not quite true, let’s phrase it differently, all the time we come across a JavaScript syntax that looks strange. :) Well, Tagged Template Literals are one of those strange ones among many. Let’s dive deep into the concepts and usage of tagged template literals.

What is Tagged Template Literals?

Tagged template literals were introduced in the ES6 version of JavaScript. I’m safely assuming that most of you are hopefully aware of template strings, where you can interpolate dynamic content inside a string.


Photo by (Hemil Patel)

Learning web/mobile development from scratch is very important. Getting your basics right about any kind of development is like putting the best foot forward. The best way to do this is through loads of practice such as building multiple projects with different scenarios. I highly recommend building a few small projects before building a comprehensive one, something that you can showcase in your profile.

Practicing for specific skills

Let’s start by understanding the list of skills you are required to practice.

  • Visual design
  • Client server applications ( API calls )
  • Responsive design
  • State management
  • Authentication
  • Session handling
  • Local storage
  • Complex routing

Projects

I generally recommend…


It's human nature to focus on strength first. As a programmer, it’s natural to consider the programming strength when it comes to considering it as a career goal. I personally believe that your weaknesses are the biggest roadblock to your success. It has a huge impact when you attend a technical interview where some of the weaknesses start coming to the forefront. This also applies in your daily professional deliverables. I am sure most of us have experienced this at some point in our career where we either missed an important deadline or failed an interview. We are all humans…


Strings are primitive data type. Primitive doesn’t mean old, it just means they are as simple as old.

There are three ways to define strings and all of them are perfectly valid. You can either use single quotes, double-quotes, or backticks. Surprisingly, String is the only data type that uses quotes to define a value.

let myDogsname = "cujo";

let myFishsName = 'nemo';

let myPigsName = `babe`;

How do I check the data type?

If you have a variable in your code and you don't know what data type it is, check it by using a built-in JavaScript function called typeof(). It returns the data type name…


const vs let
const vs let

There are three different ways to declare a variable in JavaScript: var, let, and const keywords. In ES5 and earlier versions, there was only one way to declare a variable by using the var keyword. In ES6, JavaScript got a makeover and got two more keywords, let and const. So, if you are new to JavaScript and are yet to pickup a keyword, avoid using var.

Let’s focus on let and const.

//example showing the let keyword
let myDogsName = "cujo";

//example showing the const keyword
const myDogsName = "cujo";


Defining variables in JavaScript is pretty simple. Let’s say you want to create your pet’s name as a variable.

let myPetName = 'cujo';

Let’s look at the four parts of the syntax:

  • let is a keyword that is used to declare variables.
  • myPetName is the variable name here. “cujo” is the value, which is assigned to the variable. Every value has a data type. Here, in this example, it is string.
  • ; (semicolon) is to terminate…


Valid Variable Names

3 Simple Rules

When you start learning JavaScript, the first thing you need to learn is how to define a variable. Prior to that you need to know what is a valid variable name. Not following the protocols of a valid variable name results in a syntactical error. So, what defines a valid variable name?

There are many different ways you can define a variable. I’ve simplified three rules to begin with:

  • Variable names cannot be a keyword. For example, word ‘let’ is considered as a keyword in JavaScript. Hence, you cannot define a variable called ‘let’. …


Reversing a string in any programming language is a very common interview question. There are multiple solutions to this problem. In my opinion, you should answer based on the personality of the interviewer. When interviewer asks you this type of question, they want you to code your solution without using too many built-in functions. Regardless, a one line solution is if you use ES2015 syntax. Let’s start with some built-in functions.

The three solutions to answer this question are :

Using built-in functions

const s = 'TechSith';const result = s.split('').reverse().join('');console.log(result); // 'htiShceT'

What’s the logic?

Logic…


Spread operator is one of the coolest features introduced as part of the ES2015 release, we will look at some its useful applications.

Have you ever observed when you spread some butter on your toast, how it leaves a mark. Similarly, JavaScript Spread operator is represented by three dots before the variable. It is an operator just like any other mathematical operator like +, -, %. The spread operator only works on reference data types like objects, arrays, maps, sets, and so on. Look at the following snippets that can help you understand the implementation better:

Syntax

For arrays:

const numArray…

Hemil Patel

I am a front-end programmer and I love JavaScript!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store