Skip to content

3.7 Objects in Depth JS.md

Latest commit

 

History

History
207 lines (164 loc) · 5.57 KB

3.7 Objects in Depth JS.md

File metadata and controls

207 lines (164 loc) · 5.57 KB

JavaScript-JS-OOP 🙀

Source: JS Object-in-depth JavaScript - Udacity Front End Web Development Nanodegree

Table Of Contents:

Object-in-Depth JavaScript

  • a. JavaScript object fundamentals
  • b. Objects: Create, access, and modify objects.
  • c. Firs-class functions (JavaScript functions = first-class functions)
  • d. Abstactions (over traditional classes and inheritance.)

Goals:

  • JavaScript object fundamentals
  • Object
  • First-class functions
  • JavaScript's abstractions

Table Of Contents:

  • a. JavaScript object fundamentals
  • b. Objects: Create, access, and modify objects.
  • c. Firs-class functions (JavaScript functions = first-class functions)
  • d. Abstactions (over traditional classes and inheritance.)
  1. Objects In Depth.
  2. Functions at runtime.
  3. Classes and Objects.

WORKING ON IT!!

a. JavaScript object fundamentals

In JavaScript, an object= an unordered collection of properties. Each property consists of a key/value pair, and can referto:

  1. a primitive
  • string
  • number
  • booleans
  1. another object. Unlike elements in an array[], which are accessed by a numeric index, properties in objects are accessed by their key name using either {}square bracket notation or . dot notation.

b. Objects in Depth

Object Definition: a collection of associated unordered (opposite to arrays) key/value pairs. It is defined with curly brackets {}. Key/value pairs are called properties. They (key/value) is connected using colon : Properties separated from each other using comma ,

  • Syntax: const course = { courseId: 711 }; const course = { 'courseId': 711 }; const course = { "courseId": 711 };

As you see the key string can be with or without quotes. Mostly without quotes but are essential in certain cases:

  • reserved word (e.g., for, if, let, true, etc.).

  • Contains spaces or special characters that cannot appear in a variable name.

  • Accessing object properties values:

    • Using dot notation : course.courseId; Limitations:
    1. When the key is a number.
    2. When the key is stored in a variable and we want to access this property by the variable.
    • Using bracket notation : course['courseId'];

  • Accessing nested object properties values:

const bicycle = {
  color: 'blue',
  type: 'mountain bike',
  wheels: {
    diameter: 18,
    width: 8
  }
};

bicycle.wheels.width;

c. Firs-class functions (JavaScript functions = first-class functions)

d. Abstactions (over traditional classes and inheritance.)

Resources

Creating and modifying objects

// Using literal notation:
const myObject = {};

// Using the Object() constructor function (slower):
const myObject = new Object();

//Using constructor function:
function MyObjectConstructor() {
  }
const myObject = new MyObjectConstructor();
  • Modifying object properties
const cat = {
  age: 2,
  name: 'Bailey'
}
cat.age += 1;

cat.age;
// 3

cat.name = 'Bambi';

cat.name;
// 'Bambi'
  • Adding Object properties
const printer = {};

printer.on = true;
printer.mode = 'black and white';
printer.print = function () {
  console.log('The printer is printing!');
};
  • Removing Object properties
delete printer.mode;
// true
  • Since Objects are passed by reference, making changes to an original object make the same change to its copy
const iceCreamOriginal = {
  Andrew: 3,
  Richard: 15
};

const iceCreamCopy = iceCreamOriginal;

iceCreamCopy.Richard;
// 15

iceCreamCopy.Richard = 99;

iceCreamCopy.Richard;
// 99

iceCreamOriginal.Richard;
// 99
  • Comparing an Object with Another Object
const object1 = {
  name: bird}
const object2 = {
  name: bird}
object1 === object2;//false

const object = object1;
object;//{name: bird}

object === object1;//true. Also any change in object1 will make the same change in object.
object === object2;//false.

Invoke object method

  • Invoke methods different ways:
const developer = {
  sayHello: function () {
    console.log('Hi there!');
  }
};
developer.sayHello();//Hi there!
developer['sayHello']();//Hi there!
  • Pass arguments into methods:
const developer = {
  name: 'Andrew',
  favoriteLanguage: function (language) {
    console.log(`My name is ${this.name} and my favorite programming language is ${language}.`);
  }
};

developer.favoriteLanguage('JavaScript');//My name is Andrew and my favorite programming language is JavaScript.
  • Naming properties functions (rather than using anonymous functions) is valid and is useful for debugging.