Guys, What's going wrong in this basic snippet : I was working on a personnal project when i found that something was going wrong in my code. After few minutes of debugging, i was able to tell what was wrong and how to workaround. But in fact i don't have resolved my original issue.

Look at this :

    interface Animals {
  	  id: number;
 	  name: string;
  	  color: string;
    }

    interface Zoo {
  	  name: string;
	  animals: Animals[];
    }

    function main() {
      let zoo: Zoo = {
          name : "Valley of monkeys",
          animals : [
              {
                  id : 1,
                  name: "Foufou",
                  color: "brown"
              },
              {
                  id: 2,
                  name: "Toutou",
                  color: "brown"
              },
              {
                  id: 3,
                  name: "Moumou",
                  color: "blue"
              }
          ]
    };
  
    let zoobis: Zoo;
  
    zoobis = zoo;

    console.log(zoobis);
    console.log(zoo);

    zoobis.animals = zoo.animals.filter((animal) => animal.color === "brown");
  
    console.log("============");
    console.log(zoobis);
    console.log(zoo);
    }

    main();

Link to original code to test it : <http://www.typescriptlang.org/play/#src=interface%20Animals%20%7B%0D%0A%20%20%09id%3A%20number%3B%0D%0A%20%09name%3A%20string%3B%0D%0A%20%20%09color%3A%20string%3B%0D%0A%20%20%09%0D%0A%7D%0D%0A%0D%0Ainterface%20Zoo%20%7B%0D%0A%20%20%09name%3A%20string%3B%0D%0A%09animals%3A%20Animals%5B%5D%3B%0D%0A%7D%0D%0A%0D%0Afunction%20main()%20%7B%0D%0A%20%20%20%20let%20zoo%3A%20Zoo%20%3D%20%7B%0D%0A%20%20%20%20%20%20%20%20name%20%3A%20%22Valley%20of%20monkeys%22%2C%0D%0A%20%20%20%20%20%20%20%20animals%20%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%20%3A%201%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Foufouf%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%22brown%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%3A%202%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Toutou%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%22brown%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20id%3A%203%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%22Moumou%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%22blue%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%7D%3B%0D%0A%20%20%0D%0A%20%20let%20zoobis%3A%20Zoo%3B%0D%0A%20%20%0D%0A%20%20zoobis%20%3D%20zoo%3B%0D%0A%20%20console.log(zoobis)%3B%0D%0A%20%20%0D%0A%20%20console.log(zoo)%3B%0D%0A%20%20zoobis.animals%20%3D%20zoo.animals.filter((animal)%20%3D%3E%20animal.color%20%3D%3D%3D%20%22brown%22)%3B%0D%0A%20%20%0D%0A%20%20console.log(%22%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%22)%3B%0D%0A%20%20console.log(zoobis)%3B%0D%0A%20%20console.log(zoo)%3B%0D%0A%7D%0D%0A%0D%0Amain()%3B>

As you can see there are two mains problems :

 - The first one is that both arrays are modified ! Even though in the javascript official documentation, it specified that "filter() does not mutate the array on which it is called."

 - The second one is that both arrays are modified before the call of filter which is weird actually.


The workaround is basically to convert "zoobis" into an Animal[] instead of taking the whole Zoo object. It seems to normally work in this way.

Am i misunderstanding a basic concept of javascript or am i doing stupid mistakes that makes my code doing weird things ?

Thank you ! :) 