What is ES6?

Nobuyuki Tono
Nov 1 · 7 min read
Photo by Chris Ried on Unsplash

Hi, I’m Japanese and also a student in Vancouver, Canada.I’m learning programming to become a web developer and now, what I’m studying is one of the most popular language JavaScript.Before I came Canada, I didn’t have any experience in Coding(To be honest I didn’t know what JavaScript is at all.)I wrote this article not only to understand what I learned in the class, but also I hope this article will help someone who want to learn JavaScript or who doesn’t know anything about programming to understand what Javascript is, how to use it and some new features in ES6 or ES2015.As you may already realized now, this articles is for the beginner, not for people who already know about JavaScript well.So if you so, this is not your place to spend your precious time.If you are not, please continue to read, I’ll do my best to explain Javascript especially new features in ES6 .

I’m sorry I wrote above that this is for beginner, but before continue, there is one requirement at least to start learning JavaScript.You should know about basics of HTML5 and CSS3 to use JavaScript.I won’t explain about HTML5 and CSS3 in this article.(Maybe someday I will write article about HTML5 and CSS5 I’m not sure though…)

What is Javascript?

Before I start to explain new features in ES6, I’d like to explain first about JavaScript simply to those who really don’t know anything about it , what Javascript is, what it dose and how to use it.Javascript has become very popular language because it works in Web browsers(front-end) and enable web site to be interactive , but now, it also used in back-end side(sever-side).The best way to understand what Javascript is to actually write codes by yourself.First, open your code editor whatever you like(even plane text edit can be used ), if you don’t , I recommend a Visual Studio Code.It’s free and easy to use.Are you ready coding?Let’s coding!! There is a tradition among programmers. That is called “Hello World” program.When you learn whatever new program languages, what you will do first is to write a “Hello World” program.So, I follow that tradition and teach you how to write “Hello World ” program in JavaScript.

  1. Open a Code editor then create an “index.html”
  2. In index.html, create a <script> tag inside a <body> tag like this
<body>  <script>  </script></body>

3. Inside a <script>tag write a code “ alert(“Hello World”) ” like this

<body><script>
alert("Hello World");
</script>
</body>

That’s it. Congratulations you wrote your first JavaScript program!Pretty easy right?Open your index.html in your browser and you’ll see dial box pop up showing “Hello World” like this.

This “Hello World” program is just show you what Javascript is and how to use JavaScript.So, it’s Useless Program I would say.If you want to learn more basics of Javascript and make a real program,I recommend a few web site which good for beginner to learn basics.

W3School
freeCodeCamp

Both websites are really good websites to learn programming language.I’m using them a lot.

ES6

In this topic I’d like to introduce some new features in ES6 to you.ES6 is a new version of JavaScript and from ES6, there are some new features you should know if you want to learn JavaScript.

  1. New keywords “const” and “let”
    Before ES6, there is only one way to declare a variable by using “var” and there are only two scopes ,global scope and function scope, in JavaScript.But after ES6, two new ways have been added in JavaScript .“const” and “let”.
// "var" has global scope(it can be accessed from anywhere in your JS program) and function scope(it can be only accessed inside a function)// 1. Grobal Scope
var x = 5; // x is global variable
function changeX(){
x = 3 // this line assign 3 to x
}
changeX();
console.log(x) // now x is 3;
// 2.Function Scope
function myFunction(){
var x = 5; // x is function scope
}
console.log(x) // this output x is not defined
// 3. block scope "let"
{
let x = 5;
console.log(x) // this output x = 5
}
console.log(x) // but this output x is not defined because x is
//declared inside a block;
// 4. const
// variable declared by const is not mutable(constant)

const x = 5;
x = 3; // this cause an error, you cannot assign new value to
variable declared by const key word.

// Difference between "let" and "const" is that variable declared by "let" is mutable and variable declared by const is not mutable.

2. Arrow Function
Arrow function allows you to write your function code short way which makes your code more readable than writing normal function.

// Normal function
function myFunction(name){
return "Hi " + name;
}
// Arrow function
const myFunction = (name)=> "Hi " + name;
// if code is one line, you can omit "return" key word.But if you // use{}, you need "return"const myFunction = (name)=>{
return "Hi " + name
}

3. Template literals
Template literals allow you to declare string in a new way.

// when you use "string" in Javascript, you need to use "" or ''.
let greeting = "Hello" or 'Hello'
// after ES6 you can use ``
let greeting = `Hello` // this is same as "Hello" and 'Hello'

But, what I think make template literals useful is that it makes declaring string with variable easy.I explain what I mean below.

// Assume you want to make a function that return greeting with name // and you want to display like this
// Hello name
let name = "John";
const greeting = (name)=> "Hello, " + name;
you need "+" operator to concatenate string and variable(string) and if you want to add space between string and string, you need to add space like this "Hello ".// ES6
let name ="John";
const greeting = (name) => `Hello, ${name}`;

What do you think? It’s really nice right ? You will appreciate this feature when you are dealing with complex string(ie. string that has multiple variable)

4. Classes
You can declare classes by using “class” keyword in JavaScript.Classes has constructor method which is used when class is initialized and inside a constructor method, it can have properties. Classes also can have function too.I show you how to declare classes below.

// first you need to declare classclass MyClass{
constructor(name){
this.name = name
}
greeting(){
return `Hello, this.name`}
}

// next step is initializing MyClass. Use "new" key word.
const myClass = new MyClass("John")
// Above line create instance of MyClass and "this.name" is set to // "John"
// To use function that MyClass has, all you have to do is like
// this.
myClass.greeting(); // this returns "Hello, John".

Good point to use classes I think is that once you master how to use class in your program, it make your program is more organized and clean.Classes makes your code reusable in anywhere your program , so you don’t need to write same function again in your program.

5. Rest Parameter
Rest parameter is a new way to handle parameter in a function.It allow you to use as much parameter as you want.You can use “rest parameter” using “…”.

// normal parameter
function myFunction(x, y, z){
return x + y + z
}
myFunction(4,5,6); // this returns 15// Rest parameter
function myFunction(...input){
return input
}
myFunction(1,2,3,4,5,6,7,8); // this returns [1,2,3,4,5,6,7,8] array
So, you can do this
let total = 0
function myFunction(...input){
for(i = 0; i< input.length;i++){
total += input[i]}
return total
}
myFunction(1,2,3,4,5,6,7,8) // this returns total = 36

6. Spread Operator
“Spread Operator” is similar to “rest parameter” in terms of using “…”.But, they are different thing.

// 1. concatenate array // without spread operator
let array1 = [1,2,3];
let array2 = [4,5];
array1 = arrayi1.concat(array2)
console.log(array1) // this shows [1,2,3,4,5];
// with spread operator
let array1 = [1,2,3];
let array2 = [4,5];
array1 = [...array1,...array2];
console.log(array1) // this shows[1,2,3,4,5]
// 2. copy array// without spread operator let array1 = [1,2,3];
let array2 = array1;
console.log(array2) // this show [1,2,3]
it looks fine.You can copy array1.But if you change array2 it also change original array1 too. array2.push(4);
console.log(array2) // this show [1,2,3,4]
console.log(array1) // this show [1,2,3,4] too.

Maybe, you don't want to do that.In that case, It's better to use spread operator.
// with spread operator
let array1 = [1,2,3];
let array2 = [...array1];
console.log(array2) // this show [1,2,3];
array2.push(4);
console.log(array2) // this show [1,2,3,4];
console.log(array1) // this show [1,2,3]

Thank you for reading this article until the end. There are more new features in ES6 that I didn’t explain in this article(Don’t worry, my classmates also wrote article about ES6 too, so if they allow me to put their article link ,I’ll put them here then you can learn more!!!).Do you think this article is useful for you to learn ES6?If you think so, I’m really happy.I did my best to write this article(though it may not seem like, but I really did).In this article, I explained JavaScript and some ES6 new features in a simple way as if I knew about JavaScript a lot.But as I wrote in the beginning, I’m still learning JavaScript now like you.Maybe, when I learn more about JavaScript, I may write new one for helping both me and you who want learn programming.
Thank you for reading.See you next time!!!!.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade