top

Do you really know JS? (Part - 1)

JavaScript is a dynamic programming language that is used to build interactivity on websites. Do you wish to become a JavaScript developer? Then question yourself how well do you know JavaScript? This series of articles will dive into the basic concepts of JavaScript that you need to know.In this article, we will cover some tricky questions commonly asked in javascript interviews. Though I personally do not advocate such questions to be asked it’s fun to know them.  Let’s get started :)1. Logical Operators (&& and ||)We all have used && and || in conditional loops, but Javascript has something special to offer. Before getting to that, Tell output of below code.var a = 3; var b = 2; var c = "someString"; var d = 0; document.write("Output 1 : " + (a || b)); document.write("<br/>"); document.write("Output 2 : " + (a && c)); document.write("<br/>"); document.write("Output 3 : " + (a && d && c));Did you guess output as true, true and false? Well, that’s natural, if you come from c/c++ background. Click “Run Pen” below to find, how javascript works in such scenario :lSee the Pen Tricky JS : || and && by Manish Kumar Khedawat (@mkkhedawat) on CodePen. Logical AND (&&)expr1&&expr2 : Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false. ( Source: MDN )Logical OR (||)expr1||expr2 : Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true. ( Source: MDN )2. Is Array a true object?We all know, Array is an Object in Javascript and Objects have keys. Ever wondered what happens if one attaches the key to Array, will it still be a valid Array? Let’s check out :var a = [1, 2, 3, 4, 5]; document.write("output - 1 : " + a.length); document.write("<br/>"); a["myKey"] = "myValue"; document.write("output - 2 : " + a.length); document.write("<br/>"); document.write("output - 3 : " + a);See the Pen Tricky JS : Is Array a true Object ? by Manish Kumar Khedawat (@mkkhedawat) on CodePen. As Array inherits from Object Class, It allows one to add keys and properties to the array. But it is considered abusing data-types and not recommended to be used.3. {} and []Let’s jump to the code. What will be output below :if ([] || {}) {   document.write("Batman Rocks"); } else {   document.write("Superman Rocks"); }See the Pen Tricky JS : [] and {} by Manish Kumar Khedawat (@mkkhedawat) on CodePen. If you thought [] and {} are falsy values, well there is a surprise for you.An empty object is not undefined. It even has some properties defined as a result of inheritance. The only falsy values in JS are 0, false, null, undefined, empty string, and NaN4. Type ConversionIt is important for everyone to know about JavaScript types and grammar in greater depth. If I ask you to print number 4 in the console using only special characters, what would be your answer? Confused? Umm, For starter, Tell me output for below :document.write((!+[]+!+[])*(!+[]+!+[])); See the Pen Tricky JS : + and [] - Type Conversion by Manish Kumar Khedawat (@mkkhedawat) on CodePen. Another classic concept from JS type conversions, putting+ before [], forces [] to cast to a number type. So +[] is 0, !+[] will be boolean ‘true’ which further will be cast to a number type resulting into 1 on using addition operator, Rest is Mathematics.5. Operator Associativity and JS EngineRemember BODMAS, Order of operations? Well, let’s check how JS engine deals with it. Tell me the output of code below :document.write(1 < 2 < 3); document.write("<br/>") document.write(3 > 2 > 1);See the Pen Tricky JS : BODMAS and JS Engine by Manish Kumar Khedawat (@mkkhedawat) on CodePen. If you had guessed true and true, JS Engine won’t agree with you.JS Engine processes expression from left to right. So for (3>2>1), ‘3>2’ is ‘true’, next ‘true>1’ is false, ultimately resulting in false.Hope the things you learned from you Don't Know JS guide will help beginners to get started with JavaScript. And, you should know about JS async and performance, and scope and closures, because these concepts play a crucial role in JavaScript and help you to land your dream job.If you liked the article, Please share and subscribe. Will be back soon with another chapter in series.
Rated 4.0/5 based on 32 customer reviews
Normal Mode Dark Mode

Do you really know JS? (Part - 1)

Manish Khedawat
Blog
23rd Apr, 2018
Do you really know JS? (Part - 1)

JavaScript is a dynamic programming language that is used to build interactivity on websites. Do you wish to become a JavaScript developer? Then question yourself how well do you know JavaScript? This series of articles will dive into the basic concepts of JavaScript that you need to know.

In this article, we will cover some tricky questions commonly asked in javascript interviews. Though I personally do not advocate such questions to be asked it’s fun to know them.  

Let’s get started :)


1. Logical Operators (&& and ||)

We all have used && and || in conditional loops, but Javascript has something special to offer. Before getting to that, Tell output of below code.

var a = 3;
var b = 2;
var c = "someString";
var d = 0;
document.write("Output 1 : " + (a || b));
document.write("<br/>");
document.write("Output 2 : " + (a && c));
document.write("<br/>");
document.write("Output 3 : " + (a && d && c));

Did you guess output as true, true and false? Well, that’s natural, if you come from c/c++ background. Click “Run Pen” below to find, how javascript works in such scenario :l

Logical AND (&&)expr1&&expr2 : Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false. ( Source: MDN )

Logical OR (||)expr1||expr2 : Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true. ( Source: MDN )


2. Is Array a true object?

We all know, Array is an Object in Javascript and Objects have keys. Ever wondered what happens if one attaches the key to Array, will it still be a valid Array? Let’s check out :

var a = [1, 2, 3, 4, 5];
document.write("output - 1 : " + a.length);
document.write("<br/>");
a["myKey"] = "myValue";
document.write("output - 2 : " + a.length);
document.write("<br/>");
document.write("output - 3 : " + a);

As Array inherits from Object Class, It allows one to add keys and properties to the array. But it is considered abusing data-types and not recommended to be used.


3. {} and []

Let’s jump to the code. What will be output below :

if ([] || {}) {
  document.write("Batman Rocks");
} else {
  document.write("Superman Rocks");
}

If you thought [] and {} are falsy values, well there is a surprise for you.

An empty object is not undefined. It even has some properties defined as a result of inheritance. The only falsy values in JS are 0, false, null, undefined, empty string, and NaN


4. Type Conversion

It is important for everyone to know about JavaScript types and grammar in greater depth. If I ask you to print number 4 in the console using only special characters, what would be your answer? Confused? Umm, For starter, Tell me output for below :

document.write((!+[]+!+[])*(!+[]+!+[]));

Another classic concept from JS type conversions, putting+ before [], forces [] to cast to a number type. So +[] is 0, !+[] will be boolean ‘true’ which further will be cast to a number type resulting into 1 on using addition operator, Rest is Mathematics.



5. Operator Associativity and JS Engine

Remember BODMAS, Order of operations? Well, let’s check how JS engine deals with it. Tell me the output of code below :

document.write(1 < 2 < 3);
document.write("<br/>")
document.write(3 > 2 > 1);

If you had guessed true and true, JS Engine won’t agree with you.

JS Engine processes expression from left to right. So for (3>2>1), ‘3>2’ is ‘true’, next ‘true>1’ is false, ultimately resulting in false.

Hope the things you learned from you Don't Know JS guide will help beginners to get started with JavaScript. And, you should know about JS async and performance, and scope and closures, because these concepts play a crucial role in JavaScript and help you to land your dream job.

If you liked the article, Please share and subscribe. Will be back soon with another chapter in series.

Manish

Manish Khedawat

Blog Author

Alumni'14 IIT Kharagpur. Working as Senior Security Engineer in Target with around 4 years of experience in Modern JS Frameworks like Angular and React.

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount