Online Training
Q4 2024

Nov 19 to Dec 10

11.00 AM EST: USA, UK, Canada, Mexico and Europe

06.00 AM GMT: MiddleEast, Asia and Australia

Register Now
Topics
  1. Understanding JavaScript Objects
Understanding JavaScript Objects
Quickly Getting Values from an Object

You can quickly get values from an object by using destructuring. It's a shortcut to assign values to variables without writing multiple lines of code. 

                                

const rubiksCube = {
  permutations: '43,252,003,274,489,856,000',
  yearInvented: '1974',
  largestSize: '17x17x17'
};
const { permutations, yearInvented, largestSize } = rubiksCube;
console.log(permutations); // '43,252,003,274,489,856,000'
console.log(yearInvented); // '1974'
console.log(largestSize); // '17x17x17'
Creating Objects Using Shorthand

When you create an object, if the property name is the same as a variable, you can use a shorter way to write it. 

                                

const activity = 'Surfing';
const beach = { activity };
console.log(beach); // { activity: 'Surfing' }
Using 'this' to Access Object Properties

'This' refers to the object where a method belongs. It lets you access that object's properties inside the method. 

                                

const cat = {
  name: 'Pipey',
  age: 8,
  getName() {
    return this.name;
  }
};
console.log(cat.getName()); // 'Pipey'
How 'this' Works in Functions

In JavaScript, 'this' refers to the object that is calling the function. It allows you to work with that object's properties. 

                                

const restaurant = {
  customers: 45,
  seats: 100,
  getAvailableSeats() {
    return this.seats - this.customers;
  }
};
console.log(restaurant.getAvailableSeats()); // 55
Arrow Functions and the 'this' Keyword

Arrow functions don’t have their own 'this'. They use 'this' from the surrounding context, which can cause unexpected results. 

                                

const myObj = {
  data: 'abc',
  arrowFunc: () => { console.log(this.data); },
  regularFunc() { console.log(this.data); }
};
myObj.arrowFunc(); // undefined
myObj.regularFunc(); // 'abc'
Using Getters and Setters in Objects

Getters and setters are special methods to get or set the value of an object’s property. They help you control access to the properties. 

                                

const myCat = {
  _name: 'Snickers',
  get name() {
    return this._name;
  },
  set name(newName) {
    if (typeof newName === 'string' && newName.length > 0) {
      this._name = newName;
    } else {
      console.log('ERROR: name must be a non-empty string');
    }
  }
};
myCat.name = 'Whiskers';
console.log(myCat.name); // 'Whiskers'
Creating Objects with Factory Functions

Factory functions are regular functions that create and return objects. They're useful for making multiple similar objects without repeating code. 

                                

const createDog = (name, age, breed) => {
  return {
    name,
    age,
    breed,
    bark() {
      console.log('Woof!');
    }
  };
};
const myDog = createDog('Buddy', 3, 'Golden Retriever');
myDog.bark(); // 'Woof!'
Restricting Property Access with Getters and Setters

Getters and setters can be used to control how properties are accessed or modified, ensuring that only valid data is accepted. 

                                

const myCat = {
  _name: 'Dottie',
  get name() {
    return this._name;
  },
  set name(newName) {
    this._name = newName;
  }
};
console.log(myCat.name); // 'Dottie'
myCat.name = 'Yankee';
console.log(myCat.name); // 'Yankee'
Rules for Naming Object Properties

Property names in JavaScript have certain rules. Names with spaces or special characters need to be inside quotes. 

                                

const schedule = {
  'platform number': 10, // Quotes are needed for spaces.
  '40-10+2': 30 // Quotes are needed for special characters.
};
console.log(schedule['platform number']); // 10
Accessing Object Properties with Dot Notation

Dot notation is an easy way to access properties in an object when the property name doesn’t have spaces or special characters. 

                                

const apple = {
  color: 'Green',
  price: {
    bulk: '$3/kg',
    smallQty: '$4/kg'
  }
};
console.log(apple.color); // 'Green'
console.log(apple.price.bulk); // '$3/kg'
Handling Undefined Properties

If you try to access a property that doesn’t exist, JavaScript will return 'undefined'. You can avoid errors by checking if the property exists. 

                                

const student = {
  name: 'Sheldon',
  score: 100,
  grade: 'A'
};
console.log(student.age); // undefined
Changing Objects

In JavaScript, you can change objects after you create them by adding, modifying, or deleting properties. 

                                

let mobile = {
  brand: 'Samsung',
  model: 'Galaxy Note 9'
};
mobile.brand = 'Apple';
console.log(mobile.brand); // 'Apple'
Using for...in Loop to Go Through Object Properties

The for...in loop lets you go through all the properties in an object, making it easy to access each one. 

                                

const classOf2018 = {
  students: 38,
  year: 2018
};
for (let key in classOf2018) {
  console.log(`${key}: ${classOf2018[key]}`);
}
Understanding Object Properties and Values

Object properties store data in an object. Sometimes, private properties are marked with an underscore to show they shouldn’t be accessed directly. 

                                

const person = {
  firstName: 'Matilda',
  age: 27,
  _hobby: 'knitting'
};
delete person._hobby;
console.log(person);
// { firstName: 'Matilda', age: 27 }
Using the Delete Operator

The delete operator removes a property from an object. The property name must be valid and enclosed in quotes if it has special characters. 

                                

const car = { color: 'blue', model: 'Toyota' };
delete car.color;
console.log(car);
// { model: 'Toyota' }
Passing Objects to Functions

You can pass objects to functions. Since objects are passed by reference, any changes made to them inside the function will affect the original object. 

                                

const car = { brand: 'Toyota', color: 'blue' };
const updateCar = (obj) => {
  obj.color = 'red';
};
updateCar(car);
console.log(car.color); // 'red'
Using Methods in Objects

Methods are functions inside an object. They allow the object to perform actions related to its data. 

                                

const engine = {
  start() {
    console.log('Engine started');
  }
};
engine.start(); // 'Engine started'

Favourites

Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.

Sign up now Right Arrow

Programming Cheatsheets: Quick Reference for Productivity

Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.

ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.

Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.

Sign up now! Right Arrow

Recent Releases

Blog IconBlogs
Learn IconLearn
Tools IconTools