Front-end programming

JavaScript basics

javascript

Javascript

JavaScript is an interpreted (or just-in-time compiled) programming language with first-class functions.

 

It's a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional) programming styles.

 

It's most known as the scripting language for the Web.

JS and the web

When a web page is loaded in the browser, our code is running inside an execution environment (the browser tab).

 

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface.

node.js

Although it started as a Web technology, JavaScript has since grown to be much more than that, and is now commonly found in both the client and server sides.

The most known tool for backend development in JS is Node.js.

 

Node is an open-source, cross-platform, back-end JavaScript runtime environment.

node.js

Node.js is built on Chrome's V8 engine (the JavaScript's interpreter built into the Google Chrome browser).

 

Node uses an event-drive, non-blocking I/O model that makes it lightweight and efficient.

Javascript pros and cons

PROS CONS
- Fast Execution
- Beginner friendly
- Well documented
- Language features like first-class functions, closures, prototypes, and object/array literals.		 - Public code
- Compatibility issues (DOM)
- Language features like implied globals, complex this binding, type coercion, falsy values, function scope, and others.

obFuscators

Because JavaScript is deployed as source code, it will be publicly available.

 

One technique used to counteract this is to obfuscate the deployed code, making it vary hard to read and reverse-engineer.

// ORIGINAL CODE

console.log("Hello World!");
// OBFUSCATED CODE

var _0x5a9b=['1048708KvhfyS','Hello\x20World!','578650mpMCkd','693503mORuho','1548500vucrDU','867922wMLRDy','log','249059jGyHKq','1kVGFPF','118484jhQJRL'];var _0x24a4f2=_0x138d;
function _0x138d(_0x1dcd90,_0x44da07){return _0x138d=
    function(_0x5a9b54,_0x138dcf){_0x5a9b54=_0x5a9b54-0x74;var _0x3f9394=_0x5a9b[_0x5a9b54];return _0x3f9394;},_0x138d(_0x1dcd90,_0x44da07);}(var _0x5b0577=_0x138d;
      while(!![]){try{
          var _0x1b7606=-parseInt(_0x5b0577(0x77))+-parseInt(_0x5b0577(0x7c))+-parseInt(_0x5b0577(0x79))+parseInt(_0x5b0577(0x7a))*parseInt(_0x5b0577(0x75))+-parseInt(_0x5b0577(0x7b))+parseInt(_0x5b0577(0x74))+parseInt(_0x5b0577(0x76));
          if(_0x1b7606===_0xee4c5f)break;else _0x2a8c05['push'](_0x2a8c05['shift']());}
        catch(_0x2fb212){_0x2a8c05['push'](_0x2a8c05['shift']());}}}(_0x5a9b,0x82fa0),console[_0x24a4f2(0x78)](_0x24a4f2(0x7d)));

development environment

BROWSER

EDITOR

NODE.JS

Data types

Data Types

In JavaScript, a primitive is data that is not an object and has no methods. Everything that doesn't fall into this category is a structural data type, i.e., an object.

 

The available types are:

  • undefined 
  • boolean 
  • number
  • string
  • bigint
  • object
  • null

Dynamic typing

JavaScript is a loosely typed and dynamic language.

var a = 18; // a is a number
a = 2.6; // a is still a number
a = 'one'; // a is a string
a = true; // a is a boolean

Typeof

The typeof operator returns a string indicating the type of the operand.

var a = 18;

console.log(typeof a);
// expected output: "number"

console.log(typeof 'number');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof b);
// expected output: "undefined", because b hasn't been declared

var c = null;

console.log(typeof c);
// expected output: "object"

type coercion

Converting a value from one type to another is called casting when done explicitly, and coercion when done implicitly.

 

Type coercion is one of JavaScript's main features.

console.log(1 + 2 + '3'); // What's the result?

Coercion can be disabled on a boolean expression with the === operator, instead of the == operator.

Live coding

Variables, typeof, and type coercion

objects

objects

In computer science, an object is a value in memory which is possibly referenced by an identifier (variable).

 

In JavaScript, objects can be seen as a collection of properties.

var obj = { 
    a: 23, 
    b: 'Tokyo', 
    c: { 
        d: true
    } 
};

Access properties

There are multiple ways to access/modify an object's property.

var myObj = { 
    anotherObj: {
        a: 12, 
        b: 'bicycle'
      }, 
    2: 'sunglasses' 
};

console.log(myObj.anotherObj); 
// { a: 12, b: 'bicycle' }

console.log(myObj['anotherObj']['a']); 
console.log(myObj.anotherObj.a); 
// 12

console.log(myObj[2]);
// sunglasses

console.log(myObj.2);
// ERROR

Add new properties

It is possible to add a new property to an already declared object.

var myObj = { 
    anotherObj: {
        a: 12, 
        b: 'bicycle'
      }, 
    2: 'sunglasses' 
};

myObj.newProperty = 'wow';


Object.defineProperty( myObj, "anotherKey", {
    value: "used if we want to have more control over our property's behaviour",
    writable: true,
    enumerable: true,
    configurable: true
});

delete properties

It's also possible to delete a property.

var myObj = { 
    anotherObj: {
        a: 12, 
        b: 'bicycle'
      }, 
    2: 'sunglasses' 
};

delete myObj.anotherObj;

live coding

Objects

functions

Functions

In JavaScript, functions are ordinary objects with the
additional capability of being callable.

function returnRandomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

function printName(name) {
    console.log(name);
}

printName.property = "hello world";

typeof returnRandomNumber;     // "function"
typeof returnRandomNumber();   // "number"
typeof printName.property; // "string"
typeof printName();	// "undefined"

Arguments

Arguments is an array like object containing all passed arguments into the function.

function action(a) {
    console.log(a + 1, arguments);
}

// Can you guess the output?
action();
action(1);
action('ey');

Arguments

Arguments is an array like object containing all passed arguments into the function.

function action(a) {
    console.log(a + 1, arguments);
}

// Can you guess the output?
action();
action(1);
action('ey');

Arguments

Arguments contains a numerical property for each argument passed to the function.

 

The arguments object IS NOT an array!

function myFunction(x, y) {
    console.log(x);
    console.log(y);

    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }

    console.log(arguments['0']);
}

// what will the output be?
myFunction(1, 2, 3, 4);

Arrow functions

Arrow functions provide a compact syntax for writing functions.

var operation = (num1, num2, operation) => {
    return operation(num1, num2);
} 

var adding = (num1, num2) => {
  return num1 + num2;
}

console.log(operation(2, 5, adding));
// 7

Higher order function

A higher order function returns a function or receives one as argument.

var doOperation = (num1, num2, operation) => {
    return operation(num1, num2);
} 

var adding = (num1, num2) => {
  return num1 + num2;
}

console.log(doOperation(2, 5, adding));
// 7

doOperation() is a higher order function

operation() is a callback function

Higher order functions

A higher order function returns a function or receives one as argument.

// RETURNING A FUNCTION
var multiplication = (num1) => {
    return function (num2) {
        return num1 * num2;
    }
}

var double = multiplication(2);

console.log(double(5));
// 10

Live coding

Functions

arrays

Arrays

Arrays are list-like objects. These objects have methods to perform traversal and mutation operations.

 

An array's length can change at any time and data can be stored at non-contiguous locations.

var players = ['Kane', 'Chiesa', 'Sterling', 'Insigne'];

console.loh(players.length);
// 4

Access an array item

Array items are accessed using their index position.

var players = ['Kane', 'Chiesa', 'Sterling', 'Insigne'];

console.log(players[0]);
// Kane

console.log(players[players.length - 1]);
// Insigne

players[0] = 'Spinazzola';
console.log(players[0]);
// Spinazzola

console.log(players.at(1));
// Chiesa

ADD an array item

Array items can be added directly or using an array method.

var players = ['Kane', 'Chiesa', 'Sterling', 'Insigne'];

// DIRECTLY
players[4] = 'Spinazzola';
players[10] = 'Verratti';

// ADDING TO THE END OF THE ARRAY
players.push('Saka');

// ADDING TO THE BEGINNING OF THE ARRAY
players.unshift('Rashford');

Removing an array item

Array items can be removed using array methods.

var players = ['Kane', 'Chiesa', 'Sterling', 'Insigne', 'Spinazzola', 'Saka'];

// REMOVING FROM THE END OF THE ARRAY
players.pop();

// REMOVING FROM THE BEGINNING OF THE ARRAY
players.shift();

// REMOVE FROM SPECIFIC INDEX
var position = players.indexOf('Sterling');
players.splice(position, 1);

// REMOVE MULTIPLE ITEMS BY INDEX
let removedItems = players.splice(1, 2);
// this will remove two items starting at index 1

console.log(players);
// ['Kane', 'Insigne', 'Spinazzola', 'Saka']

console.log(removedItems);
// ["Chiesa", "Sterling"]

looping an array

Array items can be removed using array methods.

var players = ['Kane', 'Chiesa', 'Sterling', 'Insigne', 'Spinazzola', 'Saka'];

players.forEach(function(item, index) {
  console.log(item, index)
});

// Kane 0
// Chiesa 1
// Sterling 2
// ...

SOrting

var months = ['March', 'Jan', 'Feb', 'Dec'];

months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];

array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]

MAP-Filter-Reduce

var result = players
    .filter(player => player.startsWith('S'))
    .map(player => player.toUpperCase())
    .reduce((acc, player) => acc + player + ' ', '');

console.log(result);

other operations

// CONCATENATION
var array1 = ['a', 'b', 'c'];
var array2 = array1.concat(['d', 'e', 'f']);

console.log(array2);
// ["a", "b", "c", "d", "e", "f"]


// JOINING ELEMENTS INTO A STRING
console.log(array2.join());
// a,b,c,d,e,f

console.log(array2.join('-'));
// a-b-c-d-e-f


// RERVERSING THE ELEMENTS IN AN ARRAY
var reversed = array1.reverse();

console.log('reversed:', reversed);
// "reversed: ["c", "b", "a"]"

console.log('array1:', array1);
// "array1: ["c", "b", "a"]"

other operations

var brands = ['Hermes', 'Chanel', 'Prada', 'Burberry', 'Versace'];

// SLICING
console.log(brands.slice(2));
// ["Prada", "Burberry", "Versace"]

console.log(brands.slice(1, 5));
// ["Chanel", "Prada", "Burberry", "Versace"]

console.log(brands.slice(-2));
// ["Burberry", "Versace"]


// FILLING
console.log(brands.fill('', 2));
// ["Hermes", "Chanel", "", "", ""]
// 
console.log(brands.fill('', 2, 4));
// ["Hermes", "Chanel", "", "", "Versace"]

other operations

var array1 = [10, 122, 2, 189, 442];

// FINDING AN ELEMENT
var result1 = array1.find(element => element > 10);
console.log(result1);
// 122

var result2 = array1.find(element => element > 500);
console.log(result2);
// undefined

// CHECK IF ELEMENT IS PRESENT 
console.log(array1.includes(2));
// true

Live coding

Arrays

Exercise

Arrays (Pass The Tests)

scope

Scope

Scope refers to the region of our code where a variable is valid/accessible.

Global scope

Global variables live through the entire execution of the program,
and can be accessed and altered anywhere.

 

Variables defined outside a function or without the var keyword will be bound to the Global Scope.

var name = 'Sarah'; // global variable

function doStuff() {
    console.log(name); // Sarah
    doSomethingElse();
    console.log(nam2); // Liam
}

function doSomethingElse() {
    name2 = 'Liam'; // implied global, as soon as doSomethingElse is invoked
}

STRICT MODE

Before ES6 existed, JavaScript had a way to prevent implied globals: strict mode.

"use strict";

var name = 'Sarah'; // global variable

function doStuff() {
    console.log(name); // Sarah
    doSomethingElse();
    console.log(name2); // WON'T EVEN GET HERE
}

function doSomethingElse() {
    name2 = 'Liam'; // ERROR
}

Local scope

Local variables exist only within the function body
of which they are defined.

 

In JavaScript, local scope is bound to function, not block!

var name = 'Sarah'; // global variable

function doStuff() {
    console.log(name); // Sarah
    doSomethingElse();

    if (name) {
        var exists = true;
    }

    console.log(exists); // true
    console.log(name2); // ERROR
}

function doSomethingElse() {
    var name2 = 'Liam'; // local variable
}

Lexical scope

In JavaScript, a variable defined outside a function can be accessible inside another function defined after the variable declaration. The opposite is not true.

var firstFunction = (par1) => {
    var mySpecialVar = "hi!";
    return function (par2) {
        console.log(mySpecialVar);
        console.log(par1);
        console.log(par2);
    }
}

var secondFunction = firstFunction(2);

secondFunction(2); // hi! 2 2 
// even though mySpecialVar is part of the firstFunction's local scope
// because we need its value in secondFunction, it becomes a part of secondFunction's lexical scope

hoisting

Declarations are always processed before any code is executed. This is called hoisting.

sayHelloToJonny(); // prints Hello Peter

function sayHelloToPeter() {
    var name = "Peter";
    console.log("Hello", name);
}

var vs let vs const

Variables declared with let or const are not hoisted.

 

Variables declared with const can't be reassigned.

// DECLARING A VARIABLE IN ES5
var studentName = "Philip";

// DECLARING A VARIABLE IN ES6
let anotherStudentName = "Mark";
const yetAnotherStudentName = "James";

Live coding

Scopes and Hoisting

wrappers

Primitive wrappers

JavaScript has the Boolean, Number and String objects that wrap around primitive values.

var name = "Rod";
console.log(name.toUpperCase()); 
// JS creates a wrapper --> new String("Rod").toUpperCase();

Live coding

Primitive Wrappers

Made with Slides.com