I recently learned ES6, so I’m making some notes about it.
It has methods similar to Ruby which makes it relatively easy to remember.
The official name of ES6 is ECMAScript
. It’s pronounced as ECMAScript
.
As the “6” suggests, ES6 refers to version 6 of ECMAScript
.
ECMAScript
is the standard specification.
JavaScript
is its implementation.
ES6 is simply referred to as next-generation JavaScript
.
You might occasionally hear about ES2015
or ES2016
, which refer to ES6
and ES7
respectively.
This naming convention was adopted to include the year of specification, resulting in these names.
ES6
was created in 2015, so it’s called ES2015
.
ES7
was created in 2016, so it’s called ES2016
.
It’s quite confusing.
Since ES6
code doesn’t run on all browsers, tools like Babel
are used to convert it to ES5
, which runs on almost all browsers.
First, let’s write a traditional For Loop
:
var numbers = ['1', '2', '3'];
for (var i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Hmm… It’s quite cluttered, especially after working with Ruby. You have to initialize a variable, check the length of numbers, increment it, and so on.
If we rewrite this using forEach
:
var numbers = ['1', '2', '3'];
numbers.forEach(function(number) {
console.log(number);
});
This is much cleaner than before.
For calculating a sum:
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function(number) {
sum += number;
});
sum;
=>6
First, let’s write a traditional For Loop
:
var numbers = ['1', '2', '3'];
var doubledNumbers = [];
for (var i = 0; i < numbers.length; i++) {
doubledNumbers.push(numbers[i] * 2);
}
doubledNumbers;
=>
[2,4,6]
Now let’s rewrite using map
. The advantage of map
is that you don’t need to prepare a new array - map
does that automatically. While this is common in Ruby, having JavaScript handle this is convenient.
var numbers = ['1', '2', '3'];
var doubled = numbers.map(function(number) {
return number * 2;
});
doubled;
=>[2,4,6]
A method to extract certain elements from objects:
var users = [
{ name: 'nobita', test: 0},
{ name: 'takeshi', test: 40},
{ name: 'dekisugi', test: 100}
];
var tests = users.map(function(user) {
return user.test;
});
tests;
=> [0,40,100]
First, let’s write a traditional For Loop
:
var products = [
{ name: 'Cucumber', type: 'Vegetable' },
{ name: 'Banana', type: 'Fruit' },
{ name: 'Celery', type: 'Vegetable' },
{ name: 'Orange', type: 'Fruit' },
];
var filteredProducts = [];
for (var i = 0; i < products.length; i++) {
if (products[i].type === 'Fruit') {
filteredProducts.push(products[i]);
}
}
filteredProducts
=>
[{"name":"Banana","type":"Fruit"},{"name":"Orange","type":"Fruit"}]
Now let’s rewrite using filter
:
var products = [
{ name: 'Cucumber', type: 'Vegetable' },
{ name: 'Banana', type: 'Fruit' },
{ name: 'Celery', type: 'Vegetable' },
{ name: 'Orange', type: 'Fruit' },
];
products.filter(function(product){
return product.type === 'Fruit';
});
=>
[{"name":"Banana","type":"Fruit"},{"name":"Orange","type":"Fruit"}]
A more complex condition: items that are vegetables, have a quantity greater than 0, and a price less than 10
var products = [
{ name: 'Cucumber', type: 'Vegetable', quantity: 0, price: 1 },
{ name: 'Banana', type: 'Fruit', quantity: 10, price: 15 },
{ name: 'Celery', type: 'Vegetable', quantity: 30, price: 9 },
{ name: 'Orange', type: 'Fruit', quantity: 3, price: 5 },
];
products.filter(function(product){
return product.type === 'Vegetable'
&& product.quantity > 0
&& product.price < 10;
});
=>
[{"name":"Celery","type":"Vegetable","quantity":30,"price":9}]
First, let’s write a traditional For Loop
:
var users = [
{ name: 'nobita' },
{ name: 'takeshi' },
{ name: 'dekisugi' },
];
var user;
for (var i = 0; i < users.length; i++) {
if (users[i].name === 'nobita') {
user = users[i];
}
}
user;
=>
{"name":"nobita"}
Using find
:
var users = [
{ name: 'nobita' },
{ name: 'takeshi' },
{ name: 'dekisugi' },
];
var user;
users.find(function(user){
return user.name === 'nobita';
});
user;
=>
{"name":"nobita"}
Finding a post related to a comment:
var posts = [
{ id: 1, title: 'Fun Summer' },
{ id: 2, title: 'Sad Winter' }
];
var comment = { postId: 2, content: 'Cheer up'};
// Create a function to find a post related to a comment
function postForComment(posts, comment) {
return posts.find(function(post) {
return post.id === comment.postId;
});
}
postForComment(posts, comment);
=>
{"id":2,"title":"Sad Winter"}
First, let’s write a traditional For Loop
:
var computers = [
{ name: 'Apple', ram: 24 },
{ name: 'Dell', ram: 4 },
{ name: 'HP', ram: 32 },
];
// Looking for software that requires 16GB RAM
// Flag for if all computers can run
var allComputersCanRun = true;
// Flag for if some computers can run
var someComputersCanRun = false;
for (var i = 0; i < computers.length; i++) {
var computer = computers[i];
if (computer.ram < 16) {
allComputersCanRun = false;
} else {
someComputersCanRun = true;
}
}
'---'
allComputersCanRun
someComputersCanRun
=>
True
---
False
True
Using every
:
every
determines if all elements satisfy the condition. If even one returns false, the result is false.
var computers = [
{ name: 'Apple', ram: 24 },
{ name: 'Dell', ram: 4 },
{ name: 'HP', ram: 32 },
];
// Looking for software that requires 16GB RAM
computers.every(function(computer) {
return computer.ram >= 16;
});
=>
False
some
determines if at least one element satisfies the condition. If even one returns true, the result is true.
var computers = [
{ name: 'Apple', ram: 24 },
{ name: 'Dell', ram: 4 },
{ name: 'HP', ram: 32 },
];
// Looking for software that requires 16GB RAM
computers.some(function(computer) {
return computer.ram >= 16;
});
=>
True
First, let’s write a traditional For Loop
to calculate a sum:
var numbers = [10, 20, 30];
var sum = 0;
for (var i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
=>
60
Now let’s rewrite using reduce
:
var numbers = [10, 20, 30];
var sum = 0;
numbers.reduce(function(sum, number) {
return sum + number;
}, 0);
=>
60
0 is the initial value.
The callback function simply performs an addition
, so 0+10 is executed and returns 10.
Then 10 is passed to the callback function, resulting in 10+20=30.
Finally, 30 is passed to the callback function, resulting in 30+30=60.
Using reduce
to combine non-numeric values:
var primaryColors = [
{ color: 'red' },
{ color: 'yellow' },
{ color: 'blue' }
];
primaryColors.reduce(function(previous, primaryColor) {
previous.push(primaryColor.color)
return previous;
}, []);
=>
["red","yellow","blue"]
Using reduce
to check if the number of opening and closing parentheses in ((())))
is balanced.
We consider 0 to be balanced:
function balancedParens(string) {
return !string.split('').reduce(function(previous, char){
if (previous < 0) { return previous;}
if (char ==='(') { return previous +1; }
if (char ===')') { return previous -1; }
}, 0);
}
balancedParens(')(')
=>
false