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

Null, undefined or {oh crap!}

renanvalentin
March 29, 2017
Programming
0
76

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

Other Decks in Programming

See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
920
Click-free releases & the making of a CLI app
oheyadam
2
120
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
930
Contemporary Test Cases
maaretp
0
140
イベント駆動で成長して委員会
happymana
1
320
レガシーシステムにどう立ち向かうか　複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Realtime API 入門
riofujimon
0
150
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330

Featured

See All Featured
How GitHub (no longer) Works
holman
310
140k
The Invisible Side of Design
smashingmag
298
50k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Navigating Team Friction
lara
183
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Fireside Chat
paigeccino
34
3k

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