Basics

let channing = { name: 'magic mike', gender: 'male' };

console.log(channing.name); // 'magic mike'

channing.name = 'tatum';
console.log(channing.name); // 'tatum'

channing.skill = 'dance';
console.log(channing.skill); // 'dance'

channing.born = 1980;
console.log(channing.born); // 1980

channing.planet = { name: 'earth' };
console.log(channing.planet.name); // 'earth'

console.log(channing); // { name: 'tatum', gender: 'male', skill: 'dance', born: 1980, planet: { name: 'earth' } }

console.log(channing.citizenship); // undefined

Mutability

Below example demonstrates mutability of objects vs primitive values.

/** Objects are mutable references */
const channing = { name: 'magic mike' };

console.log(channing.name); // 'magic mike'

channing.name = 'tatum'; // ✅

console.log(channing.name); // 'tatum'

channing = { name: 'tatum' }; // ❌ ERROR: cannot reassign const

/** Simple primitives are immutable values */
const person = 'channing tatum';
console.log(person.toUpperCase()); // CHANNING TATUM
console.log(person); // channing tatum

person = 'channing'; // ❌ ERROR: cannot reassign const

String Keys and Indexing

const diet = 'food';

const alien = {
  name: 'martian',
  'age': 100, // `age: 100` is the same
  'current-status': 'alive',
  ['home' + 'planet']: 'Mars', // `homeplanet: 'Mars'` is the same
  ['favorite' + diet]: 'pizza', // `favoritefood: 'pizza'` is the same
};

console.log(alien.name); // 'martian'
alien.name = 'martin';

console.log(alien['name']); // 'martin'
alien['name'] = 'allen';

console.log(alien['current-status']); // 'alive'
console.log(alien['favorite' + diet]); // 'pizza'

Number Keys

const digits = {
  1: 'one',
  dos: 'two',
  3: 'three',
};

console.log(digits.dos); // 'two'
console.log(digits['dos']); // 'two'

console.log(digits[1]); // 'one'
console.log(digits['1']); // 'one'

digits[1] = 'uno';
console.log(digits[1], digits['1']); // 'uno', 'uno'
digits['1'] = 'ONE';
console.log(digits[1], digits['1']); // 'ONE', 'ONE'

Object Equality

const personA = { name: 'John Doe' };
const personB = { name: 'John Doe' };

console.log(personA === personB); // false

console.log(personA === personA); // true
console.log(personB === personB); // true

const personC = personA;

console.log(personC === personA); // true

personC.name = 'Jane Doe';
console.log(personA.name); // Jane Doe

Shorthand Structuring

Shorthand property

const make = 'Ford';
const model = 'Mustang';
const color = 'White';

let car;

car = {
  make: make,
  model: model,
  color: color,
};

car = {
  make,
  model,
  color,
};

Spread operator

const point2d = {
  x: 0,
  y: 0,
};

let point3d;

point3d = {
  x: point2d.x,
  y: point2d.y,
  z: 0
};

point3d = {
  ...point2d,
  z: 0,
};

Spread ordering

let taskPending = {
  title: 'Record Tutorial',
  when: 'Today',
  isCompleted: false,
};
let taskCompleted;

taskCompleted = {
  ...taskPending,
  isCompleted: true,
}; // { title: 'Record Tutorial', when: 'Today', isCompleted: true }

taskCompleted = {
  isCompleted: true,
  ...taskPending,
}; // { title: 'Record Tutorial', when: 'Today', isCompleted: false }

Shorthand Destructuring

Basics

let point = { x: 0, y: 10, z: 20 };

{
  const x = point.x, y = point.y;
}

{
  const { x, y } = point;
}

{
  const { x: pointX, y: pointY, z: pointZ } = point;
  console.log(pointX, pointY, pointZ); // 0, 10, 20
}

{
  const { x, ...rest } = point;
  console.log(x, rest); // 0, { y: 10, z: 20 } 
}

Nested Destructuring

let center = {
  name: 'origin',
  location: { x: 0, y: 0, z: 0 }
};

{
  const { location: loc } = center;
  console.log(loc); // { x: 0, y: 0, z: 0 }
}

{
  const { location: { x } } = center;
  console.log(x); // 0
}

typeof Operator

let point = { x: 0, y: 0 };
let person = { name: 'Jennifer' };

console.log(typeof point); // 'object'
console.log(typeof person); // 'object'

point = { type: 'point', x: 0, y: 0 };
person = { type: 'person', name: 'Jennifer' };

console.log(point.type); // 'point'
console.log(person.type); // 'person'

if (point.type === 'point') {
  console.log('This is a point');
}

if (person.type === 'person') {
  console.log('This is a person');
}

Additional Operators

Below example shows delete and in operators

const bird = {
  type: 'chicken',
};

bird.name = 'liftoo';
console.log(bird); // { type: 'chicken', name: 'liftoo' }

bird.name = undefined;
console.log(bird); // { type: 'chicken', name: undefined }

console.log('name' in bird); // true

delete bird.name;
console.log(bird); // { type: 'chicken' }

console.log('name' in bird); // false

if ('type' in bird) { // true
  console.log(bird.type); // 'chicken'
}

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

JavaScript Objects Demystified

Subscription Required

Basics

Mutability

String Keys and Indexing

Number Keys

Object Equality

Shorthand Structuring

Shorthand property

Spread operator

Spread ordering

Shorthand Destructuring

Basics

Nested Destructuring

typeof Operator

Additional Operators

Transcript

Professional Modern JavaScript