0/ 21

JS Output Challenges

All sets

Test your JavaScript skills by predicting console output for tricky code snippets. Covers hoisting, closures, this binding, async operations, and event loop quiz questions.

21 snippets · predict the output, then run it

#1Promise Resolve & Reject

const promise = new Promise((resolve , reject) => {
    resolve(10);
    reject(20);
    console.log("here");
})

promise.then((value) => {
    console.log(value);
})

What will be the output?

#2Promise Reject with Then Handlers

const promise = new Promise((resolve , reject) => {
    reject(20);
    console.log("here");
})

promise.then(
  (value) => {
    console.log("ok");
  },
  (value) => {
    console.log(value);
  }
);

What will be the output?

#3Array Equality Comparison

let a = [];
let b = [];

console.log(a == b);
console.log(a === b);

What will be the output?

#4Temporal Dead Zone with Let

let temp = 'outer value';
if (true) {
  console.log(temp);
  let temp = 'inner value'; 
  console.log(temp);
}
console.log(temp);

What will be the output?

#5Let and Var Redeclaration

let temp = 'outer value';
if (true) {
  console.log(temp);
  var temp = 'inner value';
  console.log(temp);
}
console.log(temp);

What will be the output?

#6Var Hoisting in Block

var temp = 'outer value';
if (true) {
  console.log(temp);
  var temp = 'inner value'; 
  console.log(temp);
}
console.log(temp);

What will be the output?

#7Method Invocation - this Keyword

const obj = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const greetFunc = obj.greet;

obj.greet();
greetFunc();

What will be the output?

#8Arrow Functions and this

const obj = {
  name: 'Bob',
  regularFunc: function() {
    console.log('Regular:', this.name);
  },
  arrowFunc: () => {
    console.log('Arrow:', this.name);
  },
  nestedExample: function() {
    const inner = () => {
      console.log('Nested arrow:', this.name);
    };
    inner();
  }
};

obj.regularFunc();
obj.arrowFunc();
obj.nestedExample();

What will be the output?

#9this in Callbacks

const counter = {
  count: 0,
  increment: function() {
    setTimeout(function() {
      this.count++;
      console.log(this.count);
    }, 100);
  },
  incrementWithArrow: function() {
    setTimeout(() => {
      this.count++;
      console.log(this.count);
    }, 100);
  }
};

counter.increment();
counter.incrementWithArrow();

What will be the output?

#10Variable Hoisting with var

console.log(a);
var a = 5;
console.log(a);

foo();

function foo() {
  console.log('Function foo');
}

bar();

var bar = function() {
  console.log('Function bar');
};

What will be the output?

#11Temporal Dead Zone with let and const

console.log(x);
let x = 10;

function test() {
  console.log(y);
  let y = 20;
}

test();

const z = 5;
z = 10;

What will be the output?

#12Function Hoisting in Block Scopes

foo();

if (true) {
  function foo() {
    console.log('Inside if');
  }
}

foo();

What will be the output?

#13The Equality Operators

console.log(0 == false);
console.log(0 === false);
console.log('' == false);
console.log('' === false);
console.log(null == undefined);
console.log(null === undefined);
console.log('0' == 0);
console.log('0' === 0);

What will be the output?

#14Addition Operator Coercion

console.log(1 + '2');
console.log('1' + 2);
console.log(1 + 2 + '3');
console.log('1' + 2 + 3);
console.log(1 + 2 + 3);
console.log(true + 1);
console.log(false + 1);
console.log(null + 1);
console.log(undefined + 1);

What will be the output?

#15Comparison Operator Coercion

console.log('10' > 9);
console.log('10' > '9');
console.log('2' > '12');
console.log([] == false);
console.log([] == 0);
console.log([1] == 1);
console.log([1, 2] == '1,2');

What will be the output?

#16Closure with Var in Loops

const functions = [];

for (var i = 0; i < 3; i++) {
  functions.push(function() {
    console.log(i);
  });
}

functions[0]();
functions[1]();
functions[2]();

const functionsFixed = [];

for (let j = 0; j < 3; j++) {
  functionsFixed.push(function() {
    console.log(j);
  });
}

functionsFixed[0]();
functionsFixed[1]();
functionsFixed[2]();

What will be the output?

#17Nested Closures and Shadowing

function outer(x) {
  function middle(y) {
    function inner(z) {
      console.log(x + y + z);
    }
    let x = 10;
    inner(3);
  }
  middle(2);
}

outer(1);

What will be the output?

#18Prototype Chain Lookup

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log('Hello, I am ' + this.name);
};

const alice = new Person('Alice');
const bob = new Person('Bob');

alice.greet();

delete Person.prototype.greet;

bob.greet();

Person.prototype.greet = function() {
  console.log('Hi, I am ' + this.name);
};

alice.greet();

What will be the output?

#19Property Lookup and Modification

const parent = {
  value: 10,
  increment: function() {
    this.value++;
  }
};

const child = Object.create(parent);

console.log(child.value);
child.increment();
console.log(child.value);
console.log(parent.value);

child.value = 20;
console.log(child.value);
console.log(parent.value);

What will be the output?

#20Mixed Async Operations

console.log('1');

async function async1() {
  console.log('2');
  await async2();
  console.log('3');
}

async function async2() {
  console.log('4');
}

async1();

new Promise(resolve => {
  console.log('5');
  resolve();
}).then(() => {
  console.log('6');
});

setTimeout(() => {
  console.log('7');
}, 0);

console.log('8');

What will be the output?

#21Microtask Queue Starvation

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
    return Promise.resolve();
  })
  .then(() => {
    console.log('Promise 2');
  });

Promise.resolve()
  .then(() => {
    console.log('Promise 3');
  })
  .then(() => {
    console.log('Promise 4');
  });

setTimeout(() => {
  console.log('Timeout 2');
}, 0);

console.log('End');

What will be the output?