What will be the output of both console.log?
console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);If you answered “0.3” for the first console.log and “true” for the second console.log you are incorrect!
The first console.log will be “0.30000000000000004” because of the way JavaScript handles floats, therefore the second console.log will be “false”
JavaScript is filled with Gotchas that kind of defy common logic, to really blow your mind check out this link below that will make you say “Wat?”
Write a function that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.
How was it? Were you able to solve it? If not thats okay, you’ll just need to practice a bit more and you’ll be ready the next time you are asked this question! Heres a simple solution to FizzBuzz
for (let i = 0; i <= 100; i++) {
if (i % 15 == 0) {
console.log("FizzBuzz");
} else if (i % 3 == 0) {
console.log("Fizz");
} else if (i % 5 == 0) {
console.log("Buzz");
} else {
console.log(i);
}
}We wrote a for loop to iterate through the numbers starting from 1 until 100 to print out the number in every iteration. However we needed to write conditions for specials numbers that have to be replaced by their special word.
The reason why we wrote the first if statement as 15 is because it was the product of 3 and 5, so any numbers that can be divided evenly by 15 is both a multiple of 3 and 5. Another reason why we had to write 15 first is that the moment we satisfy one of the conditions, the if statement will stop and will output our answer. Because of this, if we put 15 on the bottom and 3 on top, we will never be able to print out “FizzBuzz” and print out “Fizz” instead.
If you solved this problem in a different way don’t worry about it! The wonders of code is that there are MANY different ways to solve a problem
Heres a great interview question that I found on reddit (https://www.reddit.com/r/javascript/comments/7535tm/amazon_web_developer_loop_timeout_interview/)
What is the output of the following code?
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
setTimeout(function() {
console.log('Index: ' + i + ', value: ' + arr[i]);
}, 3000);
}This might seem simple to a few of us, maybe even too simple… Clearly its got to be this right?
Index: 0, value: 10
Index: 1, value: 12
Index: 2, value: 15
Index: 3, value: 21
Well guess what! it was a trick question! The actual answer is
Index: 4, value: undefined
Index: 4, value: undefined
Index: 4, value: undefined
Index: 4, value: undefinedThe reasoning is because of the setTimeout, the console.log will not run until 3 seconds later and then the for loop would’ve finished already therefore the index will now be at 4 and the value will be undefined because there is no index of 4
What is a closure?
Heres the google definition :
A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables — a scope chain. … it has access to its own scope — variables defined between its curly brackets. it has access to the outer function’s variables. it has access to the global variables.
A closure is basically when an inner function has access to variables outside of its scope
Sure, sure… so what?
That means your code will be more private and have its own “global variable” meaning that other code won’t be able to change it.
Heres an example of how global variables are easily influenced
let count = 5;const addCount = () => {
count++
console.log("After adding", count)
}const multiplyCount = () => {
count *= 2
console.log("After multiply", count)
}addCount() // will console out 6
multiplyCount() // will console out 12
Notice how we have a global variable named count that is set to 5. Our addCount() will increase the count to 6, then our multiplyCount() will double it . Oh no! Theres got to be a better way of keeping count of each of our functions! Well there is, this is where closure comes in. Check out the example below for a better understanding (shoutout to Jane for showing us this example)
const fruitStand = fruit => {
let count = 0;
return () => {
count ++;
return `Ive sold ${count} ${fruit}`
}
}const orange = fruitStand("orange")
const watermelon = fruitStand("watermelon")const fruitCount = () => {
orange()
console.log(orange())
console.log(watermelon())
}fruitCount()
The above code will console out “Ive sold 2 orange” and “Ive sold 1 orange”. Lets run through this code step by step
const fruitStand = fruit => {
}We first created a function called “fruitStand” and gave it an argument of “fruit” (this will be important later)
const fruitStand = fruit => {
let count = 0;
}Then we created a variable “count” which can be accessed by the inner function that we will later write
const fruitStand = fruit => {
let count = 0;
return () => {
count ++;
return `Ive sold ${count} ${fruit}`
}
}Finally we finished out closure by writing an inner anonymous function that will increment the “count” variable and return how many fruit you’ve sold. Our closure is now completed so lets see its magic
const orange = fruitStand("orange");
const watermelon = fruitStand("watermelon");Lets pass in a string argument to fruitStand and saved it to a variable name
const fruitCount = () => {
orange()
console.log(orange())
console.log(watermelon())
}fruitCount()
Now lets create a function “fruitCount” so we can run both the orange and watermelon at the same time and it’ll console out “Ive sold 2 orange” and “Ive sold 1 watermelon”
Do you see how amazing closure was?? Now we can keep track of how many fruits of each type we’ve sold!
I hope I didn’t lose any of you here, but if I did I apologize and thats okay, there are many resources out there that will help you get ready for an interview such as https://guide.freecodecamp.org/miscellaneous/interview-questions-for-junior-front-end-web-developers/.
