CODEWITHSUNDEEP
javascriptstringobjectglobal-variables
user17382064
user17382064

Reputation:

empty object vs. empty string How to know which to use?

Both of these global variables work in the code.

How do you know which is the right one to use if both work in the code?

I was told that one these is the right one to use, but how do you know which one to use?

If both work in the code?

I was also just told these absolutely do not do the same thing under the hood. While the code might run, and appears to run in both JSFiddle versions, it actually doesn’t.

Can someone help me to understand, which is the right one to use and why?

let currentPlayButton = {};

https://jsfiddle.net/n5cpvtok/

let currentPlayButton = “”;

https://jsfiddle.net/n5cpvtok/1/

let currentPlayButton;

https://jsfiddle.net/bo5jm2r6/

I am not seeing a difference.

When the svg’s are clicked, they fade out.

Which is the expected behavior.

  const manageCover = (function makeManageCover() {
  const config = {};
  const body = document.body;
  let currentPlayButton = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function hideAll(elements) {
    elements.forEach(hide);
  }

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".outer");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

  function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

  function coverClickHandler(evt) {
    currentPlayButton = evt.currentTarget;
    body.classList.add("initial-fade");
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function init(selectors) {
    config.containers = document.querySelectorAll(selectors.container);
    const playButtons = document.querySelectorAll(selectors.playButton);
    addClickToButtons(playButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {
    addCoverHandler,
    init
  };
}());

Upvotes: 1

Views: 89

Answers (1)

Spectric
Spectric

Reputation: 31992

They are both fine because the initial value of currentPlayButton doesn't matter. You're overwriting it either way in the coverClickHandler function and not doing anything with the original value.

Upvotes: 1

Related Questions