Objects and its properties

[vikramlc]

[vikramlc]

Creating an object, adding and deleting a property:

let person = {
    name: 'Max',
    hobbies: ['cooking', 'sports'],
    greet: function() {
        alert('Hi there!');
    }
};
undefined

person
{name: "Max", hobbies: Array(2), greet: ƒ}

person.isAdmin = true;
true

person
{name: "Max", hobbies: Array(2), isAdmin: true, greet: ƒ}

delete person.isAdmin;
true

person
{name: "Max", hobbies: Array(2), greet: ƒ}

[vikramlc]

Special key names and Square bracket property access:

const personDataNew = {
    'first name': 'Max',
    hobbies: ['cooking', 'sports'],
    greet: function() {
        alert('Hi there!');
    }
};

personDataNew
{first name: "Max", hobbies: Array(2), greet: ƒ}

personDataNew["first name"]
"Max"

[vikramlc]

Dynamic Property access and Setting properties dynamically: If you want to have a property in an object with a key which is unknown. We can use a dynamic property setting.

const userInputtedKeyName = 'level';
const personDataNew = {
    'first name': 'Max',
    [userInputtedKeyName]: 'some info',
    hobbies: ['cooking', 'sports'],
    greet: function() {
        alert('Hi there!');
    }
};

// {first name: "Max", level: "some info", hobbies: Array(2), greet: ƒ}

[vikramlc]

Object Spread operator:

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };

const clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

const mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

[vikramlc]

Object.assign(): The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

For deep cloning, we need to use alternatives, because Object.assign() copies property values. If the source value is a reference to an object, it only copies the reference value.

let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
  console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}}

  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}}
  console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}}

  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}}

Merging objects with the same properties:

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

[vikramlc]

Object destructuring: Basic assignment: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

const user = {
    id: 42,
    is_verified: true
};

const {id, is_verified} = user;

console.log(id); // 42
console.log(is_verified); // true 

Assignment without declaration: ({a, b} = {a: 1, b: 2}) is valid, as is const {a, b} = {a: 1, b: 2}

let a, b;
({a, b} = {a: 1, b: 2});

Assigning to new variable names

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;

console.log(foo); // 42 
console.log(bar); // true

Default values:

const {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

Assigning to new variables names and providing default values:

const {a: aa = 10, b: bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5

Unpacking fields from objects passed as function parameter

const user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

function userId({id}) {
  return id;
}

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}

console.log(userId(user)); // 42
console.log(whois(user));  // "jdoe is John"

For of iteration and destructuring:

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (const {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Computed object property names and destructuring:

let key = 'z';
let {[key]: foo} = {z: 'bar'};

console.log(foo); // "bar"

Rest in Object Destructuring:

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10 
b; // 20 
rest; // { c: 30, d: 40 }

Invalid JavaScript identifier as a property name:

const foo = { 'fizz-buzz': true };
const { 'fizz-buzz': fizzBuzz } = foo;
console.log(fizzBuzz); // "true"

Combined Array and Object Destructuring:

const props = [
  { id: 1, name: 'Fizz'},
  { id: 2, name: 'Buzz'},
  { id: 3, name: 'FizzBuzz'}
];

const [,, { name }] = props;
console.log(name); // "FizzBuzz"