Javascript "!" How to interpret the operator?

[OyeeBerkay]

In this block of code, “title === film.title” returns true and it should work where it is correct, but why “title === film.title” works where the wrong value is at the bottom. “! control” not returning correctly?

function addFilm(e) {
    const title = titleElement.value;
    const director = directorElement.value;
    const url = urlElement.value;
    if (title === "" || director === "" || url === "") {
        UI.displayMessages( "danger", "Alanları doldurunuz");
    } else {

        let control = false;
        const filmlist = Storage.getFilmsFromStorage();
        filmlist.forEach(function (film) {
            if (title === film.title) {
                control = true;
            }
        });

        if (!control) {
            const newFilm = new Film(title, director, url);
            UI.addFilmToUI(newFilm);
            Storage.addFilmToStorage(newFilm);
            UI.displayMessages("success", "Film basarili eklendi");
            UI.clearInputs(titleElement, directorElement, urlElement);
            e.preventDefault();
        } else {
            UI.displayMessages("danger", "Eklemeye calistiginiz film sistemde mevcuttur");
        }
    }
    e.preventDefault();
}

[marco.hadzija2002]

I´m not sure, but try to set the “!” before the brackets…
Like this: if !(control) {
your code
}

[DanCouper]

You need to explain what isn’t working correctly. What is/isn’t happening? what is it doing that you don’t expect? how does the rest of the code work? If I guess how it should work and stub in the interfaces here:

const titleElement = { value: "Dead Man's Shoes" };
const directorElement = { value: "Shane Meadows" };
const urlElement = { value: "https://en.wikipedia.org/wiki/Dead_Man%27s_Shoes_(2004_film)" };

class Film {
  constructor(title, director, url) {
    this.title = title;
    this.director = director;
    this.url = url;
  }
}

const Storage = {
  films: [],
  getFilmsFromStorage() {
    return this.films
  },
  addFilmToStorage(film) {
    this.films.push(film);
  },
};

const UI = {
  addFilmToUI(newFilm) {
    console.log(`added ${JSON.stringify(newFilm)}`);
  },
  clearInputs() {
    return void 0;
  },
  displayMessages(level, message) {
    switch (level) {
      case "danger":
        console.warn("danger!", message);
        break;
      case "success":
        console.log("success!", message);
        break;
      default:
        console.log(message);
    }
  },
};

And stub out the e.preventDefault stuff:

function addFilm(e) {
    const title = titleElement.value;
    const director = directorElement.value;
    const url = urlElement.value;

    if (title === "" || director === "" || url === "") {
      UI.displayMessages("danger", "Alanları doldurunuz");
    } else {
      let control = false;
      const filmlist = Storage.getFilmsFromStorage();

      filmlist.forEach(function (film) {
        if (title === film.title) {
          control = true;
        }
      });

      if (!control) {
        const newFilm = new Film(title, director, url);
        UI.addFilmToUI(newFilm);
        Storage.addFilmToStorage(newFilm);
        UI.displayMessages("success", "Film basarili eklendi");
        UI.clearInputs(titleElement, directorElement, urlElement);
        //             e.preventDefault();
      } else {
        UI.displayMessages("danger", "Eklemeye calistiginiz film sistemde mevcuttur");
      }
    }
//     e.preventDefault();
}

I can now run the code.

If I run it as-is (so there are no films in storage):

addFilm()

That adds the film to storage.

If I add the same film to storage before running addFilm, it logs the danger message and doesn’t add anything (the film is already there)

Storage.addFilmToStorage(new Film("Dead Man's Shoes", "Shane Meadows", "https://en.wikipedia.org/wiki/Dead_Man%27s_Shoes_(2004_film)"));
addFilm();

This is how I’d expect it to work, and I can’t see any issue with the code you posted there

[OyeeBerkay]

Thanks for answer. My problem why filmlist.forEach(function (film) { if (title === film.title) { control = true; } }); Why does not work where (! control) is, when this should work when true. Isn’t (! Control) true here?

[JeremyLT]

For what set of inputs is this code not providing the expected behavior? For that set of inputs, what do you expect and what do you see?