Let's Talk about 

Javascript

Johan Esteban Higuita

Software Developer at Talent.com

Bioengineer - Universidad de Antioquia

Session 2

Let's Talk about Javascript

Let's Talk about Javascript

Previous session...

  • Dynamic, Weakly typed 
  • Typescript
  • When should we you use JavaScript?
  • deno js
  • Slides in English

Let's Talk about Javascript

Hype cycle

  1. Lanzamiento
  2. Pico de expectativas sobredimenasionadas
  3. Abismo de desilución
  4. Rampa de consolidación
  5. Meseta de Productividad

5

4

3

2

1

source: bigdata-social.com

Let's Talk about Javascript

ES6

  • ECMAScript is the language behind Javascript.
  • JavaScript is the widest used implementation of ECMAScript
  • ES6 is the standard that JavaScript follows since 2015

ES5 (and older)

Supported in basically all browser, including old IE

Only var, not let or const 

ES6 (and newer): Modern JavaScript

Supported in modern browsers, can (mostly) be transpiled  

Many new features that help us write cleaner, better & faster code 

JavaScript Evolution

let - const

Arrow functions

Destructuring

Template strings

Classes 

Enhanced object literals

Modules

...

async / await

Let's Talk about Javascript

ES5 vs ES6

ES5

ES6

Javascript is a "forgiving" language

Let's Talk about Javascript

Scope

  • Determines the accessibility of variables.
  • The context in which values and expressions are "visible" or can be referenced.

Browser

Web Workers

Node.js

Window

WorkerGlobalScope

global

Let's Talk about Javascript

var - let - const

var let const
Stored in Global scope ✓ ✕ ✕
Function Scope ✓ ✓ ✓
Block Scope ✕ ✓ ✓
Can Be Reassigned? ✓ ✓ ✕
Can Be Redeclared? ✓ ✕ ✕
Can Be Hoisted? ✓ ✕ ✕

Let's Talk about Javascript

var - let - const

function fn() {

  var   textVar   = "with var";
  let   textLet   = "with let";
  const textConst = "with const";

  console.log(textVar);   // output: with var
  console.log(textLet);   // output: with let
  console.log(textConst); // output: with const
}

console.log(textVar);   // Reference Error
console.log(textLet);   // Reference Error
console.log(textConst); // Reference Error

Function Scope

Let's Talk about Javascript

var - let - const

var let const
Stored in Global scope ✓ ✕ ✕
Function Scope ✓ ✓ ✓
Block Scope ✕ ✓ ✓
Can Be Reassigned? ✓ ✓ ✕
Can Be Redeclared? ✓ ✕ ✕
Can Be Hoisted? ✓ ✕ ✕

Let's Talk about Javascript

var - let - const

if(condition) {

  var   textVar   = "with var";
  let   textLet   = "with let";
  const textConst = "with const";

  console.log(textVar);   // output: with var
  console.log(textLet);   // output: with let
  console.log(textConst); // output: with const
}

console.log(textVar);   // output: with var
console.log(textLet);   // Reference Error
console.log(textConst); // Reference Error

Block Scope

Let's Talk about Javascript

var - let - const

var let const
Stored in Global scope ✓ ✕ ✕
Function Scope ✓ ✓ ✓
Block Scope ✕ ✓ ✓
Can Be Reassigned? ✓ ✓ ✕
Can Be Redeclared? ✓ ✕ ✕
Can Be Hoisted? ✓ ✕ ✕

Let's Talk about Javascript

var - let - const

var x; // Declaration
x = "Hello World"; // Assigment

// All in one
var y = "Hello World";

Declaration: Variable is registered using a given name

 

Assigment A specific value is assigned to the variable

Can be reassigned?

Let's Talk about Javascript

var - let - const

var   textVar   = "with var";
let   textLet   = "with let";
const textConst = "with const";

//Reassignment
textVar   = "new value"; 
textLet   = "new value";
textConst = "new value"; // TypeError: Assignment to constant variable.

Can be reassigned?

Let's Talk about Javascript

var - let - const

var let const
Stored in Global scope ✓ ✕ ✕
Function Scope ✓ ✓ ✓
Block Scope ✕ ✓ ✓
Can Be Reassigned? ✓ ✓ ✕
Can Be Redeclared? ✓ ✕ ✕
Can Be Hoisted? ✓ ✕ ✕

Let's Talk about Javascript

var - let - const

var   textVar   = "with var";
let   textLet   = "with let";
const textConst = "with const";

//Redeclaration
var textVar  	= "new value"; 
let textLet   	= "new value"; //SyntaxError: Identifier 'textLet' has already been declared
const textConst = "new value"; //SyntaxError: Identifier 'textConst' has already been declared

(in the same scope)

Can be redeclared?

Let's Talk about Javascript

var - let - const

var let const
Stored in Global scope ✓ ✕ ✕
Function Scope ✓ ✓ ✓
Block Scope ✕ ✓ ✓
Can Be Reassigned? ✓ ✓ ✕
Can Be Redeclared? ✓ ✕ ✕
Can Be Hoisted? ✓ ✕ ✕

Let's Talk about Javascript

Hoisting

function hello(name){
  console.log(`Hello ${name}!!`);
}

hello("Peter"); //Hello Peter!!

Variables and functions declarations are physically moved to the top of the current scope.

hello("Peter"); //Hello Peter!!

function hello(name){
  console.log(`Hello ${name}!!`);
}

✓

✓

Let's Talk about Javascript

Hoisting

var name = "Peter";
var age  = 24;

With Variables

var name;
var age;
name = "Peter";
age  = 24;

Hoisting

Let's Talk about Javascript

Hoisting

console.log(textVar); 	// undefined
console.log(textLet); 	// ReferenceError: textLet is not defined
console.log(textConst);	// ReferenceError: textConst is not defined

var   textVar   = "with var";   
let   textLet   = "with let";   
const textConst = "with const";

Let's Talk about Javascript

var - let - const

var let const
Stored in Global scope ✓ ✕ ✕
Function Scope ✓ ✓ ✓
Block Scope ✕ ✓ ✓
Can Be Reassigned? ✓ ✓ ✕
Can Be Redeclared? ✓ ✕ ✕
Can Be Hoisted? ✓ ✕ ✕

Let's Talk about Javascript

Shadowing

Variable shadowing occurs when a variable is declared in certain scope has the same name defined on other scope

These variables can co-exist with the same name

const name = "neuvoo";

if(true){
    const name = "talent";
    console.log(name); // talent
}

console.log(name); // neuvoo

Let's Talk about Javascript

Strict Mode

Converting mistakes into errors

'use strict';
num = 10;  //ReferenceError
                       
'use strict';
var undefined = 15; // TypeError
var Infinity  = 25; // TypeError
'use strict';
var o = { p: 1, p: 2 }; // Syntax error
function sum(a, a, c) { // !!! syntax error
  'use strict';
  return a + a + c; // wrong if this code ran
}
'use strict';
var sum = 015 + 110; //Syntax error

Makes it impossible to accidentally create global variables.

use of reserved words in variable declaration

Requires that all properties named in an object literal be unique.

A leading zero prefix a syntax error.

Requires that function parameter names be unique.

Let's Talk about Javascript

conclusion

Let's Talk about Javascript

More topics...

  • Functional programming
  • ES6
  • Immutability
  • Data types
  • Node
  • Scope, hoisting, closures
  • Asynchronous programming
  • Referenced values
  • Web workers
  • Iterators
  • Memory managment
  • Functions
  • Promises & Callbacks
  • IA APIs

Thank you!