Note_Tech

All technological notes.


Project maintained by simonangel-fong Hosted on GitHub Pages — Theme by mattgraham

JavaScript Object

Back


Object Definition

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};

Create an Object

console.log("\n-------- Object: create --------\n");

// Using an Object Literal
const person1 = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};
console.log(person1);

// creates an empty JavaScript object, and then adds 4 properties
const person2 = {};
person2.firstName = "John";
person2.lastName = "Doe";
person2.age = 50;
person2.eyeColor = "blue";
console.log(person2);

// Using the JavaScript Keyword new
const person3 = new Object();
person3.firstName = "John";
person3.lastName = "Doe";
person3.age = 50;
person3.eyeColor = "blue";
console.log(person3);

Properties


Accessing properties

objectName.property;
objectName["property"];
objectName[expression]; // The expression must evaluate to a property name.

Loops through properties

for (let variable in object) {
  // code to be executed
}
const person = {
  name: "John",
  age: 30,
  city: "New York",
  hello: () => "hello",
};

console.log(Object.values(person)); //[ 'John', 30, 'New York', [Function: hello] ]
const person = {
  name: "John",
  age: 30,
  city: "New York",
  hello: () => "hello",
};

console.log(JSON.stringify(person)); //{"name":"John","age":30,"city":"New York"}

Adding New Properties

objectName.newProperty = value;

Deleting Properties

delete objectName.property;
delete person["property"];

Nested Objects

myObj = {
  name: "John",
  age: 30,
  cars: {
    car1: "Ford",
    car2: "BMW",
    car3: "Fiat",
  },
};

console.log(myObj.cars.car2); //BMW
console.log(myObj.cars["car2"]); //BMW
console.log(myObj["cars"]["car2"]); //BMW

Methods

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function () {
    return this.firstName + " " + this.lastName; //this refers to the person object.
  },
};

Access an object method

objectName.methodName();

Adding a Method to an Object

objectName.methodName = function {
  // method body
};

Object Constructor

// define
function objectName(para, para, ...){
  this.propertyName = para;
  this.propertyName = para;
  ...
}

// call
const obj = new objectName(arg, arg, ...);
console.log("\n-------- Object: constructor --------\n");

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

console.log(myFather);
// Person {
//   firstName: 'John',
//   lastName: 'Doe',
//   age: 50,
//   eyeColor: 'blue'
// }
console.log(myMother);
// Person {
//   firstName: 'Sally',
//   lastName: 'Rally',
//   age: 48,
//   eyeColor: 'green'
// }

JavaScript Objects are Mutable

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};

const x = person;
x.age = 10; // Will change both x.age and person.age

console.log(person); //{ firstName: 'John', lastName: 'Doe', age: 10, eyeColor: 'blue' }

Prototype Inheritance


prototype Property

console.log("\n-------- Object: constructor --------\n");

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}

const p1 = new Person("John", "Doe");
console.log(p1.age); //undefined
// console.log(p1.fullname()); //TypeError: p1.fullname is not a function

Person.prototype.age = 18;
Person.prototype.name = function () {
  return this.firstName + " " + this.lastName;
};

const p2 = new Person("Join", "Wick");
console.log(p1.age); //18
console.log(p1.name()); //John Doe

Trick

if (typeof myObj !== "undefined" && myObj !== null) {
  // operate object
}

TOP