Skip to main content

JavaScript Object Literal Enhancements

Introduction​

JavaScript ES6 (ECMAScript 2015) introduced several powerful enhancements to object literals that make creating and working with objects more concise and readable. These enhancements are syntactic sugar that help you write less code while maintaining clarity. If you're working with objects in modern JavaScript, these features will significantly improve your code quality and developer experience.

In this guide, we'll explore the key object literal enhancements and how they can be used in your day-to-day JavaScript programming.

Property Shorthand​

The Old Way​

Before ES6, when defining object properties from variables with the same name, you had to write the property name and the variable name, leading to repetition:

javascript
function createUser(name, age, location) {
  return {
    name: name,
    age: age,
    location: location
  };
}

const user = createUser('Alice', 28, 'Seattle');
console.log(user); // { name: 'Alice', age: 28, location: 'Seattle' }

The Enhanced Way​

With property shorthand, when your variable name matches the property name you want to use in your object, you can simply write the name once:

javascript
function createUser(name, age, location) {
  return {
    name,  // Same as name: name
    age,   // Same as age: age
    location  // Same as location: location
  };
}

const user = createUser('Alice', 28, 'Seattle');
console.log(user); // { name: 'Alice', age: 28, location: 'Seattle' }

This enhancement makes your code more concise, especially when working with many properties derived from existing variables.

Method Shorthand​

The Old Way​

Previously, defining methods in an object literal required function expressions:

javascript
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(10, 4)); // 6

The Enhanced Way​

With method shorthand, you can omit the function keyword and colon:

javascript
const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(10, 4)); // 6

This makes methods in objects look cleaner and more aligned with modern JavaScript syntax.

Computed Property Names​

The Old Way​

Before ES6, if you wanted to use a variable or expression as an object property name, you had to create the object first and then assign the property:

javascript
function createObject(key, value) {
  const obj = {};
  obj[key] = value;
  return obj;
}

const propertyName = 'dynamicKey';
const result = createObject(propertyName, 'This is a dynamic value');
console.log(result); // { dynamicKey: 'This is a dynamic value' }

The Enhanced Way​

With computed property names, you can use square brackets directly in the object literal to indicate that the property name should be computed:

javascript
function createObject(key, value) {
  return {
    [key]: value  // Computed property name
  };
}

const propertyName = 'dynamicKey';
const result = createObject(propertyName, 'This is a dynamic value');
console.log(result); // { dynamicKey: 'This is a dynamic value' }

You can even use more complex expressions inside the square brackets:

javascript
const prefix = 'user';
const userObject = {
  [`${prefix}_name`]: 'John',
  [`${prefix}_age`]: 30,
  [`${prefix}_id_${Date.now()}`]: 12345
};

console.log(userObject); 
// Example output: { user_name: 'John', user_age: 30, user_id_1625097568923: 12345 }

Real-world Applications​

Building Configuration Objects​

Object literal enhancements are particularly useful when building configuration objects:

javascript
function initializeApp(apiKey, environment, debug) {
  return {
    apiKey,
    environment,
    debug,
    start() {
      console.log(`Starting app in ${this.environment} mode...`);
      if (this.debug) {
        console.log('Debug mode enabled');
      }
    },
    [environment === 'production' ? 'enableCaching' : 'disableCaching']: true
  };
}

const appConfig = initializeApp('abc123', 'development', true);
appConfig.start();
// Output: 
// Starting app in development mode...
// Debug mode enabled
console.log(appConfig.disableCaching); // true

Creating Dynamic API Endpoints​

You can use computed property names to create an object that maps API endpoints:

javascript
const baseUrl = 'https://api.example.com';
const version = 'v2';

const api = {
  [`${version}_users`]: `${baseUrl}/${version}/users`,
  [`${version}_posts`]: `${baseUrl}/${version}/posts`,
  
  async fetchData(endpoint) {
    console.log(`Fetching from: ${this[endpoint]}`);
    // In a real app, you would use fetch() here
    return `Data from ${this[endpoint]}`;
  }
};

// Usage
api.fetchData('v2_users')
  .then(data => console.log(data));
// Output:
// Fetching from: https://api.example.com/v2/users
// Data from https://api.example.com/v2/users

Building Form Handlers​

Combining these enhancements makes handling form data much cleaner:

javascript
function handleFormSubmit(event) {
  event.preventDefault();
  
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  const plan = document.getElementById('plan').value;
  
  const formData = {
    username,
    email,
    plan,
    [`${plan}_selected`]: true,
    validate() {
      return this.username && this.email;
    },
    submit() {
      if (this.validate()) {
        console.log('Submitting data:', this);
      } else {
        console.log('Validation failed');
      }
    }
  };
  
  formData.submit();
}

// Example usage would be attaching this to a form's submit event

Summary​

JavaScript object literal enhancements provide several ways to write cleaner, more concise code when working with objects:

  1. Property Shorthand: Use variable names directly as object properties when they share the same name
  2. Method Shorthand: Define object methods without the function keyword
  3. Computed Property Names: Use expressions in square brackets to dynamically generate property names

These enhancements are part of modern JavaScript and are widely supported in browsers and Node.js. They help make your code more readable and maintainable while reducing unnecessary repetition.

Exercises​

To solidify your understanding of object literal enhancements, try these exercises:

  1. Convert the following object to use object literal enhancements:

    javascript
    const firstName = 'Jane';
    const lastName = 'Doe';
    const age = 28;

    const person = {
      firstName: firstName,
      lastName: lastName,
      age: age,
      getFullName: function() {
        return this.firstName + ' ' + this.lastName;
      }
    };

  2. Create a function called createProduct that takes parameters for name, price, and category. Use all three object literal enhancements to return a product object with:

    • The provided properties
    • A method called getDiscountPrice that returns the price with a 10% discount
    • A computed property that combines the category and name (e.g., electronics_laptop)

  3. Create a "log level" utility that uses computed property names to define different logging methods based on the current environment.

Additional Resources​


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)