Understanding JavaScript Objects, Modules, and Browser Compatibility

                                
const rubiksCubeFacts = {
  possiblePermutations: '43,252,003,274,489,856,000',
  invented: '1974',
  largestCube: '17x17x17'
};
const {possiblePermutations, invented, largestCube} = rubiksCubeFacts;
console.log(possiblePermutations); // '43,252,003,274,489,856,000'
console.log(invented); // '1974'
console.log(largestCube); // '17x17x17'
                              

                                
const activity = 'Surfing';
const beach = { activity };
console.log(beach); // { activity: 'Surfing' }
                              

                                
const cat = {
  name: 'Pipey',
  age: 8,
  whatName() {
    return this.name;  
  }
};
console.log(cat.whatName()); // Output: Pipey
                              

                                
const restaurant = {
  numCustomers: 45,
  seatCapacity: 100,
  availableSeats() {
    // 'this' refers to the restaurant object
    // and is used to access its properties
    return this.seatCapacity - this.numCustomers;
  }
}
                              

                                
const myObj = {
    data: 'abc',
    loggerA: () => { console.log(this.data); },
    loggerB() { console.log(this.data); },
};
myObj.loggerA(); // undefined
myObj.loggerB(); // 'abc'
                              

                                
const myCat = {
  _name: 'Snickers',
  get name(){
    return this._name;
  },
  set name(newName){
    if (typeof newName === 'string' && newName.length > 0){
      this._name = newName;
    } else {
      console.log("ERROR: name must be a non-empty string");
    }
  }
};
                              

                                
// A factory function that creates dog objects.
const dogFactory = (name, age, breed) => {
  return {
    name: name,
    age: age,
    breed: breed,
    bark() {
      console.log('Woof!');
    }
  };
};
                              

                                
const myCat = {
  _name: 'Dottie',
  get name() {
    return this._name;
  },
  set name(newName) {
    this._name = newName;
  }
};
console.log(myCat.name); // 'Dottie'
myCat.name = 'Yankee';
console.log(myCat.name); // 'Yankee'
                              

                                
// Invalid key names example
const trainSchedule = {
  "platform num": 10, // Valid because the key is inside quotes.
  40 - 10 + 2: 30, // Invalid because expressions cannot be keys.
  "+compartment": 'C' // Valid because the key is a string.
}
                              

                                
const apple = { 
  color: 'Green',
  price: {
    bulk: '$3/kg',
    smallQty: '$4/kg'
  }
};
console.log(apple.color); // 'Green'
console.log(apple.price.bulk); // '$3/kg'
                              

                                
const classElection = {
  date: 'January 12'
};
console.log(classElection.place); // undefined
                              

                                
let mobile = {
  brand: 'Samsung',
  model: 'Galaxy Note 9'
};
for (let key in mobile) {
  console.log(`${key}: ${mobile[key]}`);
}
                              

                                
const classOf2018 = {
  students: 38,
  year: 2018
};
for (let key in classOf2018) {
  console.log(`${key}: ${classOf2018[key]}`);
}
                              

                                
const person = {
  firstName: "Matilda",
  age: 27,
  hobby: "knitting",
  goal: "learning JavaScript"
};
delete person.hobby;
console.log(person);
/*
{
  firstName: "Matilda",
  age: 27,
  goal: "learning JavaScript"
}
*/
                              

                                
const origNum = 8;
const origObj = {color: 'blue'};
const changeItUp = (num, obj) => {
  num = 7;
  obj.color = 'red';
};
changeItUp(origNum, origObj);
console.log(origNum); // 8 (integers are passed by value)
console.log(origObj.color); // 'red' (objects are passed by reference)
                              

                                
const engine = {
  start(adverb) {
    console.log(`The engine starts up ${adverb}...`);
  },
  sputter: () => {
    console.log('The engine sputters...
');
  }
};
                              

                                
function useThis() {
    console.log(this);
}
let newObject = {func: useThis, prop: "value"};
newObject.func();

function useThis() {
    console.log(this);
}
newObject.func();
                              

                                
if (!Object.assign) {
  Object.assign = function(target) {
    // polyfill code here
  };
}
                              

                                
import { add, subtract } from './math.js';
                              

                                
export const add = (a, b) => a + b;
import { add } from './math.js';
                              

                                
import { add, subtract } from './math.js';
console.log(add(2, 3));
                              

                                
export const myFunction = () => {};
import { myFunction } from './myModule.js';
                              

                                
let myVariable = 'Hello'; // Transpiled into var myVariable = 'Hello';