Web development — lecture 3 — Introduction to JavaScript
Tags: javascript, webdev, frontend, tutorial
Published: 2020-03-11 11:14:06

---
title: Web development — lecture 3 — Introduction to JavaScript
published: true
date: 2020-03-10 02:37:13 UTC
tags: javascript,web-development,frontend,tutorial
canonical_url: 
---

### 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.

![](https://cdn-images-1.medium.com/max/1024/1*m8nFrqg3AiItcY0UCSYZSg.jpeg)

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:**

```javascript
// 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

```javascript
if(true) {

    // do something

} else if(false) {

    // do other thing

}
```

**Loops**

While loop

```javascript
while(true) {
    // do something
}
```

For loop

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

**Function**

Reusing piece of logic

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

**Lambda functions**

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

**Arrays**

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

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

**Objects**

Key-value collection of values and functions

```javascript
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.

```javascript
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**

```javascript
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.

```javascript
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](https://www.citywise.ie/) 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](http://grumpy-dev.com/citywise/).