How to Conditionally Add Property to the Object in JavaScript

CodErdal — Wed, 12 Jul 2023 15:35:39 +0000

In JavaScript, there are several ways to conditionally add elements to an object based on certain conditions. This flexibility allows us to dynamically modify objects as needed. In this post, i will talk about two different ways to accomplish this task. Let's dive in!

Method 1: Spread Operator and Logical AND Operator
This method allows you to add items to the object depending on the condition. If the condition is not true, no new item is added to the object.

Example:

let object = {
   ...(condition here) && {prop: propvalue},
   ...otherprops
}

Method 2: Ternary Operator
This method only allows you to add the value of the key conditionally, the element is defined to the object in both conditions.

Example:

let object = {};

object.newKey = condition ? value : defaultValue;

Can be useful:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator

How To Pass Arguments To The Vuex Getters

CodErdal — Tue, 27 Sep 2022 16:30:09 +0000

We use Vuex to do more systematic state management with Vue JS.

Getters with a Vuex property are written like functions but work like computed properties.

Sometimes; When using getters in Vuex, in some cases we may want to send some arguments to our getters.

To do this we can use the "Method-Style Access" method provided by vuex.

Using this method we should define our getters like this:

Defining:

getterName: (state) => (parameter) => { // get the parameter
    return state.data.find(item => item.id === parameter)
}

Using this defining method, we can send arguments to the getters we define.

Usage:

store.getters.getterName(2); // we sent 2 as getter parameter

But sometimes we can include our getters with the "mapGetters" helper.
In this case, we must use a different method to send arguments to the getters.

Sending arguments to getter included with mapGetters

After defining the getter with the same method, we include it in the component with "mapGetters".

To send an argument to a getter included with mapGetters; we need to define a new computed property.

This new computed property will take parameter like a function. It will send this parameter as an argument to the getter that comes with mapGetters and return this value.

import { mapGetters } from 'vuex';

  computed: {

    // import the getters with mapGetters
    ...mapGetters([
      'getterName',
    ]),

    //Define New Computed Property
    newGetter(parameter){ // get the parameter
      return this.getterName(parameter) // return the value
    }

  }

Thus, the arguments we send to our getter named newGetter will be sent to the getter we include with mapGetters.

Method-Style Access:
https://vuex.vuejs.org/guide/getters.html#method-style-access

Forem: CodErdal

How to Conditionally Add Property to the Object in JavaScript

How To Pass Arguments To The Vuex Getters

Sending arguments to getter included with mapGetters