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.

Transcript

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

   View Slide

2. Renan Valentin
   Dev at Crave Food
   Twitter: @nantoaqui
   Yu-gi-oh: @nantoaqui
   E-mail: valentin.renan@gmail.com
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. if(product.description !== undefined) {
    product.description.toUpperCase();
    }
    

    View Slide

13. if (product !== undefined) {
    if (product.ingredients !== undefined) {
    if (product.recipes !== undefined) {
    /* ... */
    }
    }
    }
    

    View Slide

14. View Slide

15. Null Propagation
    Operator
    

    View Slide

16. product?.ingredients?.recipes
    

    View Slide

17. product?.ingredients?.recipes
    

    View Slide

18. https://github.com/tc39
    

    View Slide

19. View Slide

20. Null Object Pattern
    

    View Slide

21. View Slide

22. const defaultProduct = {
    name: '',
    description: '',
    ingredients: []
    }
    

    View Slide

23. function getProductById(productId) {
    var result = find(productId);
    if (result) {
    return result;
    }
    return defaultProduct;
    }
    

    View Slide

24. function getProductById(productId) {
    var result = find(productId);
    if (result) {
    return result;
    }
    return defaultProduct;
    }
    

    View Slide

25. function getProductById(productId) {
    var result = find(productId);
    if (result) {
    return result;
    }
    return defaultProduct;
    }
    

    View Slide

26. View Slide

27. function getProductById(productId) {
    return find(productId, defaultProduct);
    }
    

    View Slide

28. function getProductById(productId) {
    return find(productId, defaultProduct);
    }
    

    View Slide

29. const defaultProduct = {
    name: '',
    description: ''
    }
    const product = {
    name: 'Fish',
    description: null
    }
    const ignoreNullValues = _(product).omit(_.isNull).value();
    _.merge(defaultProduct, ignoreNullValues);
    

    View Slide

30. const defaultProduct = {
    name: '',
    description: ''
    }
    const product = {
    name: 'Fish',
    description: null
    }
    const ignoreNullValues = _(product).omit(_.isNull).value();
    _.merge(defaultProduct, ignoreNullValues);
    

    View Slide

31. const defaultProduct = {
    name: '',
    description: ''
    }
    const product = {
    name: 'Fish',
    description: null
    }
    const ignoreNullValues = _(product).omit(_.isNull).value();
    _.merge(defaultProduct, ignoreNullValues);
    

    View Slide

32. const defaultProduct = {
    name: '',
    description: ''
    }
    const product = {
    name: 'Fish',
    description: null
    }
    const ignoreNullValues = _(product).omit(_.isNull).value();
    _.merge(defaultProduct, ignoreNullValues);
    

    View Slide

33. {
    name: 'Fish',
    description: ''
    }
    

    View Slide

34. View Slide

35. View Slide

36. cart.items.find(function(item) {
    return item.product.id === productId;
    });
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. [
    {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    },
    {
    id: 'PRODUCT-ID-ABC',
    name: 'Pikachu'
    }
    ]
    

    View Slide

44. [
    {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    },
    {
    id: 'PRODUCT-ID-ABC',
    name: 'Pikachu'
    }
    ]
    

    View Slide

45. {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    

    View Slide

46. {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    

    View Slide

47. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    

    View Slide

48. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    

    View Slide

49. Details
    List
    CART
    Product
    

    View Slide

50. View Slide

51. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    

    View Slide

52. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    

    View Slide

53. View Slide

54. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    CART
    

    View Slide

55. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    CART_item
    

    View Slide

56. {
    id: 'CART-ID-001',
    total: 123,
    items: [
    {
    id: 'CART-ITEM-ID-123',
    amount: 1,
    product: {
    id: 'PRODUCT-ID-007',
    name: 'Fish'
    }
    }
    ]
    }
    product
    

    View Slide

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'
    }
    }
    ]
    }
    }
    

    View Slide

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'
    }
    }
    ]
    }
    }
    

    View Slide

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'
    }
    }
    

    View Slide

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'
    }
    }
    

    View Slide

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'
    }
    }
    }
    

    View Slide

62. {
    cart: {
    'CART-ID-001': /* ... */
    },
    item: {
    'CART-ITEM-ID-123': /* ... */
    },
    product: {
    'PRODUCT-ID-007': /* ... */
    }
    }
    

    View Slide

63. View Slide

64. ACTION
    

    View Slide

65. ACTION SERVER
    

    View Slide

66. ACTION SERVER
    Normalize data
    

    View Slide

67. ACTION SERVER
    Normalize data
    Products CART
    CART ITEM
    

    View Slide

68. ACTION SERVER
    Normalize data
    Products CART
    CART ITEM
    

    View Slide

69. ACTION SERVER
    Normalize data
    Products CART
    CART ITEM
    

    View Slide

70. var appState = {
    cart: {},
    /* ... */
    };
    if (action.LOAD_CART) {
    appState.cart = _.merge(appSate.cart, normalized.cart);
    /* ... */
    }
    

    View Slide

71. var appState = {
    cart: {},
    /* ... */
    };
    if (action.LOAD_CART) {
    appState.cart = _.merge(appSate.cart, normalized.cart);
    /* ... */
    }
    

    View Slide

72. function getCartById(cartId) {
    getFromServer(cartId, defaultCart);
    return appState.cart[cartId];
    }
    

    View Slide

73. function getCartById(cartId) {
    getFromServer(cartId, defaultCart);
    return appState.cart[cartId];
    }
    

    View Slide

74. function getCartById(cartId) {
    getFromServer(cartId, defaultCart);
    return appState.cart[cartId];
    }
    

    View Slide

75. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

76. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

77. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

78. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

79. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    'CART-ITEM-ID-123'
    

    View Slide

80. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    'PRODUCT-ID-007'
    

    View Slide

81. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

82. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

83. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

84. var cart = getCartById('CART-ID-001');
    
    {{ cart.id }}
    Items
    {{ forEach item in cart.items
    
    var cartItem = getCartItemById(item);
    var product = getProductById(cartItem.product);
    {{ product.name }}
    {{ product.description.toUpperCase() }}
    Total: {{ cartItem.total }}
    
    }}>
    
    

    View Slide

85. View Slide

86. View Slide

87. View Slide