Javascript "!" How to interpret the operator?

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();
}

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

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

1 Like

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?

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?