DEV Community

Yanze Dai for Pitayan Blog

Posted on • Originally published at pitayan.com on

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?

Top comments (0)