JavaScript Interview Questions

If you prepend the additive(+) operator on falsy values(null, undefined, NaN, false, ""), the falsy value converts to a number value zero. Let's display them on browser console as below,

console.log(+null); // 0
console.log(+undefined); // NaN
console.log(+false); // 0
console.log(+NaN); // NaN
console.log(+""); // 0

The self string can be formed with the combination of []()!+ characters. You need to remember the below conventions to achieve this pattern.

1. Since Arrays are truthful values, negating the arrays will produce false: ![] === false
2. As per JavaScript coercion rules, the addition of arrays together will toString them: [] + [] === ""
3. Prepend an array with + operator will convert an array to false, the negation will make it true and finally converting the result will produce value '1': +(!(+[])) === 1

By applying the above rules, we can derive below conditions

(![] + [] === "false" + !+[]) === 1;

Now the character pattern would be created as below,

s               e               l               f
 ^^^^^^^^^^^^^   ^^^^^^^^^^^^^   ^^^^^^^^^^^^^   ^^^^^^^^^^^^^

 (![] + [])[3] + (![] + [])[4] + (![] + [])[2] + (![] + [])[0]
 ^^^^^^^^^^^^^   ^^^^^^^^^^^^^   ^^^^^^^^^^^^^   ^^^^^^^^^^^^^
(![] + [])[+!+[]+!+[]+!+[]] +
(![] + [])[+!+[]+!+[]+!+[]+!+[]] +
(![] + [])[+!+[]+!+[]] +
(![] + [])[+[]]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(![]+[])[+!+[]+!+[]+!+[]]+(![]+[])[+!+[]+!+[]+!+[]+!+[]]+(![]+[])[+!+[]+!+[]]+(![]+[])[+[]]

You can apply the filter method on the array by passing Boolean as a parameter. This way it removes all falsy values(0, undefined, null, false and "") from the array.

const myArray = [false, null, 1, 5, undefined];
myArray.filter(Boolean); // [1, 5] // is same as myArray.filter(x => x);

You can get unique values of an array with the combination of Set and rest expression/spread(...) syntax.

console.log([...new Set([1, 2, 4, 4, 3])]); // [1, 2, 4, 3]

Sometimes you would like to have a destructured variable with a different name than the property name. In that case, you'll use a : newName to specify a name for the variable. This process is called destructuring aliases.

const obj = { x: 1 };
// Grabs obj.x as { otherName }
const { x: otherName } = obj;

You can map the array values without using the map method by just using the from method of Array. Let's map city names from Countries array,

const countries = [
{ name: "India", capital: "Delhi" },
{ name: "US", capital: "Washington" },
{ name: "Russia", capital: "Moscow" },
{ name: "Singapore", capital: "Singapore" },
{ name: "China", capital: "Beijing" },
{ name: "France", capital: "Paris" },
];

const cityNames = Array.from(countries, ({ capital }) => capital);
console.log(cityNames); // ['Delhi, 'Washington', 'Moscow', 'Singapore', 'Beijing', 'Paris']

You can empty an array quickly by setting the array length to zero.

let cities = ["Singapore", "Delhi", "London"];
cities.length = 0; // cities becomes []

You can round numbers to a certain number of decimals using toFixed method from native javascript.

let pie = 3.141592653;
pie = pie.toFixed(3); // 3.142

You can convert an array to an object with the same data using spread(...) operator.

var fruits = ["banana", "apple", "orange", "watermelon"];
var fruitsObject = { ...fruits };
console.log(fruitsObject); // {0: "banana", 1: "apple", 2: "orange", 3: "watermelon"}

You can create an array with some data or an array with the same values using fill method.

var newArray = new Array(5).fill("0");
console.log(newArray); // ["0", "0", "0", "0", "0"]

Below are the list of placeholders available from console object,

1. %o — It takes an object,
2. %s — It takes a string,
3. %d — It is used for a decimal or integer These placeholders can be represented in the console.log as below

const user = { name: "John", id: 1, city: "Delhi" };
console.log(
"Hello %s, your details %o are available in the object form",
"John",
user
); // Hello John, your details {name: "John", id: 1, city: "Delhi"} are available in object

Yes, you can apply CSS styles to console messages similar to html text on the web page.

console.log(
"%c The text has blue color, with large font and red background",
"color: blue; font-size: x-large; background: red"
);

The text will be displayed as below,

Note: All CSS styles can be applied to console messages.

The console.dir() is used to display an interactive list of the properties of the specified JavaScript object as JSON.

const user = { name: "John", id: 1, city: "Delhi" };
console.dir(user);

The user object displayed in JSON representation

Yes, it is possible to get and debug HTML elements in the console just like inspecting elements.

const element = document.getElementsByTagName("body")[0];
console.log(element);

It prints the HTML element in the console,

The console.table() is used to display data in the console in a tabular format to visualize complex arrays or objects.

const users = [
{ name: "John", id: 1, city: "Delhi" },
{ name: "Max", id: 2, city: "London" },
{ name: "Rod", id: 3, city: "Paris" },
];
console.table(users);

The data visualized in a table format,

Not: Remember that console.table() is not supported in IE.