JavaScript
JavaScript
▪ Interpreted and just-in-time compiled (in V8 Engine)
▪ Java-like syntax, but with functional roots
- JavaScript syntax was almost functional, like Scheme (i.e. Racket)
▪ A prototype-based object-oriented language
▪ Dynamic types (like Python)
- not static types (like Java)
▪ "Weakly" or "loosely" typed
- not "strongly" typed (like Python)
▪ JavaScript is based on an evolving standard
- ECMAScript: ES6, ...
▪ Has a strict mode and a non-strict mode (i.e. "sloppy mode")
- Vite setup uses strict mode, essentially so does TypeScript
2
Basics
▪ Semicolon line endings are optional!
- but recommended
▪ "printing" to the console (e.g. of a browser)
console.log( ... )
▪ Familiar C/Java style control structure statements, e.g.:
if then else
for
while
switch
▪ ternary operator
A ? B : C // equivalent to "if A then B else C"
3
Variables
Two
▪ Three
XXXX ways to declare variables: var,
XXX let, const
(var has non-block scope "hoisting", generally you don't want that)
▪ Primitive types:
- boolean, number, string, null, undefined
- everything* else is an object, including arrays
▪ undefined means variable is not defined
▪ automatic type conversion
▪ typeof statement to return primitive type as string
often is “object”,
even for things
like an array
* there are some other primitive types like Symbol, ...
4
Truthy and Falsy
▪ Automatic type conversion causes some surprising behaviour
▪ Surprising results of == equality comparisons, e.g.
0 == "" // true!
1 == "1" // true!
▪ Generally, use === for strict equality comparisons
0 === "" // false
1 === "1" // false
https://www.sitepoint.com/javascript-truthy-falsy/ 5
Logical Or and "Nullish Coalescing"
|| is the logical OR operator
- often used to assign default value if variable is undefined
let v; // v is undefined
v = v || 456; // v is now 456 since v was undefined
- but truthy and falsy behaviour may introduce bugs
let v = 0;
v = v || 456; // v is 456 since v was 0 (which is falsy)
?? is the nullish coalescing operator
- only false when null or undefined
let v = 0;
v = v ?? 456; // v is 0 since v wasn’t undefined or null
6
Functions
▪ Function declaration
function add1(a, b) { return a + b; }
console.log(add1(1, 2)); // 3
▪ Function expression
const add2 = function (a, b) { return a + b; }
console.log(add2(1, 2)); // 3
▪ Function expression using "arrow notation" / "lambda notation"
const add3 = (a, b) => a + b;
console.log(add3(1, 2)); // 3
7
First Class Functions
▪ Function can be assigned to a variable
function sayHello() { return "Hello, "; }
const saySomething = sayHello;
console.log(saySomething()); // "Hello, " Common for “callback”
functions
▪ Functions can be passed to other functions
function greeting(msg, name) { return msg() + name; }
console.log(greeting(sayHello, "Sam")); // Hello, Sam
▪ Functions can be returned from other functions Called "factory pattern" or
"factory functions"
function makeGreeting() {
return function (name) { return “Hi ” + name; }
} an anonymous function
const greet = makeGreeting();
console.log(greet("Sam")); // Hi Sam
8
Closures
▪ When an inner function references state of outer function
function makeRandomGreeting() {
const sal = Math.random() > 0.5 ? "Hi" : "Hello";
return function (name) { return sal + " " + name; }
}
const greeting = makeRandomGreeting();
console.log(greeting("Sam")) // ?? Sam
▪ Outer state includes function parameters
function makeGreeting(sal) {
return function (name) { return sal + " " + name; }
}
const greeting1 = makeGreeting("Hello");
console.log(greeting1("Sam")); // Hello Sam
9
Passing Functions to Factory Functions
▪ Factory function that captures function
function makeGreeting(msg) {
return function (name) { return msg() + name; }
}
function sayHello() { return "Hello, "; }
const greeting2 = makeGreeting(sayHello);
console.log(greeting2("Sam")); // Hello, Sam
▪ Common to use lambda functions in this context
const greeting3 = makeGreeting(() => "Howdy! ");
an anonymous lambda function
console.log(greeting3("Sam")); // Howdy! Sam
10
String Template Literals
▪ String literal delimited by "backtick" (`) enables:
- string interpolation
- multi-line strings we’ll talk about these last
two later in course
- tagged templates
▪ Example
const v = 15.7;
const units = "cm";
▪ Without string interpolation:
let msg = "Length is " + v + " " + units + ".";
▪ With string interpolation:
let msg =`Length is ${v} ${units}.`
▪ Can use expressions in template literal:
let msg =`Length is ${(v / 100).toFixed(2) * 100} cm.`
formatting method of
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals primitive type 11
JavaScript Objects
▪ Can be defined using JSON-like* notation (JavaScript Object Notation)
const square = {
colour: "red",
size: 10,
draw: function () {
return `A ${this.size} pixel ${this.colour} square.`;
}
}
▪ Get property
console.log(square.colour); // red
▪ Set property
square.colour = "blue";
▪ Call "method" (technically a "function property")
console.log(square.draw()); // A 10 pixel blue square.
* we don't need to quote property names and some values, plus function property, ... 12
Prototypal Inheritance
▪ JavaScript has no formal separation of "classes" and "objects"
▪ Objects are linked to a special object called the "prototype"
- all objects have a property called [[Prototype]]
▪ The prototype contains properties and methods for linked objects
▪ There can be multiple prototypes, forming a "chain"
▪ Objects can be created using a constructor function and new
keyword
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain 13
Prototype Chain using Constructor Function
// a constructor function
function Shape(colour) {
"this" refers to object context
this.colour = colour;
this.draw = function () {
return `A ${this.colour} shape.`;
}
}
function Square(colour, size) {
Shape.call(this, colour); call prototype constructor and
this.size = size; link to this object
this.draw = function () { a "shadow" property
return `A ${this.colour} square with size ${this.size}`;
}
}
const square = new Square("red", 10);
14
Class (like a “template” for creating objects)
▪ class keyword is an abstraction for the prototypical inheritance mechanism
class Shape {
constructor(colour) { this.colour = colour; }
draw() { return `A ${this.colour} shape.`; }
}
class Square extends Shape {
constructor(colour, size) {
super(colour); call prototype constructor and
link to this object
this.size = size;
}
a "shadow" property
draw() {
return `A ${this.colour} square size ${this.size}`;
}
}
const square = new Square("red", 10);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes 15
Arrays
▪ Arrays are an example of an iterable object
▪ Some ways to declare an Array: “empty” is
not a typo!
let arr1 = [] // empty array with length 0
let arr2 = Array(5); // empty array with length 5
let arr3 = [1, 2, 3, 4, 5]; // populated array
let arr4 = Array(5).fill(99); // 5 elements, all 99
▪ Some ways to iterate over an array:
for (let i = 0; i < arr3.length; i++) {
console.log(arr3[i])
}
for (const x of arr3) { console.log(x) }
arr3.forEach((x) => console.log(x));
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections 16
Array Methods
▪ foreach
▪ sort
▪ reverse
▪ splice
▪ indexOf
... many more
Note some mutate the array and some don't, so check the docs!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array 17
Common Functional Array Methods
let arr3 = [1, 2, 3, 4, 5];
▪ map returns array with transformed elements:
const arr4 = arr3.map((x) => x * 10);
// [10, 20, 30, 40, 50]
▪ find returns first element that satisfies condition:
const a = arr3.find((x) => x % 2 == 0);
// 2
▪ filter returns all elements that satisfy condition
const arr5 = arr3.filter((x) => x % 2 == 0);
// [2, 4]
▪ reduce executes a function that accumulates a single return value
const arr6 = arr3.reduce((acc, x) => acc + x, 0);
// 15
18
Destructuring Assignment
▪ Unpack array elements or object properties into distinct variables
▪ From Arrays
let arr3 = [1, 2, 3, 4, 5];
let [a, b] = arr3; // a = 1, b = 2
▪ From Objects
let obj = { "a": 1, "b": 2, "c": 3 };
let { a, b } = obj; // a = 1, b = 2
▪ Can rename destructured variables from objects
let obj = { "a": 1, "b": 2, "c": 3 };
let { a: x, b: y } = obj; // x = 1, y = 2
means "unpack value for
b and store in y"
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 19
Spread Syntax and Rest Syntax
▪ Spread expands an iterable object (i.e. array, string)
let arr3 = [1, 2, 3, 4, 5];
let arr4 = [-1, 0, ...arr3, 6, 7];
console.log(arr4); // [-1, 0, 1, 2, 3, 4, 5, 6, 7]
▪ Rest condenses multiple elements into single element
let arr3 = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr3;
console.log(c); // [3, 4, 5]
const obj = { a: 1, b: 2, c: 3 };
let { a, ...x } = obj;
console.log(x); // {b: 2, c: 3}
let { b, ...y } = obj; // what’s y?
20
Create a Prepopulated Array using spread and map
let arr5 = [...Array(5)].map((_, i) => i * 10);
Spread length
Ignore array
5 empty array
element index
value
console.log(arr5); // [0, 10, 20, 30, 40]
There are many other
ways to do this like
“from”
21
Resources for Learning JavaScript
▪ MDN Introduction to JavaScript
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
▪ Strings
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
22
Exercise
EXERCISE
1. Create a Vite Vanilla JavaScript project
- npm create vite, then answer prompts and follow instructions
- Drag folder into VS Code
2. Check that everything is working
- Delete everything In main.js
- Add a line to console.log “hello” to the console
3. Experiment with JavaScript concepts
- Log some truthy and falsy expressions, including || and ??
- Create a function that takes a function as an argument
- Create a simple factory function with a closure
- Use a string literal
- Create a simple object (use class keyword)
- Create an array, try functional methods like map and foreach
- Use destructuring and spead/rest sytax with arrays and objects
Web Apps 23
