Behavior of Array.prototype.map() function with JS Objects

In your first example, you only created one object, then put it in the array four times:

let obj ={}; // <===== Creates the one object
let newIngredients = ["Hello", "Distraction", "Nothing", "Love"].map(el => {
    obj.count= Math.random()*el.length;
    obj.ingredient= el;
    return obj; // <===== Puts it in the array four times
});
console.log(newIngredients);

Since there's only one object, each time you did obj.ingredient = el; you updated the property, replacing the previous value it had.

The result looks something like this in memory:

                                            +−−−−−−−−−−−−−−−−−−−−−−−−−−−+
obj:Ref11654−−−−−−−−−−−−−−−−−−−−−−−+−+−+−+−>|         (object)          |
                                  / / / /   +−−−−−−−−−−−−−−−−−−−−−−−−−−−+
                                  | | | |   | count: 1.4648989727265578 |
                                  | | | |   | ingredient: "Love"        |
                                  | | | |   +−−−−−−−−−−−−−−−−−−−−−−−−−−−+
                                  | | | |
                  +−−−−−−−−−−−−−+ | | | |
newIngredients−−−>|   (array)   | | | | |
                  +−−−−−−−−−−−−−+ | | | |
                  | 0: Ref11654 |−+ | | |
                  | 1: Ref11654 |−−−+ | |
                  | 2: Ref11654 |−−−−−+ |
                  | 3: Ref11654 |−−−−−−−+
                  +−−−−−−−−−−−−−+

It's exactly like doing this:

let first = {};
first.a = 1;
let second = first;
second.a = 2;
console.log(first.a); // 2, not 1

Your second example creates an object for each call to the map callback, which is correct, although there's no need for the obj variable and having it is a bit misleading. So:

let newIngredients = ["Hello", "Distraction", "Nothing", "Love"].map(el => {
    return {
        count: Math.random()*el.length,
        ingredient: el
    };
});
console.log(newIngredients);

or with a concise arrow function:

let newIngredients = ["Hello", "Distraction", "Nothing", "Love"].map(el => ({
    count: Math.random()*el.length,
    ingredient: el
}));
console.log(newIngredients);

This is not related to Array.prototype.map() but instead related to Object behaviour in javascript.

For example if you run this

let obj = {};
let prev = obj;
let newIngredients = ["Hello", "Distraction", "Nothing", "Love"].map(el => {
  obj = {
    count: Math.random() * el.length,
    ingredient: el
  };
  if (obj === prev) {
    console.log(true);
  } else {
    console.log(false)
  }
  prev = obj;
  return obj;
});
console.log(newIngredients);

And run this

let obj = {};
let prev = obj;
let newIngredients = ["Hello", "Distraction", "Nothing", "Love"].map(el => {
  obj.count = Math.random() * el.length;
  obj.ingredient = el;
  if (obj === prev) {
    console.log(true);
  } else {
    console.log(false)
  }
  prev = obj;
  return obj;
});
console.log(newIngredients);

You can clearly see in the first result, It's returning false because Object creation syntax, i.e

let a = { } is equal to

let a = new Object();

In the true one, you're just updating the previous object which is the same object being referenced by all your array elements and being updated altogether.

Hopefully, this makes it clear.