DEV Community

Cover image for ES6 - A beginners guide - Welcome
Stefan Wright
Stefan Wright

Posted on • Updated on

ES6 - A beginners guide - Welcome

What is ES6? How can I use it? Follow this series to learn more.

Welcome

For my employment we have been asked to learn/revisit ES6 as we begin to transfer the JS in our codebase into ES6, if you're here then its likely you already know what ES6 is, if you don't...let me summarise below.

What is ES6?

Well, ES6 stands for ECMAScript 6 which has been around now since June 2015, it is also known as ECMAScript 2015. ECMAScript itself has been around since June 1997 with an annual review of the standards in place. ECMAScript was invented to standardize JavaScript meaning that browsers could be built around that standard ensuring support of the different levels. ES6 introduces us with some new tools which I will go into in more detail in this series, for example:

  • Classes
  • Arrow Functions
  • New Variable scoping (var, let, const)
  • Template Literals
  • Object and Array Destructuring
  • Default Parameters
  • Rest and Spread Operators

Many ES6 tutorials will also cover various Array "helpers". I'll be looking to touch on these too as they are frequently used, but I have found often referred back to as a reminder of how to write it "properly". So those are:

  • forEach
  • map
  • filter
  • find
  • every/some
  • and reduce (save the hardest til last!)

In this series, for each of the above I will try to include a variety of examples and real-world use cases

Discussion (13)

Collapse
hssanbzlm profile image
Hssan Bouzlima

Nice thanks !
I want to know which tool did you use to create this kind of code sketch in the cover image above ?

Collapse
stefanwrightcodes profile image
Stefan Wright Author

Hey @hssanbzlm check out carbon.now.sh/ I use it for any technical documentation, I'll be using it a lot in the series to follow this post :)

Collapse
thumbone profile image
Bernd Wechner

I'm puzzled. What niches is carbon.now.sh filling? Given Markdown, here, on Github, on StackOverflow and many other places now thanks to standards set by such big players all take Markdown with the three backticks tag and language identifier and so I can paste code directly into my text - no third party site needed - it renders nicely, it scales nicely , it meets accessibility standards etc.

I mean carbon.now.sh looks nice. But what niche is it filling? Why would I want images? That can't be searched, read out and present a good few scaling issues across desktops and mobiles ...?

Thread Thread
stefanwrightcodes profile image
Stefan Wright Author • Edited

You know, I think your points are all valid around why we should not use the images and I took that on board and I did switch to using Markdown in my postings.
Sure I knew Markdown existed in the likes of those big sites but then the editors on those sites provided them as WYSIWYG editors and so this is a learning curve to write in Markdown. I hadn't used Markdown before I started writing here and so I used the images because, as you say, they looked nice and i'd seen them on plenty of other article I had read here before I started posting.
With the documentation written for work in the past I hadn't really needed to work about scaling, but then perhaps I should change how I work on any documentation I produce to include accessibility concerns that perhaps I have been naive too in the past :). As for searching, in work pieces the images have always been cross-referenced with links to code within our code repo's

Thread Thread
thumbone profile image
Bernd Wechner

Fret not, I too have just learned about accessibility issues here on dev.to in the last week or two myself!

I have used markdown on Stack Overflow and Github for some while though. But am learning more and more about it over time as well.

Thread Thread
thumbone profile image
Bernd Wechner

But I take it on board too, the accessibility issues and will start apply metrics to my work over time, but also think it important as more and more of us learn about them that we politely remind others who haven't noticed yet, just as has happened here.

Not least because when I read a recent post on accessibility here (there are quite a few - I just searched again) I remember being struck by how some of them at least just made all round good sense - by which I mean benefit everyone and are not just about accommodating an arguably small too-easily neglected demography of people with special needs. But special needs are not even small demographics I worry. I worry that is/was a past illusion of my able bodied self ... I came across a colleague in office recently, young too, who runs their screen at 125% zoom (and we had to redesign a dialog box in our software because it didn't fit on this staff members screen!). And with awareness it becomes easy to spot more and more people around us that like to zoom in on websites, or are colour blind, or, or, or. It's really not wildly uncommon ...

Thread Thread
stefanwrightcodes profile image
Stefan Wright Author

I totally get that, a previous company redesign their customer facing portal to "match the brand colors" and they had red & green CTA's (Call to Actions for clarity), I raised the query in the demo which button was which. To which I received very bemused looks...I am colourblind and so similar shades of colours such as red & green (in this case they were both slightly desaturated) will appear the same to me. They never actually changed it :( despite me complaining about accessibility requirements they advised me to modify the contrast on my monitor!

We're in 2021, accessibility needs to be accounted for and I for one know I need to improve there

Collapse
hssanbzlm profile image
Hssan Bouzlima

We are waiting for it ! Thank you

Thread Thread
stefanwrightcodes profile image
Stefan Wright Author

No worries, I just uploaded the second part in the series

Collapse
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

Nice write up! Looking forward to the series

Collapse
stefanwrightcodes profile image
Stefan Wright Author

Thanks @mrinasugosh

Collapse
tomasz_frankowski profile image
Tomasz Frankowski

Question- why not learn ECMA 12 (2021)?

Collapse
stefanwrightcodes profile image
Stefan Wright Author

@tomasz_frankowski good question. This series is based primarily around the learning material I have been asked to review for my employment and me wanting to share that knowledge. Using versions higher than ES6 of course has its benefits when it comes to reducing bloat in code or utilising new functionality and I will hopefully get around to going through some of the newer ES branches too but for work I believe we are concentrating on ES6 for now