DEV Community

loading...
Cover image for Sometimes JavaScript is Tricky.

Sometimes JavaScript is Tricky.

rajatarya007zxc profile image Rajat_Arya ・3 min read

When I was new in Web Development, I faced many difficulties while learning JavaScript, but after regular practice, my views changed.

To be honest, still Javascript changes my perspective, but it also gives me more strength to work hard on it.

I accumulated some questions from the internet and I am sure this will change your views too.

But before going straight to the questions:-

"The Expert in anything was once a beginner"

Q1- What is typeof []

Answer: Object. Actually Array is derived from Object. If you want to check array use Array.isArray(arr)

Q2- What is 2+true

Answer: 3. The plus operator between a number and a boolean or two boolean will convert boolean to number. Hence, true converts to 1 and you get result of 2+1.

Q3- What is '6'+9

Answer: 69. If one of the operands of the plus (+) operator is string it will convert other number or boolean to string and perform a concatenation.

Q4- What's the output?

let a = 0;
console.log(a++);
console.log(++a);
console.log(a);
Enter fullscreen mode Exit fullscreen mode

The postfix unary operator(a++)
First it returns 0 and after that increment a by 1 means now a=1.

The prefix unary operator(++a)
First increment by 1 and then return means now a=2

Answer: 0 2 2

Q5- What's the output?

function myAge(...args) {
  console.log(typeof args);
}

myAge(23);
Enter fullscreen mode Exit fullscreen mode

Answer: Object.The rest parameter (...args) lets us "collect" all remaining arguments into an array. An array is an object, so typeof args returns "object".

Q6- What's the output?

const confusing = { a: 'one', b: 'two', a: 'three' };
console.log(confusing);
Enter fullscreen mode Exit fullscreen mode

Answer: If you have two keys with the same name, the key will be replaced. It will still be in its first position, but with the last specified value.

Q7- What's the output?

for (let i = 1; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

Enter fullscreen mode Exit fullscreen mode

Answer: 1 2 4.The continue statement skips an iteration if a certain condition returns true.

Q8- What's the output?

var a=(2,3,4,5,6,7);
console.log(a);
Enter fullscreen mode Exit fullscreen mode

Answwer:7.The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

Q9- What is the value of !'Sleep'?

Answer:False. ! is NOT. If you put ! in front of truthy values, it will return false.

Q10-What the logged output when you click the paragraph?

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

Answer: p div. If we click p, we see two logs: p and div. During event propagation, there are 3 phases: capturing, target, and bubbling. By default, event handlers are executed in the bubbling phase (unless you set useCapture to true). It goes from the deepest nested element outwards.

Q11- What is the output?

const myName = { name: 'Rajat Arya' };

function hello(age) {
  return `${this.name} is ${age}`;
}

console.log(hello.call(myName, 23));
console.log(hello.bind(myName, 23));

Enter fullscreen mode Exit fullscreen mode

Answer: Rajat Arya is 23

function hello(age) {
return ${this.name} is ${age};
}

Explanation:- With both, we can pass the object to which we want the 'this' keyword to refer to. However, .call is also executed immediately!
.bind returns a copy of the function, but with a bound context! It is not executed immediately.

Q12- What's the output?

function think() {
  return (() => 0)();
}

console.log(typeof think());


Enter fullscreen mode Exit fullscreen mode

Answer:number The think function returns the returned value of the immediately invoked function expression (IIFE). This function returned 0, which is type "number".

Q13- What's the output?

const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
Enter fullscreen mode Exit fullscreen mode

Answer:When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined, but you will see something like:


[1, 2, 3, empty x 7, 11]

Q14-What's the Output?

console.log(typeof typeof 1);
Enter fullscreen mode Exit fullscreen mode

Answer: string. From right typeof 1 returns "number". typeof "number" returns "string"

Q15-What's the Output?

var myName=[...'Rajat'];
console.log(myName)
Enter fullscreen mode Exit fullscreen mode

Answer: ["R","a","j","a","t"]
A string is an iterable. The spread operator maps every character of an iterable to one element.

Discussion (13)

pic
Editor guide
Collapse
mirkodrummer profile image
Mirko Mariani • Edited

Postfix and prefix unary operators works the same in c family languages. It’s not an oddity of the language per se. They are old operators that can lead to confusion. But other than that I don’t see how a language can be tricky with examples like typeof typeof 1 😅 Or the example with the continue keyword, again it’s not an oddity of the language it’s just basic programming, continue is used in pseudo code as well...

Collapse
samuelnarciso28 profile image
Samuel Narciso

Excelente post

Collapse
renatoayau profile image
Renato Ayau

Nice :)

Collapse
rjitsu profile image
Rishav Jadon

Nice exercises

Collapse
capscode profile image
capscode

nice post

Collapse
kamcio profile image
kamcio

Thank you for this!

Collapse
softwaredevlpr profile image
Devlpr

Lol I just laughed when I saw this and was like JavaScript is always tricky :).
Enjoyed this :).

Collapse
johandalabacka profile image
Johan Dahl

Nice :)

Collapse
mcwachira profile image
mcwachira

Intesting concepts leant a lot

Collapse
arogya01 profile image
arogya bichpuria

Cool Explanation of little obscure topics through examples.

Collapse
psanchez1982 profile image
Patricio Sanchez Alvial

¿Sometimes? hahaha everytime

Collapse
arulvalananto profile image
Arul Valan Anto S

The way of your explanation is excellent. I like it a lot man. Give more blogs like this.

Collapse
functional_js profile image
Functional Javascript

The trick is to not have any of these tricks in your code. ;-)

Use the cleanest subset of the language only.
Have what you use and don't use formally documented.