DEV Community

Yanze Dai for Pitayan Blog

Posted on • Originally published at pitayan.com on

3 3

What do these console.log print out?

Originally published on Pitayan | What do these console.log print out?

Come to the original site for a better reading experience.


These days, I was preparing a small game for our team's tech workshop. Thought it'd be a good opportunity of introducing the some fundamental and tricky stuffs around JavaScript. So I made 8 quiz to our team members. And hope they could solve them within 15 min. Eventually, it took all of them over 20 minutes to complete and most of them could solve 4-5 questions correctly.

You can take it as just a small test, each quiz has answer attached to the end of the code. Try to answer them first and then look at the answers. Good luck.

#What do these console.log print out?

#No. 1 -- Doctor Pavlov has a dog

function Animal(){ 
  this.type = "animal"
}

function Dog(){ 
  this.name = "dog"
}

Dog.prototype = new Animal()

var PavlovPet = new Dog(); 

console.log(PavlovPet. __proto__ === Dog.prototype)
console.log(Dog.prototype. __proto__ === Animal.prototype)
Enter fullscreen mode Exit fullscreen mode

Answer for No. 1

Very basic stuff about the prototype chain.

// Output
true
true
Enter fullscreen mode Exit fullscreen mode

#No. 2 -- Be careful with the "sort"

var arr = [5, 22, 14, 9];

console.log(arr.sort());
Enter fullscreen mode Exit fullscreen mode

Answer for No. 2

Sorry, not [5, 9, 14, 22]. Each element is converted into string and then comparing the sequence of UTF-16 value.

Check this out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

// Output
[14, 22, 5, 9]
Enter fullscreen mode Exit fullscreen mode

#No. 3 -- Closure and event loop

for (var i = 0; i < 3; i++) {
  const log = () => {
    console.log(i)
  }
  setTimeout(log, 100)
}
Enter fullscreen mode Exit fullscreen mode

Answer for No. 3

It prints out 3 thrice since setTimout puts that log function to the next macro task queue

// Output
3
3
3
Enter fullscreen mode Exit fullscreen mode

#No. 4 -- There's indentation

function createNewArray(item) {
  return
    [item]
}

console.log(createNewArray(0))
Enter fullscreen mode Exit fullscreen mode

Answer for No. 4

This causes an error. Can't return value with break-line and indentation together

Uncaught SyntaxError: Invalid or unexpected token
Enter fullscreen mode Exit fullscreen mode

#No. 5 -- What's inside the "numbers"

const length = 4
const numbers = []
for (var i = 0; i < length; i++);{
  numbers.push(i + 1)
}

console.log(numbers)
Enter fullscreen mode Exit fullscreen mode

Answer for No. 5

This needs a pair of sharp eyes. See that semicolon between the parentheses and curly bracket?

// Output
[5]
Enter fullscreen mode Exit fullscreen mode

#No. 6 -- No length

const clothes = ['shirt', 'socks', 'jacket', 'pants', 'hat']
clothes.length = 0

console.log(clothes[3])
Enter fullscreen mode Exit fullscreen mode

Answer for No. 3

This is equivalant to removing all elements from the array

// Output
undefined
Enter fullscreen mode Exit fullscreen mode

#No. 7 -- Variable went crazy

var a = 1
function output () {
    console.log(a)
    var a = 2
    console.log(a)
}
console.log(a)
output()
console.log(a)
Enter fullscreen mode Exit fullscreen mode

Answer for No. 7

First output: using the global var a

Second output: the first one in the function output() using before declaration should be undefined

Third output: print out after the declaration. Nothing special.

Forth output: var a never got changed by function output()

// Output
1
undefined
2
1
Enter fullscreen mode Exit fullscreen mode

#No. 8 -- There's an accidental declaration

function foo() {
    let a = b = 0
    a++
    return a
}

foo()
console.log(typeof a)
console.log(typeof b)
Enter fullscreen mode Exit fullscreen mode

Answer for No. 3

let a is a local variable. typeof a is checking undeclared variable.

b is a global variable which value is assign in function foo().

// Output
undefined
number
Enter fullscreen mode Exit fullscreen mode

#In the end

Thanks so much for reading! Have you got them all correct?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay