3 ways to add conditional properties to an object [...]

Prem Jethwa — Thu, 13 Jan 2022 08:21:58 +0000

1 - Using Spread Operator

What is Spread Operator?
source: MDN

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Example:-

{
   ...(someCondition && {a: “hi”})
}

const greed = {
  ...(true) && {a: “hi”},
  ...(false) && {b: "bye"},
}

2 - Using Object.assign


Object.assign(a, conditionB ? { b: 1 } : null,
                 conditionC ? { c: 2 } : null,
                 conditionD ? { d: 3 } : null);

Object.assign modifies the first argument in-place while returning the updated object: so you can use it in a bigger formula to further manipulate the object.

You can pass undefined or {} instead of null, with the same result.

Number has no own enumerable properties, so you could even provide 0 instead since primitive values are wrapped.

For jQuery Developers

var a = $.extend({}, {
    b: conditionB ? 5 : undefined,
    c: conditionC ? 5 : undefined,
    // and so on...
});

3 - To remove Undefined Values form Object not remove other falsely values like “”, 0 or null

const me = {
  name: “prem”,
  age: undefined ,
  height: null
}

const cleanup = JSON.parse(JSON.stringify(me)); // { name: “prem”, height: null }

Shot Tip:-

Use !!value to get result in Boolean values if its truthy value the will return true otherwise False.

Eg:-

let isTruthy = “hello” 

console.log(!!isTruthy) // true

isTruthy = “”; //can be 0 or undefined or null

Console.log(!!isTruthy) // false

3 steps for setting a typescript project? [typescript setup]

Prem Jethwa — Wed, 12 Jan 2022 07:19:33 +0000

What is typescript?

A free and open source programming language created and maintained by Microsoft, TypeScript (https://www.typescriptlang.org).

It adds types and more to JavaScript.Types can be added gradually. Specifying more types allows TypeScript to detect more errors.

1 - Install: -

Node.js
Code Editor (VS code recommended)
Install TypeScript (install -g typescript)

2 - Initialize the project: -

Create Project folder
Init ( npx tsc –init )

3 - ProjectName(root directory)/tsconfig.json
-- Open & Setup

{
   "compilerOptions":{
      "target":"es5",
      "module":"commonjs",
      "strict":true
   }
}

There will be many commented out default configurations. This configuration defines the version of JavaScript your TypeScript will be compiled into and the module system for your compiled program. When "strict" is set to true, a wide range of type-checking rules are enabled. As a result, your TypeScript program will have fewer errors.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    _**"outDir": "dist",
    "sourceMap": true**_
  }
}

When the value of"outDir"is set to "dist", a directory named dist will be created. The compiled JavaScript file will be placed in the dist file when you use npx tsc to compile your TypeScript file.

Setting "sourceMap" to true will allow you to quickly solve errors in the original TypeScript file.

Make sure you save file with .ts extention
Ready to write typescript Code !

DEV Community: Prem Jethwa

3 ways to add conditional properties to an object [...]

3 steps for setting a typescript project? [typescript setup]