Modern Javascript I
Kay Ashaolu
There's more?
- There is a whole lot more going on with JavaScript
- Javascript is an evolving language
ECMAScript, what is that?
- ECMAScript is technically the JavaScript language standard
- Other languages have adopted some of this standard (e.g. ActionScript)
- Lays out the features of JavaScript to be agreed upon
So many versions...
- Figuring out which browser is running which version of ECMAScript could get daunting
- Browsers also do not simply implement the entire version
- A browser update could add support to single particular feature
What if you actually want to use newer features
- That person that never updates IE will not be able to execute your JavaScript
- That person that found a way to not automatically update Chrome will not be able to see your site
Solution: Transpiler
- Similar to a compiler, but converts JavaScript to JavaScript
- Converts Javascript code written in a higher version into lower version JavaScript code
- This enables developers to use newer features, and users with older browsers able to execute the code
Example ES6 Code
class Planet {
constructor (mass, moons) {
this.mass = mass;
this.moons = moons || 0;
}
reportMoons () {
console.log(`I have ${this.moons} moons.`)
}
}
Compiled ES5 Code
var _createClass = function () { function defineProperties(target, props) {...
defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Planet = function () {
function Planet(mass, moons) {
_classCallCheck(this, Planet);
this.mass = mass;
this.moons = moons || 0;
}
_createClass(Planet, [{
key: 'reportMoons',
value: function reportMoons() {
console.log('I have ' + this.moons + ' moons.');
}
}]);
return Planet;
}();
Using Babel
- Babel is a transpiler that accomplishes conversion
- There is an entire build environment, using webpack 4, babel, and npm to set up
- For this week, please use the latest version of Chrome or Firefox to run your Javascript
Without further ado
Let's learn some modern Javascript
Syntactic sugar
A lot of improvements to language focuses on changing syntax to make it easier to accomplish a certain goal
Let's talk about some of those features in ES6
Let and Scope
- Let creates a variable with scope
- Scope is a term that defines a boundary where variables live
- Scope is how you can ensure content inside a function is not affected by the outside
- Scope in Javascript is largely defined by curly brackets ('{}')
Let Example
let a = 50;
let b = 100;
if (true) {
let a = 60;
var c = 10;
console.log(a/c); // 6
console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50
Let Example explained
- The variable a is found both in the scope of this script, and in the scope of the if statement block
- The variable a within the block can be considered a different variable than the variable a outside the block
Const
- There a times where you do not want a variable to change after assignment
- For example, if you have a variable that is set to the number PI
- You wouldn't want that variable PI to change during your program
Const example
const b = "Constant variable";
b = "Assigning new value"; // shows error.
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // shows error.
LANGUAGES.push('Java'); // Works fine.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
Const example explained
- The variable LANGUAGES can not be changed
- However, what LANGUAGES points to, if it is mutable can change
Why use Let and Const
- Cleaner understanding of the lifespan of a variable
- Reduce coding mistakes by ensuring variables that shouldn't change does not
Arrow Functions
- There is a new way of defining functions
- There are a few reasons for this (and that's actually a pun, but you can look that up to figure it out)
- This new way of writing function also helps with clearly defining scope
Arrow Functions Example
function oldOne(name) {
console.log("Hello " + name);
}
// New Syntax
let newOne = (name) => {
console.log("Hello " + name);
}
Arrow Functions Example Explained
- The parameters are named in the parenthesies outside the name of the function
- Note how you assign a variable to a function (and can use let for scope)
Default parameters
- Convenient ability to assign parameters to a function a value if not specified by the caller
Default parameters example
let Func = (a, b = 10) => {
return a + b;
}
console.log(Func(20)); // 20 + 10 = 30
console.log(Func(20, 50)); // 20 + 50 = 70
let NotWorkingFunction = (a = 10, b) => {
return a + b;
}
console.log(NotWorkingFunction(20)); // NAN. Not gonna work.
Default parameters example explained
- The function Func sets a default value to the second parameter
- You can pass the second parameter or leave it blank
- However order matters. You can't define a default parameter and then the next parameter does not have a default value
For.. of loop
- Very nice way of looping through a list of elements
- No need to figure out index parameters and value conditions
For.. of loop example
let arr = [2,3,4,1];
for (let value of arr) {
console.log(value);
}
For.. of loop example explained
- The variable 'value' is assigned each element of that array once
- Note you do not have access to the index while using this construct
Spread attributes
- Ability to define a function with a variable number of parameters
- You do not have to pass an array in order to have a variable number of parameters
Spread attributes example
let SumElements = (...arr) => {
console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
for (let element of arr) {
sum += element;
}
console.log(sum);
}
SumElements(10, 20, 40, 60, 90);
SumElements(10, 20, 90);
Spread attributes example explained
- You can pass a variable number of parameters
- Those parameters are avaiable as an array inside the function