Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Null, undefined or {oh crap!}

renanvalentin
March 29, 2017
Programming
0
80

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.

renanvalentin

March 29, 2017
Tweet

More Decks by renanvalentin

See All by renanvalentin
React JS
renanvalentin
10
680
Animações com frames pré-compilados
renanvalentin
2
270
BackboneJS
renanvalentin
3
430

Other Decks in Programming

See All in Programming
The Evolution of the CRuby Build System
kateinoigakukun
0
110
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう！
cocoeyes02
0
360
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
190
エンジニア未経験が最短で戦力になるためのTips
gokana
0
260
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
170
Develop Faster With FrankenPHP
dunglas
2
3.2k
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
320
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
120
フロントエンドテストの育て方
quramy
11
2.9k
Strategic Design (DDD) for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
110
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
240

Featured

See All Featured
Docker and Python
trallard
44
3.3k
Six Lessons from altMBA
skipperchong
27
3.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
520
How to Ace a Technical Interview
jacobian
276
23k
Rails Girls Zürich Keynote
gr2m
94
13k
We Have a Design System, Now What?
morganepeng
52
7.5k
How GitHub (no longer) Works
holman
314
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Scaling GitHub
holman
459
140k

Transcript

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

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

    E-mail: [email protected]
  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