title: Strange behaviour of TypeScript String.split() function
body: <p>I have TypeScript model like this:</p>
  
  <pre><code>export class Product {
      id:number;
      name:string;
      brand:Brand;
      price:number;
      shippingPrice:number;
      description:string;
      photoName:string;
      productType:ProductType;
      purchaseCounter:number;
      rating:number;
      volume:string;
      ingredients:string;
  }
  </code></pre>
  
  <p>and json file which populate this model:</p>
  
  <pre><code>{
    "id": 1,
    "name": "xxx",
    "description": "xxx",
    "price": 12.34,
    "purchaseCounter": 12,
    "photoName": "xx",
    "shippingPrice": 12.99,
    "volume": "xxx",
    "rating": 4.7,
    "ingredients": "A,B,C",
    "brand": {
      "id": 1,
      "name": "xx"
    },
    "productType": {
      "id": 3,
      "name": "xxx"
    }
  }
  </code></pre>
  
  <p>Now in my TypeScript component I have function like this :</p>
  
  <pre><code>public getIngredients():String [] {
          return this.product.ingredients.split(",");
      }
  </code></pre>
  
  <p>Everytime when I am invoking this function I have error: </p>
  
  <blockquote>
    <p>"TypeError: Cannot read property 'split' of undefined"</p>
  </blockquote>
  
  <p>but when i change body of function to sth like this:</p>
  
  <pre><code>public getIngredients():String [] {
      if (this.product.ingredients == null) {
          return null;
      }
      return this.product.ingredients.split(",");
  }
  </code></pre>
  
  <p>then eveyrthing is ok and split function work properly. Have You got any idea why checking if ingredients is not null fix it? I have to admin that I just start my adventure with js and ts. Thanks</p>
  
  <p>UPDATE
  I instantiating this Product variable here:</p>
  
  <pre><code>export class ProductOverviewComponent implements OnInit {
      private product:Product;
      private errorMessage:string;
  
      constructor(private productService:ProductService) {
          this.product = new Product();
      }
  
      ngOnInit():void {
          this.productService.getProduct()
              .subscribe(
                  product =&gt; this.product = product,
                  error =&gt; this.errorMessage = &lt;any&gt;error);
      }
  }
  </code></pre>
  
  <p>For now I hit to the json file but in future I will hit to server. Another think is that I pass product to another comopnent using @Input().</p>
  
  <p>And this is how i call getIngredients function</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
          &lt;div class="property-text"&gt;
              &lt;!--&lt;h3 class="h3style"&gt;Ingredients&lt;/h3&gt;--&gt;
              &lt;ul&gt;
                  &lt;li *ngFor="let ingredient of getIngredients()"&gt;
                      {{ ingredient }}
                  &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>