The Startup
Published in

The Startup

Learning to Code: Day 57 — JavaScript: ES6 Part 4

Good morning all! Hope we are all keeping well, had a lot of fun yesterday learning about Destructuring, let’s continue with more ES6 features of JavaScript and thanks as always to FreeCodeCamp for the lessons!

Create Strings using Template Literals

Oh wonderful! Finally something I’ve seen online that I’ve always wanted to know, incoming big itch about to get scratched!

Template Literals. What are they? Well, when we create strings with string interpolation (where placeholders are set in a string and later replaced with their desired values), we connect a template string sentence together with our key variable words slotted in the placeholders for the end result of a whole sentence.

For example you have a database of names and ages, and you don’t want to write out “Hello, my name is (enter name variable here) and I am (enter age variable here) years old” a hundred thousand times, you can simply use a Template Literal which is included as a new nifty feature of ES6.

-FreeCodeCamp

Note: Watch out for the backticks` ” in the string at the start and end to wrap it, not single/double quotes. The placeholders are seen as ${} so no concatenation (+) is needed between string and variables and the string is multi-line, so it’s written over two lines of code and appears over two lines in the console also. This saves using the \n within strings.

Writing Concise Object Literal Declarations with Object Property Shorthand

Yes it’s a bit of a mouthful but let’s see how ES6 helps us define object literals:

-FreeCodeCamp

Rather than having to write x:x and y:y, we can simply write it once as x,y and rewrite as an arrow function also:

-FreeCodeCamp

This is what object property shorthand looks like. Nice and clean and simple.

Writing Concise Declarative Functions in ES6

-FreeCodeCamp

Take a look at this chunk of code. Notice that cheeky little template literal too (with the placeholder containing the name value). What can be simplified here? Have a little think.

Yes, the function keyword! In ES6 we don’t need it or the preceding colon just beforehand, we end up with this:

-FreeCodeCamp

Defining a Constructor Function with the Class Keyword

No we’re not referring to the class keyword in HTML, this one is different. In ES6, the class keyword is just syntax, but can be used to create objects. It declares a function, to which a constructor is added inside.

What is a constructor? Well, according to MDN Web Docs:

The constructor method is a special method for creating and initializing an object created with a class.

There can only be one special method with the name “constructor” in a class. A SyntaxError will be thrown, if the class contains more than one occurrence of a constructor method.

Let’s take a look at a typical constructor function which uses new as a keyword to instantiate (to represent) an object:

-FreeCodeCamp

The class keyword then replaces the constructor function creation, note how things move around a bit in this new form:

-FreeCodeCamp

Note: See how the class keyword declares a function, to which a constructor is added, as said before. UpperCamelCase should also be used for declaring ES6 class names (see SpaceShuttle, not spaceShuttle).

Aaand let’s keep it simple for today, headaches averted. Phew! Thanks guys, I’ve seen alot of support come through The Startup here on Medium so I just wanna give them a wee shoutout and say thanks for supporting me! Catch you all next time.

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

What I’ve learnt about Cypress this month (as a newcomer) 🤖

npm install — How To Minimize Its Use Under Specific Conditions

July 16th-22th

Notes to self 📝 (… and other developers at the early stages of their career) — Part 2

State management with Vue.js

Cypress -setup to reports, USEFUL MATERIALS

Back to Basics: How to Set Up a React App From Scratch 2020

Seven instances where ES6 makes your programming life easier

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
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

How did I start coding?

Is This Coding Bootcamp Legit?

Software Development: 2 Pieces of Advice To A Complete Newbie

No, you should not go to a coding bootcamp.