What is JavaScript
In 1997, JavaScript was created to bring life to web pages, letting a developer dynamically change content and make webpage content seem less static. In JavaScript, we use scripts that can be written right in a web page’s HTML and run automatically as the page loads. JavaScript was initially a client-side scripting language, meaning that it was only used on the user’s side of the browser. This included sending forms, creating cookies, and displaying text and images.
Today, JavaScript can run not only in the browser, but also on the server. JavaScript engines like V8, allow us to create fully functional applications with servers and databases ONLY in JavaScript.
Then what’s this ES stuff?
ECMAScript (or ES) is JavaScript standardized by Ecma (European Computer Manufacturers Association) International. The ES specification will help you create a scripting language, like React and JSX, while the JavaScript documentation will teach you how to use the scripting language. You can think of JavaScript as a dialect of the ES language; like how French in Louisiana and French in Haiti are both French, but they’ve deviated enough from it’s parent language to be distictint from it.
We use ES’s standardization in order to make sure that JavaScript performs and behaves as similarly as possible across browsers. One browser might understand your JavaScript differently than another, in the same way that local colloquialisms from Haiti might not be understood the same way in Louisiana.
Currently, there are 10 versions of ES, with Ecma International planning on yearly releases. When a new version of ECMAScript comes out, JavaScript engines don’t integrate the new version immediately or even all in one go. So keep in mind that just because you can run ES10 code on one browser, doesn’t mean that it’s applicable to all of them!
What’s New In JavaScript
In 2015, Ecma International released the first updated version of ECMAScript in 6 years; Rebranding from ES6 to ES2015 to keep track of the yearly releases (with most developers using the terms interchangeably). Some of the major changes to JavaScript since then have included:
Const and Let
Const is a new keyword in for declaring variables. It is immutable meaning that the variable can’t be reassigned, making it much more powerful than ES5’s var. let, on the other hand, can be reassigned and take new value; making it mutable. const and let give developers way more control over their variables by allowing devs to decide if the variable they’re creating is going to change later on while also preventing your code from bugging out with an accidental reassignment.
//ES5 Syntax
var myVariable = "Hello World";
//ES6 Syntax
const myVariable = "Goodbye World";
// If you tried to do something like:
myVariable = "Something Else";
// you would get an error as const is immutable
let anotherVariable = "Another One";Arrow functions
Arrow functions allow a short syntax for writing function expressions where we don’t need the function keyword, the return keyword, and the curly brackets.
//ES5 Syntax
function greeting(name) {
return "Hello from" + name;
}
//ES6 Syntax
const greeting = (name) => `Hello from ${name}`;
console.log(greeting("Graphem Solutions"));
//both functions return "Hello from Graphem Solutions"The code is super clean and is implicit, meaning that the keywords return and function are implied and assumed by JavaScript. return and curly brackets are only necessary if the function spans more than one line. For example,
const sumMyNumbers = (number1, number2) => {
let mySum = number1 + number2;
mySum = mySum + 5;
return mySum
};
console.log(sumMyNumbers(1,2))
//this returns "8"You can also use Arrow functions with map, filter, and reduce built-in functions.
let array = [0, 1, 2, 3, 4]
//ES5 Syntax
array = array.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
})
console.log(array)
//ES6 Syntax
array = array.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(array)
//Both of these return "10"Destructing
Destructing just made working with React props and other Objects or Arrays a million times easier. Destructing allows for taking object properties and their values and placing them in variables without having to individually assign each property.
//ES5 Syntax
var myObject = {
first: "item 1",
second:"item 2",
third: "item 3",
}
var first = myObject.first;
var second = myObject.second;
var third = myObject.third;
console.log(first, second, third)
//ES6 Syntax
const myObjectES6 = {
firstES6: "item 1",
secondES6:"item 2",
thirdES6: "item 3",
}
//If you'd like to have the property stored as a different variable than the property name, you can declare it with property Name:yourVariable in the brackets
let {firstES6, secondES6, thirdES6:myThird} = myObjectES6;
console.log(firstES6, secondES6, myThird)
//Both objects return "item 1 item 2 item 3"With ES5, each variable has to be extracted one at a time. With ES6, all we have to do is wrap our variables in curly brackets (or square brackets if working with an Array) and JavaScript handles the rest.
Promises
Promises allow us to write asynchronous code. This is super handy for fetching data from an API or for functions that need to wait for data from another function or method without going into Callback Hell.
//ES5 Syntax
firstStep(function(response) {
secondStep(response, function(responseA) {
thirdStep(nextResponse, function(responseB) {
console.log('responseA): ' + responseB);
}, error);
},error);
},error);
//ES6 Syntax
firstStep().then(function(responseA) {
return secondStep(responseA);
}).then(function(responseB) {
return thirdStep(responseB);
}).then(function(responseC) {
console.log('responseC: ' + responseC);
}).catch(error);As you can see, it’s much easier to see what’s coming next in all of the steps! Promises allow for increased legibility in your code, allowing it to be closer to how you would explain verbally your step-by-step instructions.
Classes
JavaScript is object-oriented programming language, but is not a class-based object-oriented language like Java, C++, C#, etc. The introduction of classes in ES6 gets us just a bit closer. In JavaScript, Classes are essentially templates for an Object.
class Computer {
constructor(cpu, year, brand) {
this.cpu = cpu;
this.year = year;
this.brand = brand;
}
aboutComputer() {
return `My Laptop is a ${this.year} ${this.brand} and has a ${this.cpu} CPU`
}
}
//Now you can use the Computer class to create Computer objects:
let myComputer = new Computer("Intel", 2020, "MacBook Pro");
console.log(myComputer.aboutComputer());
//Returns "My Laptop is a 2020 MacBook Pro and has a Intel CPU"Async/Await
ES8 (EcmaScript2017), brought us Async/Await. Async and await enable asynchronous, promise-based behavior in a cleaner layout. When using the word async, it means that the function always returns a promise. await makes JavaScript wait until the promise resolves with results or an error.
function myEmoji() {
return new Promise(resolve => {
setTimeout(() => {
resolve('?');
}, 5000);
});
}
async function msg() {
const msg = await myEmoji();
console.log('My Emoji Is', msg);
}
msg(); // My Emoji Is: ? <-- after 5 secondsThese are only a few of the major upgrades to JavaScript’s library, you can read all of the updates from Ecma International here. With Emca International committing to yearly updates, JavaScript is looking like it will gain more capability, functionality, and tools for you as a developer to use in your Web Applications in the coming years.
