Ten JavaScript Theory Questions – The ES6 Quiz

There are countless questions your interviewers may ask when it comes to how JavaScript works. The idea behind asking these questions is to assess whether you have recent experience in writing JavaScript code.

Some more clueless interviewers tend to ask you for lexical knowledge and edge cases that you could simply look up online. I personally think, this signals lack of competence from the end of my interviewers, and I tend to start getting concerned whether I am in the right place.

Usually, you are not allowed to use Google to find the answer, and you have to answer on the spot.

Question 1

Is JavaScript a “pass by value” or a “pass by reference” type of language when it comes to passing function arguments?

Answer: JavaScript passes function arguments by value. In case we pass an array or an object, the passed value is a reference. This means you can change the contents of the array or the object through that reference.

Read this article on value and reference types
for more details.

Question 2

Study the following code snippet:

 
let user1 = { name: 'FrontendTroll', email: '[email protected]' };
let user2 = { name: 'ElectroModulator', email: '[email protected]' };
 
let users = [ user1, user2 ];
 
let swapUsers = function( users ) {
    let temp = users[0];
    users[0] = users[1];
    users[1] = temp;
    return users;
}
 
let setCredit = function( users, index, credit ) {
    users[ index ].credit = credit;
    return users;
}
 
console.table( swapUsers( [...users] ) );
console.table( setCredit( [...users], 0, 10 ) );
console.table( users );
 

What does [...users]
do? What is printed to the console?

Answer: [...users]
makes a shallow copy
of the users
array. This means we assemble a brand new array from scratch. The elements of the new array are the same as the elements of the original array.

However, each element is an object in each array. These objects are reference types
, which means that their content is reachable from both arrays. For instance, modifying [...users][0].name
results in a modification in users[0].name
.

Let’s see the printed results one by one.

In the first console table, we expect the two elements to be swapped. This change left the users
array intact, because none of its elements were modified.

 
> console.table( swapUsers( [...users] ) );
(index)  name               email
0        "ElectroModulator" "[email protected]"
1        "FrontendTroll"    "[email protected]"
 

Let’s see the second result. We shallow copied the elements of the users
array again, and added a credit of 10
to the first user. The order of the users is still FrontendTroll
before ElectroModulator
, as the order of the elements of the users
array were not changed by swapUsers
due to shallow copying. FrontendTroll
receives ten credits in the cloned array. As we only shallow copied the users
array, this credit will make it to the original array as well.

 
> console.table( setCredit( [...users], 0, 10 ) );
(index)  name               email                       credit
0        "FrontendTroll"    "[email protected]"  10
1        "ElectroModulator" "[email protected]"
 

Based on the explanation, the third console.table
will be identical with the second, including the credit of 10
:

 
> console.table( users );
0        "FrontendTroll"    "[email protected]"  10
1        "ElectroModulator" "[email protected]"
 

Read more on shallow and deep cloning in my article Cloning Objects in JavaScript
.

You can execute and visualize this code on pythontutor.com
.

Question 3

Does the code in Question 2 conform to the principles of pure functional programming?

Answer: No. A function is pure if and only if it is side-effect free. setCredit
modifies a field in the global object users[0]
as a side-effect of the function execution.

Read the first few paragraphs of the article Functional and Object Oriented Programming with Higher Order Functions
for more details.

Question 4

How can we prevent setCredit
from modifying the original array?

Answer: Instead of [...users]
, use deep cloning. As we only work with data that can be represented using a finite JSON string, we can stringify, then we can parse our original object to get a deep copy.

Example:

 
const user1 = { name: 'FrontendTroll', email: '[email protected]' };
const user2 = { name: 'ElectroModulator', email: '[email protected]' };
 
const users = [ user1, user2 ];
 
const deepClone = function( o ) {
    return JSON.parse( JSON.stringify( o ) );
}
 
let swapUsers = function( users ) {
    let temp = users[0];
    users[0] = users[1];
    users[1] = temp;
    return users;
}
 
let setCredit = function( users, index, credit ) {
    users[ index ].credit = credit;
    return users;
}
 
console.table( swapUsers( deepClone( users ) ) );
console.table( setCredit( deepClone( users ), 0, 10 ) );
console.table( users );
 

Question 5

What is wrong in the following code?

 
let sum = (...args) => args.reduce( (a,b) => a+b, 0 );
let oneTwoThree = [1, 2, 3];
 
let moreNumbers = [ ...oneTwoThree, 4 ];
console.log( sum( ...moreNumbers, 5 ) );
 
let [...lessNumbers, ] = oneTwoThree;
console.log( sum( ...lessNumbers ) );
 

Answer: In ES6, ...
denotes both the Spread operator and rest parameters.

In the first line, ...args
is a rest parameter. The rest parameter has to be the last parameter of the argument list, symbolizing all the remaining arguments of the function. Given there are no more arguments left after ...args
, the rest parameter is in its correct place.

The Spread operator spreads its elements into comma separated values. Therefore:

 
moreNumbers = [ ...[1, 2, 3], 4 ] = [ 1, 2, 3, 4 ]
 

, because ...[1, 2, 3]
becomes 1, 2, 3
.

In a function call, the spread operator can also be used:

 
sum( ...[1, 2, 3, 4], 5 ) = sum( 1, 2, 3, 4, 5 )
 

, because ...[1, 2, 3, 4]
becomes 1, 2, 3, 4
.

Inside the destructuring
assignment,

 
let [...lessNumbers, ] = oneTwoThree;
 

, ...lessNumbers
is a rest parameter. It has to stand at the very end of the array. Given there is a comma after the rest parameter, we expect the code to throw a SyntaxError
, because the rest parameter has to be the last element of the array. Due to the syntax error, the last line of the code cannot be executed.

If you are not yet proficient in

  • the Spread operator,
  • rest parameters,
  • destructuring,

sign up for my free ES6 minicourse, where you can learn the ins and outs of using the spread operator, rest parameters, destructuring, arrow functions, the class syntax, and many more ES6 concepts.

Exercise 6

Consider the following function:

 
let printArity = function() {
    console.log( typeof arguments, arguments.length );
    console.log( arguments.pop() );
}
 
printArity( 1, 2, 3, 4, 5 );
 

Determine the output without running the code! Hint:

 
> [1,2,3].pop()
3
 

Solution:

arguments
is an object. It is not an array! See the Mozilla documentation
for more details.

For some reason, arguments
has a length
property, and it equals the number of arguments of the function, which is 5
.

Given that arguments
is not an array, the Array
prototype method pop
is not available. Therefore, after printing object 5
, the code throws a TypeError
, because arguments.pop
is not a function.

Whenever you can, use rest parameters instead of the arguments
array. You can read more details on the relationship between the arguments array and rest parameters in ES6 in Practice
.

Exercise 7

Why isn’t 0.1 + 0.2
equal to 0.3
?

Answer: This is strictly speaking a computer science question and not a JavaScript question. All you need to know is that JavaScript uses floating point arithmetics, where a number is represented using a finite number of bits.

In this specific example, 0.1 + 0.2
adds up to 0.30000000000000004
due to floating point arithmetics.

Exercise 8

How can we retrieve a DOM node collection of all div
elements on a website? How can we retrieve a DOM node collection of all div
elements having the class row-fluid
on a website?

Answer: It is important that we do not need jQuery for this purpose. If your answer is based on jQuery, please think again, because reliance on jQuery in 2017 is not always optimal.

Regarding the first question, you can either use document.getElementsByTagName
or document.querySelectorAll
. The latter solution uses the same selectors as jQuery does.

 
> document.getElementsByTagName( 'div' )
HTMLCollection(274) [...]
 
> document.querySelectorAll( 'div' )
HTMLCollection(274) [...]
 

Regarding the second question, you could
filter the DOM node collection obtained using getElementsByTagName
:

 
Array.from(
    document.getElementsByTagName( 'div' )
).filter( 
    x => x.className.split( ' ' ).indexOf( 'row-fluid' ) >= 0 
);
 

We have to know how to convert a DOM node collection to an array, we have to know how to access the class list of a DOM node, and how indexOf
works in case of arrays. High risk, low reward solution. Let’s figure out something easier.

As you have just read, document.querySelectorAll
can process complex selectors. div.row-fluid
will do all the filtering for you:

 
> document.querySelectorAll( 'div.row-fluid' )
 

Strictly speaking, the first solution is wrong, because the result is not a NodeList
, but an array of two nodes.

Exercise 9

Swap the contents of two variables without introducing a third variable!

Solution: We can use destructuring to accomplish the desired result. Example:

 
> let a = 1, b = 2;
> [a, b] = [b, a];
> console.log( a, b );
2, 1
 

Seethis blog post for more exercises on destructuring.

Exercise 10

Write a JavaScript function that determines if a string consists of hexadecimal digits only. The digits A
F
can either be in lower case or in upper case.

Solution: The easiest way is to formulate a regular expression
.

 
let checkHexNum = hexString => /^[0-9a-fA-F]+$/.test( hexString );
 

Explanation:

  • ^
    at the beginning specifies that the string has to start with the specified sequence [0-9a-fA-F]+
  • $
    at the end specifies that the string has to end with the specified sequence [0-9a-fA-F]+
  • [0-9a-fA-F]
    is one arbitrary character, which is either a digit or a letter between a
    and f
    , or a letter between A
    and F
    . Note that the solution [0123456789abcdefABCDEF]
    is equally acceptable, just longer
  • +
    specifies that you can repeat the character [0-9a-fA-F]
    as many times as you want provided that you have provided at least one character.

Common sense dictates that a problem with the above solution is that it allows the first digit to be 0
, which is not possible. Notice the task description didn’t ask us to take care of this case, so we can simpy omit it. However, if we want to go the extra mile, we could write:

 
let checkHexNum = hexString =>
    /^[1-9a-fA-F][0-9a-fA-F]*$/.test( hexString ) ||
    hexString == '0';
 

For more details, check out my article on Regular Expressions in JavaScript
.

If you want to avoid using regular expressions, you can write a simple loop. Pay attention to the boolean condition though.

 
let checkHexNum = hexString => {
    for ( let ch of hexString ) {
        if ( '0123456789abcdefABCDEF'.indexOf( ch ) === -1 )
            return false;
    }
    return true;
}
 

Summary

These ten questions gave you an overview of practical test questions that test your theoretical knowledge and JavaScript fundamentals.

Some of these questions are quite tricky, because you can only solve them if your ES6 fundamentals are good enough. This is why they make excellent interview questions.

If you are interested in brushing up your ES6 knowledge, sign up for the ES6 minicourse below!

Now that we have solved this exercise together, don’t forget that there are four pillars for a successful tech interview:

  • Tech skills
  • Problem solving skills
  • Soft skills
  • Personal Branding

This blog addresses the first two skills. My other blog, devcareermastery.com
addresses soft-skills, and my book The Developer’s Edge – How to Double Your Career Speed with Soft-Skills
helps you with soft-skills as well as with your personal brand.

If you are interested in fine-tuning your JavaScript skills as well as your soft skills, I highly recommend that you consider purchasing The JavaScript Developer’s Career Bundle
. This bundle contains my book ES6 in Practice, 4.5 hours of JavaScript videos, and The Developer’s Edge. You will not only be fully up-to-date with the latest version of JavaScript, but you will also learn how to build a fulfilling career for yourself.

稿源:Zsolt Nagy (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Ten JavaScript Theory Questions – The ES6 Quiz

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录