JavaScript III

INFO 253A: Front End Web Architecture

Kay Ashaolu

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 the 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.`)
  }
}

Complied 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

Any Questions?

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);
}

oldOne("Kay");

// New Syntax
let newOne = (name) => {
	console.log("Hello " + name);
}

newOne("Kay");

What did that do?

  • 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 Parameter 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.

What did that do?

  • 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...loop

  • Very nice way of looping through a list of elements
  • No need to figure out index parameters and value conditions

For...loop

let arr = [2,3,4,1];
for (let value of arr) {
	console.log(value);
}

For...loop 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 

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);

What did that do?

  • You can pass a variable number of parameters
  • Those parameters are avaiable as an array inside the function

Template Literals

  • Template literals makes adding variables to your strings much easier
  • Many Languages (like Python and Ruby) has this built into the langauge

Template Literals Example

let name = "Jon Snow";
let msg = `My name is ${name}`;
console.log(msg);

Destructing Objects and Arrays

  • Let’s just get into an example

Destructing Objects Example

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, age} = person

console.log(firstName);
console.log(age);

Destructing Arrays Example

let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr

console.log(a);
console.log(b);
console.log(d);
console.log(e);

What did that do?

  • You can do the same thing with arrays
  • Order of the array that is the result of destructuring matters
  • You can skip what you don't want by leaving that position blank

Questions?

JavaScript III - Frontend Webarch

By kayashaolu

JavaScript III - Frontend Webarch

Course Website: https://www.ischool.berkeley.edu/courses/info/253a

  • 680

More from kayashaolu