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

Null, undefined or {oh crap!}

renanvalentin
March 29, 2017
Programming
0
66

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
230
BackboneJS
renanvalentin
3
430

Other Decks in Programming

See All in Programming
PHPはいつから死んでいるかの調査
chiroruxx
1
400
2 週間で Twitter Bot を作ってみた
contour_gara
0
380
Code Reviews
bkuhlmann
4
890
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
240
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
ゆるい個人開発のススメ
kuroppe1819
10
990
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
"config" ってなんだ？ / What is "config"?
okashoi
0
240
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
930

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
What the flash - Photography Introduction
edds
64
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Faster Mobile Websites
deanohume
299
30k
Clear Off the Table
cherdarchuk
84
310k
Statistics for Hackers
jakevdp
789
220k

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