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.
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:
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:
This is what object property shorthand looks like. Nice and clean and simple.
Writing Concise Declarative Functions in ES6
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:
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:
The class keyword then replaces the constructor function creation, note how things move around a bit in this new form:
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.
