Null, undefined or {oh crap!}

Null, undefined or {oh crap!}

It is really difficult to decide between null or undefined. Sometimes all we need to do is to throw all everything and go swim.

51209ddc02bcaaec1e0ef3b8032054f4?s=128

renanvalentin

March 29, 2017
Tweet

Transcript

  1. null, undefined ou { } ¯\_(ツ)_/¯

  2. Renan Valentin Dev at Crave Food Twitter: @nantoaqui Yu-gi-oh: @nantoaqui

    E-mail: valentin.renan@gmail.com
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. if(product.description !== undefined) { product.description.toUpperCase(); }

  13. if (product !== undefined) { if (product.ingredients !== undefined) {

    if (product.recipes !== undefined) { /* ... */ } } }
  14. None
  15. Null Propagation Operator

  16. product?.ingredients?.recipes

  17. product?.ingredients?.recipes

  18. https://github.com/tc39

  19. None
  20. Null Object Pattern

  21. None
  22. const defaultProduct = { name: '', description: '', ingredients: []

    }
  23. function getProductById(productId) { var result = find(productId); if (result) {

    return result; } return defaultProduct; }
  24. function getProductById(productId) { var result = find(productId); if (result) {

    return result; } return defaultProduct; }
  25. function getProductById(productId) { var result = find(productId); if (result) {

    return result; } return defaultProduct; }
  26. None
  27. function getProductById(productId) { return find(productId, defaultProduct); }

  28. function getProductById(productId) { return find(productId, defaultProduct); }

  29. const defaultProduct = { name: '', description: '' } const

    product = { name: 'Fish', description: null } const ignoreNullValues = _(product).omit(_.isNull).value(); _.merge(defaultProduct, ignoreNullValues);
  30. const defaultProduct = { name: '', description: '' } const

    product = { name: 'Fish', description: null } const ignoreNullValues = _(product).omit(_.isNull).value(); _.merge(defaultProduct, ignoreNullValues);
  31. const defaultProduct = { name: '', description: '' } const

    product = { name: 'Fish', description: null } const ignoreNullValues = _(product).omit(_.isNull).value(); _.merge(defaultProduct, ignoreNullValues);
  32. const defaultProduct = { name: '', description: '' } const

    product = { name: 'Fish', description: null } const ignoreNullValues = _(product).omit(_.isNull).value(); _.merge(defaultProduct, ignoreNullValues);
  33. { name: 'Fish', description: '' }

  34. None
  35. None
  36. cart.items.find(function(item) { return item.product.id === productId; });

  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. [ { id: 'PRODUCT-ID-007', name: 'Fish' }, { id: 'PRODUCT-ID-ABC',

    name: 'Pikachu' } ]
  44. [ { id: 'PRODUCT-ID-007', name: 'Fish' }, { id: 'PRODUCT-ID-ABC',

    name: 'Pikachu' } ]
  45. { id: 'PRODUCT-ID-007', name: 'Fish' }

  46. { id: 'PRODUCT-ID-007', name: 'Fish' }

  47. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] }
  48. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] }
  49. Details List CART Product

  50. None
  51. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] }
  52. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] }
  53. None
  54. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] } CART
  55. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] } CART_item
  56. { id: 'CART-ID-001', total: 123, items: [ { id: 'CART-ITEM-ID-123',

    amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] } product
  57. { cart: { 'CART-ID-001': { id: 'CART-ID-001', total: 123, items:

    [ { id: 'CART-ITEM-ID-123' , amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] } }
  58. { cart: { 'CART-ID-001': { id: 'CART-ID-001', total: 123, items:

    [ { id: 'CART-ITEM-ID-123' , amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } } ] } }
  59. { cart: { 'CART-ID-001': { id: 'CART-ID-001', total: 123, items:

    'CART-ITEM-ID-123' } }, cart_item: { 'CART-ITEM-ID-123': { id: 'CART-ITEM-ID-123', amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } }
  60. { cart: { 'CART-ID-001': { id: 'CART-ID-001', total: 123, items:

    'CART-ITEM-ID-123' } }, cart_item: { 'CART-ITEM-ID-123': { id: 'CART-ITEM-ID-123', amount: 1, product: { id: 'PRODUCT-ID-007', name: 'Fish' } }
  61. items: 'CART-ITEM-ID-123' } }, cart_item: { 'CART-ITEM-ID-123' : { id:

    'CART-ITEM-ID-123' , amount: 1, product: 'PRODUCT-ID-007' } }, product: { 'PRODUCT-ID-007': { id: 'PRODUCT-ID-007', name: 'Fish' } } }
  62. { cart: { 'CART-ID-001': /* ... */ }, item: {

    'CART-ITEM-ID-123': /* ... */ }, product: { 'PRODUCT-ID-007': /* ... */ } }
  63. None
  64. ACTION

  65. ACTION SERVER

  66. ACTION SERVER Normalize data

  67. ACTION SERVER Normalize data Products CART CART ITEM

  68. ACTION SERVER Normalize data Products CART CART ITEM

  69. ACTION SERVER Normalize data Products CART CART ITEM

  70. var appState = { cart: {}, /* ... */ };

    if (action.LOAD_CART) { appState.cart = _.merge(appSate.cart, normalized.cart); /* ... */ }
  71. var appState = { cart: {}, /* ... */ };

    if (action.LOAD_CART) { appState.cart = _.merge(appSate.cart, normalized.cart); /* ... */ }
  72. function getCartById(cartId) { getFromServer(cartId, defaultCart); return appState.cart[cartId]; }

  73. function getCartById(cartId) { getFromServer(cartId, defaultCart); return appState.cart[cartId]; }

  74. function getCartById(cartId) { getFromServer(cartId, defaultCart); return appState.cart[cartId]; }

  75. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  76. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  77. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  78. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  79. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div> 'CART-ITEM-ID-123'
  80. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div> 'PRODUCT-ID-007'
  81. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  82. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  83. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  84. var cart = getCartById('CART-ID-001'); <div> <h1>{{ cart.id }}</h1> <h2>Items</h2> {{

    forEach item in cart.items <li> var cartItem = getCartItemById(item); var product = getProductById(cartItem.product); <h3>{{ product.name }}</h3> <p>{{ product.description.toUpperCase() }}</p> <b>Total: {{ cartItem.total }}</b> </li> }}> </div>
  85. None
  86. None
  87. None