singhArmani

/**
 * Block level and Height
 */
div {
 width: 600px;
 background-color: gold;
}

singhArmani

/*Hard to read if used opacity*/
div {
box-shadow: 0 0 0 5px gold;
background: #f06;
font-size: 24px;
position: relative;
width:600px;
}

.opac {

singhArmani

.first {
   padding: 10px;
   height: 300px;
   margin: 10px 30px 30px 10px;
   background: red;
   box-shadow: 0 0 0 10px gold;
   width: 100px;
   text-align: center;
   float: left
}

singhArmani

.first {
   padding: 10px;
   height: 300px;
   margin: 10px 30px 30px 10px;
   background: red;
   box-shadow: 0 0 0 10px gold;
   width: 100px;
   text-align: center;
   float: left
}

singhArmani

var x = 10; // global scope
var foo = {
  x: 90,
  getX: function() {
    return this.x;
  }
};
foo.getX(); // prints 90
let xGetter = foo.getX;
xGetter(); // prints 10

singhArmani

var obj = { a: 1, b: 2 }; // a, b are both enumerables properties

// setting {c: 3} as the prototype of 'obj',
// and as we know for-in loop also iterates over the properties obj inherits
// from its prototype, 'c' will also be visited.
Object.setPrototypeOf(obj, { c: 3 });

// we are defining one more property 'd' into our 'obj',
// but we are setting the 'enumerable' to false. It means 'd' will be ignored.
Object.defineProperty(obj, "d", { value: 4, enumerable: false });

singhArmani

var obj = { a: 1, b: 2 };
var descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor.enumerable); // true
console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }

singhArmani

var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function*() {
  yield 1;
  yield 2;
  yield 3;
};
[...obj]; // print [1, 2, 3]

singhArmani

var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
  // An iterator is an object which has a next method,
  // which also returns an object with atleast one of two properties: value & done.

  // returning an iterator object
  return {
    next: function() {
      if (this._countDown === 3) {
        const lastValue = this._countDown;

singhArmani

Steps

1. Calling foo() will put the foo function into the call stack.
2. While processing the code inside, JS engine encounters the setTimeout.
3. It then hands over the foo callback to the WebAPIs (arrow 1) and returns from the function. The call stack is empty again.
4. The timer is set to 0, so the foo will be sent to the Task Queue (arrow 2).
5. As, our call stack was empty, the event loop will pick the foo callback and push it to the call stack for processing.
6. The Process repeats again and stack doesn't overflow ever.