Firstly, I wanted to say thanks so much to everyone who has read my previous story about “map, reduce and filter” in JavaScript, and an even bigger thank you to the curators for recommending it, it’s thoroughly appreciated!
With this article I just wanted to go over 2 of the new features within ES6 that are seen as niceties, they are the template literals and multiline strings.
Template literals
Template literals are a new and improved way to work with strings in JavaScript, prior to ES5 to concatenate strings you had to something along the lines of
var myName = "alex";var myAge = 22;var myOlderAge;console.log("My name is " + myName + " and I am" + myAge + " years old" + "and not " + myOlderAge);
As you can see there are a lot of plus symbols and double quotation marks appearing which can lead to very complicated string interpolation if you are planning on concatenating many strings, however, with template literals this is simplified a great amount.
The first thing to do is instead of surrounding the strings with double quotes, surround them with backticks like so.
console.log(`hello there`)If you want to then begin concatenating strings you can surround the variables you want to interpolate with a “$” symbol as well as an opening and closing curly bracket, an example is below.
var myName = "alex";var myAge = 22;var myOlderAge;console.log(`My name is ${myName} and I am ${myAge} years old and not ${myOlderAge}`);
This will provide the same output as the previously constructed example but is more readable with double quotes and plus symbols.
An example of where I use template literals is in my React-Native projects when defining a “fetch” or “Axios” request, I use the template literals if I need to input parameters for the request as well as importing an API key from a separate file, an example of this is below.
Axios(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${currentLatitude},${currentLongitude}&radius=1500&type=restaurant&pagetoken=${nextPageToken}&key=${secretkey.secret}`)So as you can see as I have used a backtick as well as the “${}” syntax to contain the necessary parameters for the API url making the code more readable (In my opinion) .
So overall, template literals help a lot with string interpolation (i.e. inserting variables into a string) and make code a heck of a lot more readable to the user.
Destructuring
Destructuring is also something I use quite frequently when developing React-Native projects, it is an expression that is used to extract data from objects, arrays, maps and sets into their own individual variable. I’ll first show an example of object data extraction using code prior to ES6.
Below I have created a basic profile of myself inside of an object.
const myProfile = {
name:"Alex",
facebook:"Non-existent",
favColor:"Purple",
favFilm:"Aliens",
favShoes:"Timberlands"
}
const myName = myProfile.name;
const myFavColor = myProfile.favColor;Overtime this process can become cumbersome having to create individual variables for each object property, however, there is a way to simplify this, I wish I knew what it was… Oh wait, I do!
Here comes “destructuring” to the rescue, instead of using multiple lines to define each property we can use one statement/line to create multiple variables, an example is below
const {name,favShoes} = myProfile
console.log(name)Tada!
The code above basically does the same as the previous code, to put it bluntly, the code creates 2 variables called “name” and “favShoes” and sets them equal to the property of the same key name (NOTE: the variable name has to be the same as the object property key for it to work, if i entered “favShoess” instead of “favShoes” then it will return undefined instead)
An example of when I have used destructuring in my React-Native projects is when I had a modal that was going to show various amounts of information to the user and this data got passed to a component via its “props” so instead of referencing “this.props.soundFile” every time I used destructuring so I could use “soundFile” instead, below is an example.
const{onSwipeComplete,backDropPress,modalIsVisible,hangulCharacterToShow,modalText,playSoundButtonEvent,soundFileProgress,closeButtonEvent} = this.props;Look at the size of that destructuring example!
But if you look at this code example in the “title” property it has “hangulCharacterToShow” (I should have named the prop something smaller) but because of destructuring I can reference that value using just that instead of “this.props.hangulCharacterToShow”.
<Card titleStyle={ModalPopupStyle.cardContainer} title={hangulCharacterToShow}><View style={ModalPopupStyle.secondView}><View style={ModalPopupStyle.fourthView}><Text style={{fontFamily:Platform.OS==='ios'?fonts.MontSerrat:fonts.MontSerratAndroid}}>{modalText}</Text></View>
And there we go, another story finished, thank you for reading this I hope you learnt something and if you have any questions or criticisms feel free to write a comment so I can get better!
Thank you :)
