JavaScript, ES6 and ES2015
Sat Aug 10, 2024
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.
What is ES6 anyway?
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.
forEach
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
map
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]
filter
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}]
find
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"}
every
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
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
reduce
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
