Web development — lecture 3 — Introduction to JavaScript

Web development — lecture 3 — Introduction to JavaScript

JavaScript is higher-order, dynamic and just-in-time compiled language and one of core technologies used in web. While that does sound maybe too much now, first important thing to understand is that it gives logic to our application.

Before, JavaScript was considered as a bad, slow, toy language used just to make some shiny effect in the browser. However, in 2008, when V8 JavaScript engine was released, things changed for JavaScript. It got huge speed boost, become more reliable and more companies started working on language improvement and standardization. It enabled creation of NodeJS.

Today, JavaScript is used in much more than web pages:

Machine learning and AI

• Tensorflow

Games

• PhaserJS
• Unity

Mobile applications

• React Native

Raspberry Pi

• NodeJS

Satellites

• Reaktor

Language syntax

Values

Value can be:

· Primitive: string, number, boolean, null, undefined

· Complex: object, class, array

Assigning values:

// const or let
const value = 5;
const — can’t be reassigned
let — can be reassigned

Code blocks

Code placed between curly brackets {}

Operators

Mathematical: +, -, /, *

Incrementor/decrementor: ++, —

Logical operators: ||, &&

If statement

If we want to execute some code only in special case

if(true) {

    // do something

} else if(false) {

    // do other thing

}

Loops

While loop

while(true) {
    // do something
}

For loop

for (let i = 0; i < 10; i++) {
    // do something 10 times
}

Function

Reusing piece of logic

function increment(num) {
    return num + 1;
}
increment(5); // 6

Lambda functions

const increment = (num) => { return num + 1 };
increment(5); //6

Arrays

const a = [1, 2, 3, 4];

console.log(a[0]); // 1

Objects

Key-value collection of values and functions

const obj = {
    val: 5,
    action: function(){ console.log(this.val) }
};
obj.action(); //5

Classes

Classes are a bit more complex versions of key value collections. They are definitions of a custom type containing different method(functions) and properties(values). Instance of it is created by using keyword new. It contains method called constructor which is executed on creation of class instance.

class Person {
    constructor() {
        this.firstName = "john";
        this.lastName = "doe";
    }

    sayHello() {
      console.log(`Hello ${this.firstName} ${this.lastName}`)
    }

}

const john = new Person();

john.sayHello(); // hello world

Class extension

class NamedPerson extends Person {

    constructor(firstName, lastName) {
        super();
        this.firstName = firstName;
        this.lastName = lastName;
    }

}

const johnny = new NamedPerson('johnny', 'dunne');
johnny.sayHello();

Functional programming

Functions are first class objects. That means they can be assigned to a value and passed as parameters.

function doSomethingWithFive(f) {
    return f(5);
}

function incrementValue(num) {
    return num + 1;
}

const result = doSomethingWithFive(incrementValue);

console.log(result); // 6

About this series

This series of articles is done as part of my volunteer work at Citywise Education where I am giving lectures on web development with ReactJS. More details and other learning materials can be found at my course page grumpy-dev.com.