What does .parent mean when placed after a variable with an ! (ex. (!myVariable.parent)

Question

I'm fairly new at javascript and frontend coding in general. I'm working on a codepen and trying to understand everything in the code so I can modify to my needs.

There is a function that goes:

function checkTiles() { // function for the check button

  for (var i = 0; i < dragTiles.length; i++) { // iterate through all the draggable tiles (a variable declared earlier)

    var tile = dragTiles[i]; // variable for this iteration

    if (!tile.parent) {
      continue;
    }

//does more stuff..

}

(The comments are for myself to better understand).

I'm trying to understand what the line "if (!tile.parent)" is doing. From what I've read, "parent" refers to the parent window? So is this line saying something along the lines of, "if the tile variable (draggable tiles) aren't equal to the parent window"??

It doesn't make a lot of sense to me. Here's the link to the codepen I'm working on if seeing it in context would help - https://codepen.io/kbeats/pen/eLpawv

Please note I didn't write this codepen, not that good at coding yet.

Any help is much appreciated, thanks!

Answer 1

You can think of ! as an expression that negates something. Javascript has the following "falsey" values- falsey meaning they equate to false in boolean checks:

false
undefined
null
NaN
0
"" or ''

The expression if (!tile.parent) checks to see if title.parent is equal to one of the above falsey values. If so, continue. If not- the condition is not met and the code execution continues further down in the function.

Answer 2

if (!tile.parent) {
      continue;
   }

checking against ! means you are checking tile.parent is a false condition.

here tile is an object and you are checking whether it does not have a property named parent.

EDIT

i went through the pen to see what this dragTiles array holds. so what we have there is

var dragTiles = Array.prototype.map.call(dragElements, createDragTile);

and dragElements is

var dragElements = document.querySelectorAll(".drag-tile");

here you can see dragElements are simply dom nodes which have class .drag-title

but dom elements dont have any property parent . so you need to check in the createDragTile definition which is

function createDragTile(element, index) {

  TweenLite.set(element, { 
    left: pad, 
    top: pad + index * (pad + element.offsetHeight) 
  });

  var draggable = new Draggable(element, { 
    bounds: ".board",
    onDragStart: onDragStart,
    onDrag: onDrag,
    onDragEnd: onDragEnd
  });
  // here we are declaring the tile object. with custom property parent
  var tile = { 
    element: element,
    parent: null,  // this is your parent. author is setting it for the tile. its a custom object. not refering to global window or anything.
    value: element.dataset.value 
  };

  function onDragStart() {}

  function onDrag() {
    // here is the info of parent property         
    var parent = tile.parent; // parent variable equals the parent property of tile varaible(which is set to NULL in the variable TILE above) SO, PARENT = NULL if drag tile isn't on a drop tile, if it IS then parent = the DROP TILE DIV

    if (parent) { // so if the parent is NULL, then look for the hit Test (cause the drag tile isn't on anything yet)

      if (this.hitTest(parent.element, threshold)) { // if THIS (the item that iniatied the function, the tile being dragged) overlaps with THE PARENT ELEMENT, so parent = null and element = element ?? 

        // exit the function
        // tile is still hitting parent, so no need to proceed any further.
        return; // exit and END THE FUNCTION HERE IF it is hitting the threshold
      }

      // tile is no longer hitting parent, so clear any references between the two
      parent = tile.parent = parent.child = null;  // if it's not hitting the threshold CLEAR ANY REFERENCES WHAT IS THIS ???????
    }

    for (var i = 0; i < dropTiles.length; i++) { // iterate through all the drop tiles

      var dropTile = dropTiles[i]; // variable for above iteration

      if (dropTile.child) { // child is NULL until a drag tile is on Top of if, so if the dropTile IS NULL then continue, if it doesn't have anything on it. 

        // continue to next loop iteration
        // drop tile already has a child, so no need to proceed any further
        continue;
      }

      if (this.hitTest(dropTile.element, threshold)) { // if the draggable hits a drop tile threshold

        // we hit an empty drop tile, so link the two together and exit the function
        tile.parent = dropTile; // here we are assigning the tile.parent to be DROP TILE 
        dropTile.child = tile; // here we are assigning the dropTile child to be TILE
        element.classList.add("hitting"); // add the class HITTING
        return;
      }
    }

    // if we made it this far, we're not hitting an empty drop tile
    element.classList.remove("hitting");
  }

  function onDragEnd() {

What I understood from this function is if .parent which is a custom property in this data structure is null means the element is not dragged and dropped to the location. it is still in its original position. if the tile is at drop position its .parent becomes the drop tile. it doesn't refer to any global object or window. its simply holding the reference of the tile where you can drop an item, it can be either null or dom node reference