Javascript

essentials

Javascript

interpreted language
typically runs in a browser
can run on a system
*1995

node.js

environment for running Javascript
doesn't need browser
using V8

➡️ Hello world

create file index.js with Javascript code
execute file using: node index.js

console.log('Hello world');

Variables

~~var~~
let, const

let name = 'Martin';
name = 'Lucas';
const surname = 'Nuc';

Basic types

number
string
boolean
null, undefined
objects

Strings

// 1) double quotes
let name = "Martin";

// 2) single quotes
let name = 'Martin';

// 3) backticks
let name = `Martin`;

let fullName = `${name} Nuc`;

Strings

let name = 'Martin';
console.log(name.toUpperCase());

let characters = name.split('');
console.log(characters); // ['M', 'a', 'r'...]

have methods

null, undefined

undefined = value was not set
null = "nothing"
- value set but it means "nothing" on purpose

Objects

later...

Loops

for
while
do while...

Conditions

let a = 5;
if (a === 5) {
    console.log('is five');
}

for (let i = 0; i < 10; i++) {
    // ...
}

let i = 0;
while(i < 10) {
    // ...
    i++;
}

Use === for comparison

Combine conditions

if (isLoggedIn && (isWriter || isAdmin)) { ... }

if (user && product) { ... }

Default value

// defaults from any falsy value
let pageSize = userPageSize || 10;
let favoriteCoffee = usersFavorite || 'No favorite coffee';

// defaults only from null/undefined (allows '')
let favoriteCoffee = usersFavorite ?? 'No favorite coffee';

Functions

sequence of commands
inputs
output
- no return = undefined

function add(a, b) {
    return a + b;
}

const result = add(3,5);

How to create a function?

// 1) named function
function hello() {
    console.log('hello');
}

// 2) anonymous function
const hello = function() {
    console.log('hello');
}

// 3) anonymous using arrow function
const hello = () => console.log('hello');

named

anonymous

Arrow function

// with body
const one = () => {
    return 1;
};

// single returned statement
const two = () => 2;

Create a function anywhere

function hello() {
  
  function say(text) {
    console.log(text)
  }
  
  say('hello');
}

Crashes?

function hello() {
  
  say('hello');
  
  function say(text) {
    console.log(text)
  }
}

"function hoisting"

In JS we do this a lot!

function writeData(data, onComplete) {
  fs.writeFileSync('file.txt', data);
  onComplete();
}

writeData('hello', () => console.log('done'));

passing a function as parameter

Clojure

function initialize() {
  let cnt = 1;
  return () => cnt++;
}

const fn = initialize();
console.log(fn()) // 1
console.log(fn()) // 2
console.log(fn()) // 3

function see surrounding variables
= lexical context

Objects

not a primitive type
used for structured data
key: value
key = property

let teacher = {
    firstName: 'Martin',
    surname: 'Nuc',
    age: 32
}

Modify object

let teacher = {
    firstName: 'Martin',
    surname: 'Nuc',
    age: 32
}

// using dot notation
teacher.age = 33;

// using key name
teacher['age'] = 33;

let keyName = 'age';
teacher[keyName] = 33;

Remove property

let teacher = {
    firstName: 'Martin',
    surname: 'Nuc',
    age: 32
}

delete teacher.age;
console.log(teacher);

Shorthand when creating object

let firstName = 'Martin';
let age = 32;

// create object
let teacher = {
    firstName: firstName,
    age: age
}

// shorthand:
let teacher = {
    firstName,
    age
}

Spread operator

const martin = {
  firstName: 'Martin',
  age: 36
}

const richMartin = {
  ...martin,
  money: 1000000
}

used to create a new object from another object

Stored as a reference

let teacher = {
    firstName: 'Martin',
    age: 32
}
let teacherTwo = teacher;

teacherTwo.age = 55;
console.log(teacher.age); // ????

not like primitive types
use Object.assign() to create a copy (not in IE11)

➡️ Personal development

the original person has to stay intact
1️⃣ updatedPerson - update age from 25 to 30
2️⃣ personWithJob - add a job "Engineer"
3️⃣ combine updatedPerson & personWithJob

const person = {
    name: "John",
    age: 25,
    city: "New York"
};

// Task 1: Create updatedPerson by copying person and changing age to 30

// Task 2: Create personWithJob by adding a job property with the value "Engineer"

// Task 3: Create finalPerson by combining both updates in one step

Methods in objects

const obj = {
    one: function() { return 1; },
    two: () => 2,
    three() {
        return 3;
    }
};
obj.four = () => 4;

obj.one();
obj.two();
obj.three();
obj.four();

Destructuring object

const obj = {
    firstName: 'Martin',
    surname: 'Nuc',
    age: 32
};

const { firstName, surname } = obj;
console.log(name, surname);

function printAge({age}) {
    console.log(age);
}

printAge({
    name: 'Martin',
    age: 32
});

Rest operator

const obj = {
    name: 'Martin',
    surname: 'Nuc',
    age: 32
};

const { name, surname, ...other } = obj;
console.log(other); // { age: 32 }

"rest" after destructuring
also ... as for spread (when creating objects)

Useful Object methods

Object.keys(obj) - array of keys
Object.values(obj) - array of values

typeof

typeof 5 // 'number'
typeof 'hi' // 'string'
typeof {} // 'object'
typeof [] // 'object'
typeof undefined // 'undefined'

typeof null // 'object' !!

Arrays

store multiple items
in order
.length = number of items
push to add

let items = [1, 2, 3]; // creation
items.push(4);

console.log(items); // [1, 2, 3, 4]
console.log(items.length) // 4

Access the index

index starts with 0

let arr = ['one', 'two', 'three'];

console.log(arr[0]); // 'one'
console.log(arr[1]); // 'two'

console.log(arr[5]); // undefined

Spread operator

expands array into individual items
used to create a new array from existing

const arr = ['one', 'two', 'three'];

const newArray = [...arr, 'four'];

➡️ Palindrome

create a function which determines whether input is palindrome
- palindrome = word that reads the same backwards as forwards
- use for loop

Array methods

.join()

let arr = [1, 2, 3, 4];
let output = arr.join('-'); 
console.log(output); // '1-2-3-4'

creates string by joining items in the array

.reverse()

let arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // [4, 3, 2, 1]

.forEach()

loops over the array

[1, 2, 3, 4].forEach(item =>
    console.log(item)
);

.every(), .some()

checks condition for every item

let result = [1, 2, 3, 4].every(item =>
    item > 0
);
console.log(result); // true

.map()

creates a new array
every item modified by a function

let result = [1, 2, 3, 4].map(item =>
    item + 1;
);
console.log(result); // [2, 3, 4, 5]

.filter()

creates a new array
includes only items that pass the condition

let result = [1, 2, 3, 4].filter(x => x > 2);
console.log(result); // [3,4]

.reduce()

accumulates intermediate result

[1,2,3,4].reduce((accumulator, current) =>
    accumulator + current
, 0); // 10

accumulator	current	result
0	1	1
1	2	3
3	3	6
6	4	10

➡️ Sum of positives

you have an array of numbers
(1) count how many positive numbers are there
- example: [1,-4,7,12] => 3
(2) you would like to calculate sum of positive values only
- example: [1,-4,7,12] => 1 + 7 + 12 = 20

String methods

.split()

creates an array
split by character

'Good morning'.split(' '); // ['Good', 'morning']

.replace()

replaces only first match and returns a new string

let result = 'Good morning'
    .replace('morning', 'afternoon');

.match()

search using RegEx

let result = 'aaa,aab,aac,abc,acc'.match(/aa.?/g);
console.log(result) // [ 'aaa', 'aab', 'aac' ]

➡️ Shortest word

given a string of words, return the length of the shortest word(s)
example: "Hi my name is Martin" => 2

Classes

What is a class?

template for future objects
needs to be instantiated using new keyword
like a "recipe" for a chocolate cake. Using recipe you make a cake (instance of a cake)

class Dog {
    bark() {
        console.log('woof-woof');
    }
}

let rex = new Dog();
rex.bark();

Might have properties

class Dog {
    setName(newName) {
        this.name = newName;
    }
    bark() {
        console.log('woof-woof, I am ' + this.name);
    }
}

let rex = new Dog();
rex.setName('Rex');
let lassie = new Dog();
lassie.setName('Lassie');

rex.bark();  // woof-woof, I am Rex
lassie.bark();  // woof-woof, I am Lassie

use this keyword to access properties

Constructor

class Dog {
    constructor(name) {
        this.name = name;
    }
    bark() {
        console.log('woof-woof, I am ' + this.name);
    }
}

let rex = new Dog('Rex');
rex.bark();  // woof-woof, I am Rex

method which is executed when the class is instantiated (when used with new)

Inheritance

class Animal {
    eat() {
        console.log('yum yum');
    }
}

class Dog extends Animal {
    constructor(name) {
        this.name = name;
    }
    bark() {
        console.log('woof-woof, I am ' + this.name);
    }
}

let rex = new Dog('Rex');
rex.bark();  // woof-woof, I am Rex
rex.eat(); // yum yum

class can extend another class
parent class should be more generic

setTimeout

setTimeout()

do something later
asynchronous

console.log(1);
setTimeout(() => console.log(2), 1000);
setTimeout(() => console.log(3), 2000);

How to cancel setTimeout()?

const timeoutRef = setTimeout(() => console.log(2), 1000);
clearTimeout(timeoutRef);

setInterval

repeated indefinitely
clearInterval to stop

Event loop

JS is single-threaded
things get pull from event loop

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);

➡️ Count and shout

create a function for a count down
use setTimeout or setInterval

countdown(3)

3
2
1
Time's up!

Context

this

What is context?

the value of this keyword
related not only to classes, it's everywhere
typically it's set to object which the function belongs to BUT you never know

class Dog {
    constructor(name) {
        this.name = name;
    }
    bark() {
        console.log('woof-woof, I am ' + this.name);
    }
}

let rex = new Dog('Rex');
rex.bark();

Context

depends on how the function is called

let obj = {
    name: 'Martin',
    sayHi() {
        console.log(this.name);
    }
}

obj.sayHi();
let fn = obj.sayHi;
fn();

Enforce context

using call+apply, bind

function fn(num) {
    console.log(this, num);
}

// classic invocation
fn(1); // this = undefined

// call + apply
fn.call('test', 2); // this = 'test'
fn.apply('test', [3]); // this = 'test'

// bind
let bound = fn.bind('test');
bound(4); // this = 'test'

Example

jQuery uses context:

$('a').each(function() {
  console.log(this.href);
});

Problem

What context does a callback function have?

let obj = {
  name: 'Martin',
  hi() {
    console.log(this.name);
    setTimeout(function () {
      console.log(this.name);
    }, 1000);
  }
}

obj.hi();

Arrow functions

always pass the current context

let obj = {
  name: 'Martin',
  hi() {
    console.log(this.name);
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
}

obj.hi();

➡️ Test your JS skills

Write a function to find the first not repeated (unique) character in a string

obj = {a: 2, b: 3};
for(key in obj) {
  console.log(key)
}

What else should you know?

new Set()
- add, has, delete
new Map()
- set, get, has, delete
new Date()

Exceptions

throw

try {
  throw new Error('Something went wrong')
} catch(e) {
  console.error(e);
} finally {
  console.log('this happens anyways')
}

throw 'Something went wrong'

throw new Error('Something went wrong')

Promises

What are they for

to avoid "callback hell"
flat and readable code
mostly used for asynchronous operations
- any asynchronous operation can be wrapped to a Promise

Problem: callback hell

setTimeout(() => {
  console.log('after 1s');
  setTimeout(() => {
    console.log('after another 1s');
    setTimeout(() => {
      console.log('after another 1s');
    }, 1000);
  }, 1000);
}, 1000);

Flat code with Promises

promise
  .then(fn1)
  .then(fn2)
  .then(fn3)

Promise state

pending
fulfilled (=resolved)
rejected

pending

rejected

fullfilled

.then(...)

.catch(...)

How to create a promise

= instantiate a Promise object

function wait5seconds() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(), 5000);
    });
};

wait5seconds().then(() => console.log('after 5s'));

How to create a promise

shorthand for resolved / rejected promise

Promise.resolve()
Promise.reject()

Pass data

argument of resolve
obtained in the first parameter of then

function wait5seconds() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve([1, 2, 3]), 5000);
    });
};

wait5seconds().then((data) => console.log(data));

1. Error handling - catch

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject('This is error'), 5000);
    });
};

fetchData()
  .then((data) => console.log('success', data))
  .catch((error) => console.log(error));

Promise chaining

what you return in then is you get in the next then

Promise.resolve('some data')
    .then(data => 'hello' + data) // "hello" + "some data"
    .then(data => console.log(data)) // "hello some data"

Promise chaining

when it returns a Promise it will wait for that promise to resolve before going to next then

Promise.resolve('some data')
    .then(data => 'hello' + data) // "hello" + "some data"
    .then(data => console.log(data)) // "hello some data"
    .then(data => fetch('https://google.com'))
    .then(data => console.log(data)) // "<html><body>..."

Waiting for multiple promises

Promise.all([promise1, promise 2])
- returns a single promise - resolved when all of them are resolved
Promise.race([promise1, promise 2])
- resolved when the fastest one is resolved

Promise.all([...]).then(results => {
  console.log(results[0]);
  console.log(results[1]);
})

➡️ Simulate fetching data

create function fetchUser
- parameter: userId
- response takes 1-3s
- for negative userId, it fails
- for positive userId it returns user
Output: "fetching" ... 1-3s ... "{ user }"

{
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com'
};

➡️ Wrap setTimeout in Promise

create function wait
- parameter: how long it should wait
use promise chain (.then) to count down:
- console.log: 3,2,1, go!

async / await

async/await

syntactic sugar around promises
works only in async function

async function countDown() {
    console.log(3);
    await wait(1000);
    console.log(2);
    await wait(1000);
    console.log(1);
    await wait(1000);
    console.log('go!');
}

countDown().then(() => console.log('done'));

async/await

async function countDown() {
    console.log(3);
    await wait(1000);
    console.log(2);
    await wait(1000);
    console.log(1);
    await wait(1000);
    console.log('go!');
}

countDown().then(() =>
   console.log('done'));

function countDown() {
    console.log(3);
    return wait(1000)
      .then(() => console.log(2))
      .then(() => wait(1000))
      .then(() => console.log(1)
      .then(() => wait(1000))
      .then(() => console.log('go!'))
}

countDown().then(() =>
   console.log('done'));

Get resolved data (await)

async function fn() {
  const promise = new Promise(resolve => {
    setTimeout(() => resolve('Hello'), 1000);
  });
  
  const data = await promise;
}

Error handling in async fn

async function() {
    try {
        await Promise.reject('this is reason');
    } catch (err) {
        console.error(err);
    }
}

Finally block

async function() {
    try {
        await Promise.reject('this is reason');
    } catch (err) {
        console.error(err);
    } finally {
        console.log('done')
    }
}

➡️ Rewrite using async/await

function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      Math.random() < 0.5 ? resolve(Math.random()) : reject('Fetching failed')
    }, 1000);
  })
}

function execute() {
  const results = [];
  fetchData('seznam.cz')
    .then((seznamData) => results.push(seznamData))
    .then(() => fetchData('google.com'))
    .then((googleData) => results.push(googleData))
    .catch(error => console.log(error))
    .then(() => console.log('done'))
}

fetchData ramdomly fails

Modules

Modules = files

index.js

calculator.js

my-input.js

Import (named)

import { add, divide } from './calculator';

const result = add(5, divide(8, 2));

Export (named)

// calculator.js
export function add(a, b) { return a + b; }

export const divide = (a, b) => a / b;

export class Calculator { ... }

relative path

Import (default)

import PI from './calculator';

console.log(PI);

Export (default)

// calculator.js
export function add(a, b) { return a + b; }

export const divide = (a, b) => a / b;

export class Calculator { ... }

export default 3.14;

Alias (rename)

// default export can be called anyway
import mojePI from './calculator';

// named export
import { add as addNumbers } from './calculator'

addNumbers(2, 5);

Named

can export multiple things
import & export must use the same name
easy to track
refactoring produces a lot of changes but consistent
I recommend

Default

must be only one
import can be called anyhow
exports expressions
refactoring produces a few changes but things will not be called the same anymore
popular in React community

NPM

Dependency management

Node package manager

packaging system
large repository 3rd party libs
https://www.npmjs.com

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "This is just description of my awesome package",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon --exec npm run start",
    "start": "tsc && node dist/index.js",
    "test": "mocha --opts mocha.opts"
  },
  "author": "Martin Nuc",
  "license": "ISC",
  "dependencies": {
    "@types/chai": "4.0.4",
    "@types/mocha": "2.2.43",
    "@types/node": "8.0.28",
    "@types/sinon": "2.3.4",
    "chai": "4.1.2",
    "mocha": "3.5.3",
    "nodemon": "1.12.1",
    "sinon": "3.2.1",
    "ts-node": "3.3.0",
    "typescript": "2.5.2"
  }
}

package.json

Scripts


"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

used to execute commands
npm dependencies executables resolution (from node_modules/.bin/*)

npm run <name>

Shortcut for start and test scripts only. For others you have to use npm run

Runs any script from npm.

npm start

npm test

👉

➡️ Create NPM project

create a folder and run npm init
create index.js
create start script to run it

Dependencies

npm install lodash

installs lodash library:

Use library in your code

import lodash from 'lodash';

lodash.difference([1, 2, 3], [2, 3]);

Dependencies and GIT

we don't commit dependencies
put node_modules folder in .gitignore
npm install to install dependencies

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "This is just description of my awesome package",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon --exec npm run start",
    "start": "tsc && node dist/index.js",
    "test": "mocha --opts mocha.opts"
  },
  "author": "Martin Nuc",
  "license": "ISC",
  "dependencies": {
    "@types/chai": "4.0.4",
    "@types/mocha": "2.2.43",
    "@types/node": "8.0.28",
    "@types/sinon": "2.3.4",
    "lodash": "4.17.5",
    "chai": "4.1.2",
    "mocha": "3.5.3",
    "nodemon": "1.12.1",
    "sinon": "3.2.1",
    "ts-node": "3.3.0",
    "typescript": "2.5.2"
  }
}

package.json

Semantic versioning

6.11.2

patch

minor version

major version

Semantic versioning

6.11.2

patch

minor version

major version

- major changes, breaks API

Semantic versioning

6.11.2

patch

minor version

- new features

- doesn't break API

major version

- major changes, breaks API

Semantic versioning

6.11.2

patch

- only bugfixes

minor version

- new features

- doesn't break API

major version

- major changes, breaks API

NPM alternatives

yarn
- was faster but npm caught up
pnpm
- saves disk space
- uses sym links and downloads packages once

➡️ Age distribution

determine age distribution of people
use lodash.groupBy to group by age

const people = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 25 },
    { name: 'David', age: 30 },
    { name: 'Edward', age: 35 }
];

{
  25: 2,
  30: 2,
  35: 1
}

Extra

Weak object refs

data free to be garbage collected

let obj = { name: "Martin" };
let weakRef = new WeakRef(obj);

let derefObj = weakRef.deref();

if (derefObj !== undefined) {
    console.log(derefObj.name); // Output: "Martin"
} else {
    console.log("The object has been garbage collected");
}

WeakMap

keys must be objects
can disappear anytime

let weakMap = new WeakMap();

// Create some objects
let obj1 = { name: "Martin" };
let obj2 = { name: "John" };

// Set the objects as keys in the WeakMap
weakMap.set(obj1, "Developer");
weakMap.set(obj2, "Designer");

// Retrieve the values
console.log(weakMap.get(obj1)); // Output: "Developer"
console.log(weakMap.get(obj2)); // can be undefined