It is really difficult to decide between null or undefined. Sometimes all we need to do is to throw all everything and go swim.
null, undefined ou { }¯\_(ツ)_/¯
View Slide
Renan ValentinDev at Crave FoodTwitter: @nantoaquiYu-gi-oh: @nantoaquiE-mail: [email protected]
if(product.description !== undefined) {product.description.toUpperCase();}
if (product !== undefined) {if (product.ingredients !== undefined) {if (product.recipes !== undefined) {/* ... */}}}
Null PropagationOperator
product?.ingredients?.recipes
https://github.com/tc39
Null Object Pattern
const defaultProduct = {name: '',description: '',ingredients: []}
function getProductById(productId) {var result = find(productId);if (result) {return result;}return defaultProduct;}
function getProductById(productId) {return find(productId, defaultProduct);}
const defaultProduct = {name: '',description: ''}const product = {name: 'Fish',description: null}const ignoreNullValues = _(product).omit(_.isNull).value();_.merge(defaultProduct, ignoreNullValues);
{name: 'Fish',description: ''}
cart.items.find(function(item) {return item.product.id === productId;});
[{id: 'PRODUCT-ID-007',name: 'Fish'},{id: 'PRODUCT-ID-ABC',name: 'Pikachu'}]
{id: 'PRODUCT-ID-007',name: 'Fish'}
{id: 'CART-ID-001',total: 123,items: [{id: 'CART-ITEM-ID-123',amount: 1,product: {id: 'PRODUCT-ID-007',name: 'Fish'}}]}
DetailsListCARTProduct
{id: 'CART-ID-001',total: 123,items: [{id: 'CART-ITEM-ID-123',amount: 1,product: {id: 'PRODUCT-ID-007',name: 'Fish'}}]}CART
{id: 'CART-ID-001',total: 123,items: [{id: 'CART-ITEM-ID-123',amount: 1,product: {id: 'PRODUCT-ID-007',name: 'Fish'}}]}CART_item
{id: 'CART-ID-001',total: 123,items: [{id: 'CART-ITEM-ID-123',amount: 1,product: {id: 'PRODUCT-ID-007',name: 'Fish'}}]}product
{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'}}]}}
{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'}}
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'}}}
{cart: {'CART-ID-001': /* ... */},item: {'CART-ITEM-ID-123': /* ... */},product: {'PRODUCT-ID-007': /* ... */}}
ACTION
ACTION SERVER
ACTION SERVERNormalize data
ACTION SERVERNormalize dataProducts CARTCART ITEM
var appState = {cart: {},/* ... */};if (action.LOAD_CART) {appState.cart = _.merge(appSate.cart, normalized.cart);/* ... */}
function getCartById(cartId) {getFromServer(cartId, defaultCart);return appState.cart[cartId];}
var cart = getCartById('CART-ID-001');{{ cart.id }}Items{{ forEach item in cart.itemsvar cartItem = getCartItemById(item);var product = getProductById(cartItem.product);{{ product.name }}{{ product.description.toUpperCase() }}Total: {{ cartItem.total }}}}>
var cart = getCartById('CART-ID-001');{{ cart.id }}Items{{ forEach item in cart.itemsvar cartItem = getCartItemById(item);var product = getProductById(cartItem.product);{{ product.name }}{{ product.description.toUpperCase() }}Total: {{ cartItem.total }}}}>'CART-ITEM-ID-123'
var cart = getCartById('CART-ID-001');{{ cart.id }}Items{{ forEach item in cart.itemsvar cartItem = getCartItemById(item);var product = getProductById(cartItem.product);{{ product.name }}{{ product.description.toUpperCase() }}Total: {{ cartItem.total }}}}>'PRODUCT-ID-007'