Recall on Variables

• All numbers are double (floating numbers)
  • Shift (<<, >>) operator: 將數字轉成最多 32-bit 的 signed int 來進行操作
• undefined
• NaN
• null // 0 in numeric and false in Boolean

Numeric values or string?

"30" + 8  ==> "308"
"30" - 8 ==> 22
"30" * 8 ==> 240
"30" / 8 = 3.75
"30" << 8 ==> 7680
"30" >> 8 ==> 0

Converting strings to numbers

parseInt(string, base) // base = [2,36]

parseInt("15") = 15 // default is decimal
parseInt(0xF) = parseInt("0xF") = parseInt("0xF", 16) = 15
parseInt(017) = parseInt("015") = 15 = parseInt("017", 8) = 15
parseInt(017, 8) = parseInt("015", 8) = 13
parseInt("15*3", 10) ==> parseInt("15", 10) ==> 15
parseInt("321", 2) ==> NaN

See also: parseFloat("string");

Don't put " " in property name declaration

• Even though these are the same:

var a = { i: 10, "jj": 20 }

var a = { i: 10, jj: 20 }

• But this is an error

console.log(a."jj"); // ERROR!!
console.log(a.jj);   // OK!

Access the property value

1. By '.'
   • Property name must be a valid JS identifier
   • "s.createdAt" is OK, but "s.created\ at" is not OK
2. By []
   • Property name can be any valid JS string
   • s['created at'] = '2019.03.06 下午';
   • s[''] = "nothing"; // even empty string

Access the property value

ric.name;      // “Ric”
ric."name";    // ERROR!!
ric[name];     // undefined, if var name is undefined
ric["name"];   // “Ric”
ric[0];        // undefined, if ric is not an array

• 使用 [] 來存取 object 的 property 有一個好處是可以 “動態的設定” property name

var a;
if (someExpression) { a = "A"; }
else { a = "B"; }
// assume someExpression is false
ric[a] = 70;
console.log(ric.A);  // undefined
console.log(ric.B);  // 70

• Property name can almost be anything…

var car = {
  manyCars: { a: "Saab", "b": "Jeep"}, 
         7: "Mazda",
        "": "An empty string",
       "!": "Bang!" 
};
car.manyCars.a;  // "Saab"      car.manyCars."a";  // ERROR!!
car.manyCars.b;  // "Jeep"      car.manyCars."b";  // ERROR!!
car.manyCars[a]; // undefined   car.manyCars["a"]; // "Saab"
car.manyCars[b]; // undefined   car.manyCars["b"]; // "Jeep"
car."7";   // ERROR!!           car.7;   // ERROR!!
car["7"];  // "Mazda";          car[7];  // "Mazda"
car."";    // ERROR!!           car[""]; // "An empty string" 
car."!";   // ERROR!!           car.!;   // ERROR!!
car["!"];  // "Bang!"

Recall: Object can be created in many ways

• Using object initializers

var obj = { property_1:   value_1, ... }

• Using constructor function

function Car(make, model, year) { this.make = ... }
// is the same as
var Car = function(make, model, year) { this.make = ... }
// Then you can use "new" to create objects
var car1 = new Car("Toyota", "Wish", 2015);

• Using Object.create method

// Using an existing object as prototype
var obj = { value: 0 }
var newObj = Obejct.create(obj);
console.log(newObj.value);  // 0
newObj.value = 10;          // assign a new value

• Tell the differences…

// #3 Function call to a ref to an anonymous function
var Car = function(make) { this.make = make; }
var car = Car("BMW");
console.log(car);       // undefined
console.log(car.make);  // ERROR

// #4 Constructor call to a ref to an anonymous function
var Car = function(make) { this.make = make; }
var car = new Car("BMW");
console.log(car);       // { make: "BMW" }
console.log(car.make);  // "BMW"

• Tell the differences…

// #5 Ref to a ref to an anonymous function
var Car = function(make) { this.make = make; }
var car = Car;
console.log(car);       // is a function
console.log(car.make);  // undefined

// #6 Constructor call to a ref to an anonymous function
var Car = function(make) { this.make = make; }
var car = new Car;      // missing parameter
console.log(car);       // is a object
console.log(car.make);  // undefined

• Tell the differences…

// #7 Create an object from another object as a prototype
var Car = function(make) { this.make = make; }
var car = new Car("BMW");
console.log(car);       // { make: "BMW" }
console.log(car.make);  // "BMW"

var myCar = Object.create(car);
console.log(myCar);       // { } <-- no own property
console.log(myCar.make);  // "BMW" <-- inherited property

Prototype Chain

• All objects in JavaScript inherit from at least one other object.
  • Each object has a private property which holds a link to another object called its prototype.
  • That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.
  • Nearly all objects in JavaScript are instances of Object which sits on the top of a prototype chain.

"__proto__" in Prototype Chain

var Car = function(make) { this.make = make; }
var car = new Car("BMW");
var myCar = Object.create(car);
myCar.year = 2018;
console.log(myCar);
// You should see
{
  year: 2018,
  __proto__: Car {  // Note: not "car"
    make: "BMW",
    __proto__: {
      constructor: f (make),
      __proto__: Object
    }
  }
}

"__proto__" in Prototype Chain

var Car = function(make) { this.make = make; }
var car = new Car("BMW");
var myCar = Object.create(car);
myCar.year = 2018;

Inheriting Properties

• An object inherits all the properties from the objects along the prototype chain

var Car = function(make, model) { 
  this.make = make; this.model = model; }
var car = new Car("BMW", "X5");

var myCar = Object.create(car);
myCar.model = "X3"; // over-write
myCar.year = 2018;  // own property

console.log(myCar.driver); // undefined

Object.keys(obj) vs. for (var i in obj)

• "Object.keys(obj)" returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of the object obj.

Object.keys(myCar);  // ["year"]

• "for (var i in obj)" traverses all enumerable properties of an object and its prototype chain.

for (var i in myCar)
  console.log(i);  // [ "year", "make", "model"]

List of the enumerable properties

var Obj = function() { this.a = 10; this.b = 20; }
var obj1 = new Obj();
Object.keys(obj1);   // [ "a", "b" ]

var obj2 = Object.create(obj1);
obj2.c = 30;
console.log(obj2);   // { c: 30, __proto__: Obj }
Object.keys(obj2);   // [ "c" ]

console.log(obj2.a); // 10
obj2.a = 40;         // overwrite and make it own property
console.log(obj2);   // { c: 30, a: 40, __proto__: Obj }
Object.keys(obj2);   // [ "c", "a" ]

"prototype" property in the function

• You can add a property through prototype

var Car = function(make) { this.make = make; }
var car = new Car("BMW");
var myCar = Object.create(car);
myCar.year = 2018;

Car.prototype.model = "X5";
console.log(Car.prototype); // You should see
{
  model: "X5";
  constructor: f (make),
  __proto__: Object
}

console.log(myCar.model);   // "X5"

Used with Array

• Arrow function is particularly useful when works with Array

var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium'];
console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]

var todoListData = [ ... ];
todoListData.filter(elem => !elem.isComplete);
if (todoListData.some(ele => ele.isComplete))
    doSomething...