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

Null, undefined or {oh crap!}

renanvalentin
March 29, 2017
Programming
0
79

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
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
240
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
270
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
890
快速入門可觀測性
blueswen
0
350
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
Security_for_introducing_eBPF
kentatada
0
110
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
240

Featured

See All Featured
Statistics for Hackers
jakevdp
796
220k
Being A Developer After 40
akosma
87
590k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Fireside Chat
paigeccino
34
3.1k
A better future with KSS
kneath
238
17k
What's in a price? How to price your products and services
michaelherold
243
12k
The Invisible Side of Design
smashingmag
298
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Git: the NoSQL Database
bkeepers
PRO
427
64k
For a Future-Friendly Web
brad_frost
175
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k

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