{"id":4694,"date":"2021-07-28T12:00:00","date_gmt":"2021-07-28T10:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/introduction-to-es6-javascript\/"},"modified":"2022-02-07T14:24:06","modified_gmt":"2022-02-07T13:24:06","slug":"introduction-to-es6-javascript","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/introduction-to-es6-javascript\/","title":{"rendered":"Why JavaScript ES6 and Its Successors Are So Great"},"content":{"rendered":"

If you\u2019ve done any programming in JavaScript<\/a> at all, you probably know what the \u2018var\u2019 keyword does. But how about the \u2018const\u2019 keyword? Maybe you\u2019ve heard of it. Maybe you use it because you know it\u2019s a new feature, but aren\u2019t exactly sure why.<\/p>\n

Just like the \u2018var\u2019 keyword, \u2018const\u2019 helps you define variables in JavaScript. However, \u2018const\u2019 is a newish feature and offers more fine-grained control over the behavior of your application\u2019s variables. This new keyword is only one part of a much broader set of new additions to JavaScript that have become available to use with ES6.<\/p>\n

In this article, I’m going to explain just what JavaScript ES6 can do and why you should get excited. In fact if you don’t already, you’ll be looking to learn JavaScript as quickly as possible<\/a> in order to get your hands on it.<\/p>\n

First we’re going to look at what ES6 is exactly, and then give some background to it. We’ll then talk about transpiling, as well as some of the other cool features that this standard brings to the table. Finally, we’ll share some key resources if you want to go and learn more about ES6, and where to go next.<\/p>\n

If you’d like to skip ahead to one of the sections of the article directly, feel free to use the clickable menu:<\/p>\n

    \n
  1. What exactly is ES6?<\/a><\/li>\n
  2. A little history<\/a><\/li>\n
  3. A note about transpiling<\/a><\/li>\n
  4. Common post-ES5 JavaScript features you should know<\/a><\/li>\n
  5. Where can I learn more about ES6?<\/a><\/li>\n
  6. Wrap-up<\/a><\/li>\n<\/ol>\n

    1. What exactly is ES6?<\/h2>\n

    Technically speaking, ES6 is a standard that was released in 2015. It tells companies that make browsers how exactly they should make JavaScript work in their respective browsers. \u201cBut,\u201d you might ask, \u201cJavaScript is JavaScript\u2026 Why would it work differently across browsers?\u201d\u2026<\/p>\n

    2. A little history<\/h2>\n

    Back in the late 1990s, just like today, we had multiple companies making their own versions of browsers. When JavaScript was invented, each company had its own idea about how exactly JavaScript code should act in their respective browsers. Because this kind of inconsistency is unsustainable, ECMA International, a standards organization, came forward and basically unified all the JavaScript implementations across all browsers. ECMA said, \u201cIf you want to make a language that runs on your browser, you should make it behave according to our guidelines so that JavaScript code that a developer writes for one browser will work the same on other browsers.\u201d<\/p>\n

    *Keep in mind, the set of specifications created by ECMA is called \u201cECMAScript\u201d\u2014 and JavaScript is an implementation of it. This is why you may hear people refer to JavaScript as \u201cECMAScript\u201d.<\/em><\/p>\n

    Over the years, ECMA has been tweaking its guidelines little by little\u2014adding requirements for new features\u2014meaning that companies that make JavaScript engines have to implement those features in order to keep up. Each time ECMA releases a new set of specifications, companies must change their JavaScript implementations\u2014meaning they have to add the new features added by ECMA.<\/p>\n

    In June of 2015, ECMA released a major new set of specifications that we know as ES6. We also know it as ES2015\u2014the year it was released. In this major release, there were many new requirements added with the intention of bringing JavaScript up to date with modern programming standards.<\/p>\n

    Since 2015, ECMA has been releasing a new version of its specifications every year. Each June for the past three years, new requirements have continued to be added. So while you\u2019ll hear about ES6 the most (as it brought the biggest changes), there have since been three releases as of the writing of this article: ES2016, ES2017, and ES2018\u2014each adding new requirements for JavaScript features. The current version is ECMAScript 2018 Language Specification<\/a>. Take a look if you have the time and see just how much there is to JavaScript.<\/p>\n

    3. A note about transpiling<\/h2>\n

    What happens if you write some ES6 code for an application and your users want to use it but they haven\u2019t updated to the latest version of the browser that implements ES6? Let\u2019s say your users still use IE8. IE8 does not implement ES6. Will your ES6 code work on their browser? No, it won\u2019t. That\u2019s why we have \u201ctranspilers\u201d. In this case, a transpiler basically takes your ES6 code and converts it to pre-ES6 code (\u201cES5\u201d). It then sends the transpiled JavaScript code so that older versions of browsers that only know ES5 can understand it.<\/p>\n

    A transpiler called Babel is the de facto standard for transpiling newer JavaScript code to ES5. As a developer, you probably won\u2019t need to run Babel in order to run your own apps because you\u2019re probably using the most up-to-date browsers available. However, if you want to distribute your application written in ES6 to the world, you\u2019ll have to remember that not everyone uses the most up-to-date browsers. You\u2019ll therefore need to use a transpiler to maximize the number of users that can access your application.<\/p>\n

    In most cases, if you\u2019re using any kind of newer JavaScript\u00a0framework like React<\/a> or Angular, the transpiler, along with all the code needed to run it, will be included in the \u201cstarter code\u201d. This means that you won\u2019t have to worry about implementing the transpiler yourself because the developers that built the JavaScript frameworks<\/a> and the starter code have already done the work for you. You can just start coding in ES6 without even having to think about transpiling. It\u2019s very convenient.<\/p>\n

    So without further ado, let\u2019s dive in to some actual ES6 code.<\/p>\n

    4. Common post-ES5 JavaScript features you should know<\/h2>\n

    Here are some of the most common features of ES2015 as well as some others from ES2016 – ES2018.<\/p>\n

    Many features that we associate with newer JavaScript functionality nowadays came in with ES6. But there are lots of other features that came in with ES2016 and after. In this section, I\u2019ll show you many common features that you\u2019ll likely be seeing in existing code bases. Keep in mind that not all of these features came in with ES6, but with your transpiler, you\u2019ll be able to use them all because it will convert them back to ES5.<\/p>\n

    Keyword “const”<\/h3>\n

    Sometimes we want to make a variable that we don\u2019t want to change (AKA a \u201cconstant\u201d)\u2014either by another developer or by ourselves. ES6 gives us access to \u2018const\u2019. When we create a constant, if we ever try to re-assign the value, we\u2019ll get an error. Not only is this useful, but it is becoming more and more common to use \u2018const\u2019 in place of \u2018var\u2019 when we have a variable that we don\u2019t want to change (again, we call it a \u201cconstant\u201d because it is not \u201cvariable\u201d!).<\/p>\n

    Below, you can see how to create and change variables using the \u2018var\u2019 keyword:<\/p>\n