JavaScript #3 - Object and Class

Object

Let's say there's a table:

And the data are saved like this.

• This is very inefficient way because as the number of variables increases, the code will get very redundant.

If we use Object, we can do something like this:

alert(plan2.name + "plan costs " + plan2.price + "dollars.")

• Example: Let's say we're creating an object for plan 1. We need to use {}, curly brackets.

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

• These name, price, space, and etc are called properties.
• In order to access these properties of an object, we do {object_name}.{property_name}, or {object_name}["{property_name}"].
• For example, if you want to access the price, we do plan1.price or plan1["price"]

Scope - the region where a variable can be used

• Function, for loops, if statements are all called block.
  - If a variable is declared inside these blocks, it can only be used inside the blocks.
  
• global variables can be used anywhere.
  - global variables shouldn't be overused.
  
• Example of a good block scope:

function logSkyColor() {
  const dusk = true;
  let myColor = 'blue'; 

  if (dusk) {
    let myColor = 'pink';
    console.log(myColor); // pink
  }

  console.log(myColor); // blue 
}

console.log(myColor); // ERROR!

Class

When you create a class, you need to create a constructor. In a constructor, you will use this. in order to assign the parameter to that very class. This variable is called member variables.

Example 1.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

Example 2.

class MyMath {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber(num1, num2) {
    return [num1,num2];
  }
  add(num1, num2) {
    return num1+num2;
  }
  subtract(num1, num2) {
    return num2-num1;
  }
  multiply(num1, num2) {
    return num1*num2;
  }
}

Object part.2

• If a key of an object is number, you can't do {object_name}.{property_name}. You need to use {object_name}["{property_name}"].
• Keys can be spaces and special characters.
  - $special
• A function inside an object is called method.
• Example:

let methodObj = {
  do: function() {
    console.log('This is how you define method');
  }
}

• When you want to call this method, you do methodObj.do();

Nested Object

let nestedObj = {
  type: {
    year: '2019',
    'comment-type': [{
      name: 'simple'
    }]
  }
}

• When you want to print simple, you need to do console.log(nestedObj.type['comment-type'][0].name);

When you save an object in a variable, it doesn't save the entire object. Rather, it saves the reference of the memory of the object. is saved as a reference.

• For example, let's say there are two objects defined.

const hiObj = { 
  name: 'hi' 
};
const helloObj = {
  name: 'hi'
};

console.log(hiObj === helloObj);
>> false
console.log(hiObj.name === helloObj.name);
>> true

• Judging from outside, we may thing the names are the same, but actually the data that hiObj and helloObj have are different.

const and object

const mutableObj = {
  name: 'object'
};

mutableObj = {
   name: 'fix'
}

mutableObj.name = 'can fix';

• As we all know, const variables cannot be fixed. So, if we assign a new object in mutableObj, it will give you an error.
• However, we can fix mutableObj with the property values like above.

Object part.3

Object.keys()

• Object.keys() returns the array of the keys of an object.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

Object.values()

• Object.values() returns the array of the values of an object.

Object.entries()

• returns both key and value in one list.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

for in loops

const arr = ['coconut', 'banana', 'pepper', 'coriander']

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

• This for loop is same as

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}