JavaScript Objects

* = Good, ** = Better, *** = Best

An object is a built-in data type for storing key-value pairs. Data inside objects are unordered, and the values can be of any type.

'Objects', 'Object Definitions', 'Object Properties', 'Object Methods', 'Object Display',
'Object Accessors', 'Object Constructors', 'Object Prototypes', 'Object Reference',
'Object Map()', 'Object Set()',

*** Fire Ship IO YT***

Since ES6, we have a convenient shorthand for setting properties:

When a function is assigned to an object, it is called a method.

In a normal method, this refers to the object on which it is defined.

Functions using the arrow syntax are not bound to this, so it refers to the outer or global this context.

*** JavaScript Constructor Function & ES6 Classes***

var basicObj = { }; // an empty object - {} is a shortcut for "new Object()"

basicObj.suprise= "cake!";

basicObj['suprise'];
  

Using { } instead of new Object( ); is know as “Object Literal” syntax.

  var fancyObj = {
    favoriteFood: "pizza",
    add: function(a, b){
        return a + b;
    }
};

fancyObj.add(2,3); // returns 5

fancyObj['add'](2,3); // ditto.

Javascript objects and arrays are both incredibly useful. They're also incredibly easy to confuse with each other.
Mix in a few objects that look like arrays and you’ve got a recipe for confusion!
We're going to see what the differences between objects and arrays are,
how to work with some of the common array-like objects, and how to get the most performance out of each.

      const studentNames = ['Elvis', 'Sally', 'Ringo', 'Stevie Ray Vaughn']
// JavaScript Console Log => cl;1
console.log(studentNames.length);
    

Overview

Objects are the heart of the JavaScript language.
Objects allow us to store lots of different data about a single thing.
Understanding Objects will lead you to a greater understanding of the JavaScript language as a whole.

W3 JS Objects

  let person = {
    firstName: 'John',
    lastName: 'Doe',
    greet: function () {
        console.log('Hello, World!');
    },
    getFullName: function () {
        return this.firstName + ' ' + this.lastName;
    }
};

console.log(person.getFullName());

Properties and values of a JavaScript Object

A JavaScript object literal is enclosed with curly braces { }. Values are mapped to keys in the object with a colon (:), and the key-value pairs are separated by commas.
All the keys are unique, but values are not.
Key-value pairs of an object are also referred to as properties.

Summary An object is a collection of key-value pairs. Use the dot notation ( .) or array-like notation ([]) to access a property of an object. The delete operator removes a property from an object. The in operator check if a property exists in an object. The for...in iterates over properties of an object. When functions are the properties of an object, they are called methods. Use the this inside the method to access the object’s properties.

More on Objects

Nested Objects

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

Loop Through JavaScript Object!!...Object.keys

Methods to loop through objects using javascript for...in Loop

The most straightforward way to loop through an object's properties is by using the for...in statement.
This method works in all modern and old browsers including Internet Explorer 6 and higher.

Here is an example that uses the for...in loop to iterate over an object:

    const user = {

      name: 'John Doe',
  
      email: 'john.doe@example.com',
  
      age: 25,
  
      dob: '08/02/1989',
  
      active: true
  };
  
  // iterate over the user object
  
  for (const key in user) {
  
      console.log(`${key}: ${user[key]}`);
  }
  

** Clean Example Known Good **

  const courses = {
    java: 10,
  
    javascript: 55,
  
    nodejs: 5,
  
    php: 15
  };
  
  const keys = Object.keys(courses);
  console.log(keys);
  
  keys.forEach((key, index) => {
    console.log(`${key}: ${courses[key]}`);
  });

How to Get an Objects Keys and Values

Object Literals

See the Pen Object Literals - Objective Review by Lambda School (@lambdaschool) on CodePen.

MDN Global Objects Using Object Keys

  // simple array
  const arr = ['a', 'b', 'c'];
  console.log(Object.keys(arr)); // console: ['0', '1', '2']
  
  // array-like object
  const obj = { 0: 'a', 1: 'b', 2: 'c' };
  console.log(Object.keys(obj)); // console: ['0', '1', '2']
  
  // array-like object with random key ordering
  const anObj = { 100: 'a', 2: 'b', 7: 'c' };
  console.log(Object.keys(anObj)); // console: ['2', '7', '100']
  
  // getFoo is a property which isn't enumerable
  const myObj = Object.create({}, {
    getFoo: {
      value: function () { return this.foo; }
    }
  });
  myObj.foo = 1;
  console.log(Object.keys(myObj)); // console: ['foo']

Polyfill

  
  // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
  Object.keys = (function() {
    'use strict';
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
        dontEnums = [
          'toString',
          'toLocaleString',
          'valueOf',
          'hasOwnProperty',
          'isPrototypeOf',
          'propertyIsEnumerable',
          'constructor'
        ],
        dontEnumsLength = dontEnums.length;

    return function(obj) {
      if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) {
        throw new TypeError('Object.keys called on non-object');
      }

      var result = [], prop, i;

      for (prop in obj) {
        if (hasOwnProperty.call(obj, prop)) {
          result.push(prop);
        }
      }

      if (hasDontEnumBug) {
        for (i = 0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) {
            result.push(dontEnums[i]);
          }
        }
      }
      return result;
    };
  }());
}

See Also

Topics covered include:

1. - Object creation
2. - Bracket vs Dot Notation
3. - Property descriptors
4. - How object references work
5. - Prototype chain
6. - Modern syntax like spread and destructuring
7. - Loop over objects
8. - Custom object constructors

JavaScript - How to Get an Object’s Keys and Values in JavaScript Tab Nine

!!!Saturday January 08 2022 0733 AM !!!

In JavaScript, getting the keys and values that comprise an object is very easy. You can retrieve each object’s keys, values, or both combined into an array.

The examples below use the following object:

Getting an object’s keys

Getting an object’s Values

Getting an object’s entries

  console.log(Object.entries(obj));
    // Expected output: [["name", "Daniel"], ["age", 40], ["occupation", "Engineer"], ["level", 4]]
  

Reform an object

    const objEntries = Object.entries(obj);
      console.log(Object.fromEntries(objEntries));
      // Expected output: {name: "Daniel", age: 40, occupation: "Engineer", level: 4}
    
    
  

  const arr = [[4, 28, 167, "JavaScript"], ["One", "Two", "Three"], ["hello"]];
  console.log(Object.fromEntries(arr));
  // Expected output: {4: 28, One: "Two", hello: undefined}

JavaScript Objects Do Factory

** Codepen JavaScript Objects 16 Sub Categories **

See the Pen JavaScript Objects 02 by Robert Gorman (@RGorman62) on CodePen.

Getters and Setters

JavaScript Object Function Shorthand

JavaScript Object Constructor

=> => => Custom object constructors <= <=<=

Last Updated:

Saturday January 08 2022 0727 AM

Saturday December 04 2021 0803 AM

Saturday November 20 2021 0743 AM

Monday November 15 2021 0709 AM

Saturday November 06 2021 0742 AM

Tuesday October 26 2021 0743 AM

Saturday October 23 2021 0809 AM

Saturday October 09 2021

Saturday September 25 2021 0743 AM

Spaced Repetitions

Tuesdays and Fridays

Topic Score = 5

Importance and Relevance = 5+

Complexity = 5+

Comprehension = 3