Lecture 19 - JavaScript Syntax

Table of Contents

History

Differences Between Java and JavaScript

Feature Java JavaScript
Execution Compiled Interpreted
Typing Static typing Dynamic typing
Variable Typing Strong Weak
Hash Tables Provided by libraries Native type
Object Model Class-based Prototype-based
Verbosity More verbose Less verbose:
- No need for class declarations
- No need for separate files

Similarities Between Java and JavaScript

Object Models

JavaScript Usage Paradigms

Document Object Model (DOM)

Variable Typing

boolean x = true;
int x = 1;
float x = 2.5;
String x = new String(“s”); List x;
Hashtable x;
Complex x;

var x = True;
var x = 1;
var x = 2.5;
var x = 's';
var x = [1, '2', [3.5, 4], 5];
var x = {};
// not available natively

Native Primitive Types

Feature Java JavaScript
Boolean boolean (true, false) boolean (true, false)
Integers short, int, long (+ unsigned types) Not available (all numbers are floating-point)
Floating-Point float, double Equivalent to double
Characters/Strings char, char[] Strings are equivalent to char[]

Native Class/Object Types

Feature Java JavaScript
Class System Uses actual classes with a strict hierarchy No actual classes, uses constructor functions
Base of Hierarchy Object Object
Native Classes/Types Integer, Float, String, Array, List, Map Object, Array, Date

Primitive vs. Object Types in JavaScript

Primitive

Object

Special Pointers

Pointer Type Java JavaScript
Invalid/ "Null" Pointer null null
Object Non-existence null (typically used) undefined
Current Object this this
(The value of this depends on how a function is called.)
this.value = null; this.value = null;

Strong vs. Weak Typing

var x = 5;
if (x == '5')
    console.log('True');
//==> True

Block Scoping

if (x < y) { ... } else { ... }
if (y == z) {
   conditional1();
   conditional2();
}
common();

Variable Declarations and Scoping

Determining the Type of a Variable

typeof operator returns a string indicating the type

console.log(typeof "Ralf");         // "string"
console.log(typeof 3.14);           // "number"
console.log(typeof false);          // "boolean"
console.log(typeof [1, 2]);         // "object"
console.log(typeof new Date());     // "object"
console.log(typeof null);           // "object" (backward compat with old JS)
console.log(typeof function() {});  // "function"
console.log(typeof undefined);      // "undefined"

Library Import

Java

// import a single library
import library;

// import multiple libraries
import library.*;

JavaScript

// insert all of a module's exports into namespace name
import * as name from 'mod';

// insert specified export into current scope
import { exp } from 'mod';

// insert an export under an alias
import { exp as alias } from 'mod';

Equality Tests

Equality Test Java JavaScript
Object (Strict) Identity == === (no type coercion)
Value Equality .equals() (method-based) == (with type coercion if needed)

Function Declaration

function funcname (argname, ...) {
  var result = X;
  // body
  return result;
}

Class Declaration

Java

class cl extends X {
    type data = defvalue;
    type func(type N) { 
        return N * data;
    }
}

JavaScript

function MyClass() {
  this.__proto__ = X;
  this.data = defvalue;
  this.func = function(N) {
    return N * this.data;
  };
}

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  start() {
    console.log("The car is starting.");
  }

  stop() {
    console.log("The car is stopping.");
  }
}

// Create an instance of the Car class
const myCar = new Car("Toyota", "Camry", 2023);

// Access properties
console.log(myCar.make); // Output: "Toyota"
console.log(myCar.model); // Output: "Camry"
console.log(myCar.year); // Output: 2023

// Call methods
myCar.start(); // Output: "The car is starting."
myCar.stop(); // Output: "The car is stopping."

Accessing Class Members

var foo = new MyClass();

var d1 = foo.data;
var d2 = foo.func(X);
var v = foo.fact(5);

Exception Handling

function E() { ... }

function foo() {
  throw new E();
}

function bar() {
  try {
    foo();
  } catch (exc_var) {
    console.log("Err");
  } finally {
    console.log("Always");
  }
  return;
}

Flow Control

// Conditional statements
if (COND1) {
  block1;
} else if (COND2) {
  block2;
} else if (COND3) {
  block3;
} else {
  block4;
}

// While loops
while (COND) {
  block;
}

do {
  block;
} while (COND);

// For loops
for (INIT; COND; UPDATE) {
  block;
}

for (var V of ARRAY) {
  // ...
}

for (var PROP in OBJ) {
  // ...
}

// Switch statements
switch (EXPR) {
  case X:
    // ...
  default:
    // ...
}

// Within-loop control
break; // end loop
continue; // skip to next iteration

Python-Like Features

Python

# multiple assignment
a, b = x, y

// "destructuring" assignment
var [a, b] = [x, y];

var { a, b } = { a: 1, b: 2 };

// with renaming
var { a: foo, b: bar } = { a: 1, b: 2 };
console.log(foo); //==> 1

// with defaults
var { a = 10, b = 5 } = { a: 3 };
console.log(a); //==> 3
console.log(b); //==> 5

// separate from declaration
({ a, b } = {});

Strings in JavaScript

Type Conversions

Implicit Type Conversion – To Boolean

Value Boolean Conversion
numbers
0 false
Nonzero number true
NaN false
Infinity true
strings
"" (Empty string) false
Non-empty string true
Objects
null false
undefined false
All other objects true

JavaScript Arithmetic Operators

Op Description
a + b addition
a - b subtraction
a * b multiplication
a / b division
a % b modulus: remainder of a/b
-a negation
+a (unary plus) a unchanged

JavaScript Mutation Operators

Op Description
a += b add b to a (equivalent to a = a + b)
a -= b subtract b from a (equivalent to a = a - b)
a *= b multiply a by b (equivalent to a = a * b)
a /= b divide a by b (equivalent to a = a / b)
a %= b modulus: remainder of a/b (equivalent to a = a % b)

JavaScript Bitwise Operators

Op Description
a & b bitwise AND
a \| b bitwise OR
a ^ b bitwise XOR
~a bitwise NOT
a << b left shift
a >> b arithmetic right shift

JavaScript Comparison Operators

Op Description
a == b equals (with type conversion)
a === b equals (without type conversion)
a != b does not equal
a !== b not equal (without type conversion)
a < b less than
a > b greater than
a <= b less than or equal
a >= b greater than or equal

JavaScript Boolean Operators

Op Description
a && b both a and b are true
a \|\| b at least one of a, b is true
!a a is false

Defining Functions

function fib(N) {
  var L = new Array();
  var a = 0, b = 1, c = 0;

  while (c < N) {
    var tmp = b;
    b = a + b;
    a = tmp;
    L[c++] = a;
  }

  return L;
}

fib(5); // ==> [1, 1, 2, 3, 5]

function fib(N, a=0, b=1) {
  var L = new Array();
  var c = 0;
  while (c < N) {
    var tmp = b;
    b = a + b;
    a = tmp;
    L[c++] = a;
  }
  return L;
}

fib(5); // ==> [1, 1, 2, 3, 5]
fib(5, 0, 2); // ==> [2, 2, 4, 6, 10]
fib(5, 3, 1); // ==> [3, 4, 7, 11, 18]

Functions can be called with more args than declared

function foo(a) {
  console.log(a, arguments);
}

foo(1, 2, 3); // ==> 1 [1, 2, 3]

Collect optional args into an array with the rest (...) operator

function bar(a, ...b) {
  console.log(a, b);
}

bar(1, 2, 3); // ==> 1 [2, 3]

Functions can be called with fewer args than declared

function foo(a, b, c) {
  console.log(a, b, c);
}

foo(1); // ==> 1 undefined undefined

Turn array into separate args with the spread (...) operator

a = [2, 3];
foo(1, ...a); // ==> 1 2 3