Git Product home page Git Product logo

proposal-nullcheck-object-destructuring's Introduction

Proposal of null check object destructuring

Proposal to add the null check in objct destructuring syntax

Status

State: -1

Author: @thejoin95 (@thejoin95)

Champion: need one

Motivation

Object destructuring is well use by the javascript developers. The default value in case of an undefined prop is useful and I think it could be even better if we are going to implement it as well with the null check, especially for a nested object in order to avoid null check errors.

Use cases & description

Imagine to have an object with n depth level, e.g. a react state/context with differents properties containing n-depth objects. In some scenario you want to destructure few properties at the first level and in other case also some more specific in-depth props.

const state = {
  navbar: {
    profileMenu: {
      username: 'jhondoe',
      ...
    }
  },
  footer: {
    brand: {
      title: 'brand one',
      ...
    }
  },
  ...
}

const {
  navbar: {
    profileMenu: {
      username: ProfileMenuUsername
    }
  }
} = state;

Let's say that, the properties are going to be valorised but some of them would have a null value:

{
  navbar: {
    profileMenu: null,
  },
  footer: {
    brand: {
      title: 'brand one',
      ...
    }
  },
  ...
}

const {
  navbar: {
    profileMenu: {
      username: ProfileMenuUsername
    }
  }
} = state; // this will break because there is no valid username prop in null

When a nested property is undefined, we could assign the default value, defined in the object destructuring syntax:

const {
  navbar: {
    profileMenu: {
      username: ProfileMenuUsername
    } = { username: null }
  } = { profileMenu: { username: null } }
} = state;

It would be great to have a syntax to indicate whenever a property could be nullable by adding a short circuit instead of throwing an error by reusing the .?, such like:

const {
  navbar: {
    profileMenu?: {
      username: ProfileMenuUsername
    } = { username: null }
  } = { profileMenu: { username: null } }
} = state;

Comparison

These npm modules do something like the proposal:

Even though is a different approach, would say old style, and I believe it should implemented directly on the destructure syntax.

Q&A

In progress

proposal-nullcheck-object-destructuring's People

Contributors

thejoin95 avatar

Watchers

 avatar  avatar

proposal-nullcheck-object-destructuring's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.