DEV Community: Mir Hussain

Common interview questions that you need to know as a junior JavaScript developer.

Mir Hussain — Sat, 08 May 2021 15:19:12 +0000

Verbal questions.

Differences between '=' , '==' & '==='.

In JavaScript Equal to ( = ) is an assignment operator and Double or Triple equals ( ==, ===) are comparison operators. We use a single equal sign to assign a value to a variable by placing the variable name on the left side of the equal sign and the value on the right side of the equal sign.

Both the double equals ( == ) and triple equals ( === ) are used to compare two values. But there is a difference between them and the triple equal operator is safer.

By using double equals, JavaScript tries to match the value, and it does not bother about the type of value. So first it will convert the type of value to match the type of the values and then will compare. For example, if you compare 23 (number) with '23' (string) using double equals, JavaScript will convert the string to a number and then will compare it, as a result, the return value will be true.

"23" == 23 // true

On the other hand, triple equals ( === ) avoid these kinds of conversions. It checks both the value and type. As a result, if you compare 23 (Number) with ‘23’ (String) the return value will be false.

"23" == 23 // false

Truthy & Falsy values.

In JavaScript truthy value means, a value that is considered as true when encountered in a Boolean. The same rule applies to falsy value.

Truthy values are:

true, empty array " [] ", empty object "{}", number ( Nagative and positive number including float number, exept 0 and -0), BigInt, new Date(), -infinity and infinity.

Falsy values are:

false, 0, -0, 0n, empty string (""), null, undefiend and NaN.

What are "null" and "undefined"?

In JavaScript null is an object, where undefined is a type. null means empty. It can be assigned as a value where you don't want to assign any specific value. undefined means when a variable is declared but no value is assigned to it.

What is DOM ??

Document Object Model is a programming interface for HTML and XML. A webpage is an HTML document. We can't manipulate this document with a programming language. So DOM comes into play. DOM is an object-oriented representation of an HTML document. It represents the document as nodes and object which can be manipulated by a programming language such as JavaScript.

JavaScript arrow function.

JavaScript arrow function is shorthand of normal function in JavaScript. But it has some limitations too.

*Does not have its own bindings to this or super, and should not be used as methods.
*Does not have arguments, or new.target keywords.
*Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
*Can not be used as constructors.
*Can not use yield, within its body.

//Traditional Named Function with arguments
function add(a, b) {
  return a + b; 
} 

//Arrow Function 
add (a, b) => {
 return a + b;
}

Practical tasks

Find the largest element of an array.

Math.max() method returns the largest element.You can use this for an array with help of spread operator (...)

const numbers = [1, 2, 3]

console.log(Math.max(...numbers)) // 3

Remove duplicate elements from an array.

Easiest way to remove duplicates from an array is to use filter() array method. filter() returns a new array of elements. You can filter out duplicate elements by their index number.

const names = ["John", "Smith", "John", "David"]
function removeDuplicate(data) {
  return data.filter((value, index) => {
    data.indexOf(value) === index
  })
}

console.log(removeDuplicate(names)); // ["John", "Smith", "David"]

Count the number of words in a string.

If you are not an expert in RegEx like me, you can simply split the string with space and use .length method to count the words.

function WordCount(str) { 
  return str.split(" ").length;
}

console.log(WordCount("hello world"));

Calculate the factorial of a number using for loop.

Well, if you are not familiar with factorial, you need to know what the heck is factorial. Factorial is a mathematical term. It means multiplying a selected number down to 1. For example, the factorial of 5 would be 5*4*3*2*1 = 120. There is a condition that the number must be a positive integer and factorial of 0 is equal to 1 (Just don't ask why.)

Okay so let's get our conditions straight. No negative number and 0 = 1.

function factorialize(num) {
  if (num < 0) {
    console.log("Wrong Input")
  }
  if (num === 0 || num === 1)
    return 1;
  for (let i = num - 1; i >= 1; i--) {
    num *= i;
  }
  return num;
}
factorialize(5);

In this code, we will start from 5 all the way down to 1. In the first iteration, the value of 'i' would be num - 1 which is 4. We decrement 'i' by 1 after each iteration. We will store the number in the num variable and return it in the end.

Check whether a number is a prime number or not.

A prime number is a positive integer that is only divisible by 1 and itself. For example, 2, 3, 5, 7, 11 are the first few prime numbers.

function test_prime(n)
{

  if (n===1)
  {
    console.log("1 is neither prime nor composite number.")
  }
  else if(n === 2)
  {
    console.log("Prime number")
  } else {
    for(let x = 2; x < n; x++)
    {
      if(n % x === 0)
      {
        console.log("Not a prime number")
      }
    }
    console.log("Prime number") 
  }
}

test_prime(37)

What the heck is JSX in React.

Mir Hussain — Fri, 07 May 2021 10:55:23 +0000

JSX stands for JavaScript XML. JSX allows you to write HTML inside React. JSX is a syntax extension to JavaScript. In this article, I will try to explain how to use JXS without bashing your keyboard into your monitor. It is fairly simple when you get the hang of it.

As I say, using JSX you can write HTML directly into React with added functionality. Eventually, during the build process babel will transpile your code in plain JavaScript.

JSX code:

<Navbar color="gray" />

Compiles into:

React.createElement(
  Navbar,
  {color: 'gray'}
)

You can use any HTML tag that you want. If you don't have any child element you can use that tag as a self-closing tag.

JSX code:

<div className="imageContainer" />

compiles into:

React.createElement(
  'div',
  {className: 'imageContainer'}

Something that you should note here is that you can't use the "class" keyword because it is a reserved word for JavaScript so you have to use "className" instead. and also you can't use a dash (-) in your class names so you need to use camelCase for your naming.

User-created components must start with a capital letter. is a big no no in react. It should be like this, .

You can pass a JSX component as a child element. You can also pass simple HTML, JavaScript expression, and Functions as children.

<CartContainer>
<CartHeader/>

<h1>{name}</h1>
<p>Thank you</p>

</CartContainer>

Booleans, Null and Undefined are ignored when rendering. Don't get me wrong, these are valid children, but they don't get rendered. If you want to render them in your UI you have to convert them into a string.

const answer = true;
<div>
  The answer is {String(true)}.
</div>

Earlier in this article, we saw that the JSX compiles into calls to React.createElement so the React must be in scope. (What is Scope?? The "Scope" is beyond the scope of this article. We will talk about it in another article.) So what it actually means to be in scope?? Simply it means that you have to import React in each of your components.

import React from 'react';

You can send data from one component to another in JSX using something called Props. You can pass any JavaScript expression and string by typing the name of data following by equal sign and curly braces.

<ShoppingCart key={001}, name={"LV Wallet"}/>

if statements and for loops are not expressions in JavaScript so you can't send them as a Props but you can use them in the surrounding code.


function NumberDescriber(props) {
  let description;
  if (props.age > 18 ) {    
description = <strong>Underaged</strong>;  
} else { 
  description = <i>18+</i>; 
 }  

return (
<div>{props.number} is an {description} number</div>
);
}

A cleaner approach to write JavaScript (Bonus tips in the end.)

Mir Hussain — Thu, 06 May 2021 15:29:18 +0000

The best kind of code is a code that is easily readable by humans and can be executed by machines without any errors. When coding you don't want to sacrifice functionality over readability or vice versa. You should code in a way that other developers can read it without chugging two cups of coffee before going through your code. So, here are some tips to make your code cleaner -(These are not ancient rules that are written in gold or on pieces of rocks, that you must follow. But if you follow them you can achieve an easy-to-read code.)

Use a single space between parameters.

//Don't 
function add(numb1,numb2,numb3,numb4){...}

//Do
function add(numb1, numb2, numb3, numb4){...}

Use a single space between arguments.

//Don't 
let result = add(3,2,1)

//Do
let result = add(3, 2, 1)

Don't use space between function name and opening parenthesis.

//Don't 
function add (numb1,numb2){...}

//Do
function add(numb1, numb2){...}

For better readability you can indent your code. Use 2 Spaces or 1 Tab. 4 Spaces or 2 Tabs are overkill.

//Don't 
function add(numb1,numb2){
return numb1 + numb2;
}

//Do
function add(numb1, numb2){
  return numb1 + numb2;
}

Use the opening curly brace on the same line as your function.

//Don't 
function add(numb1,numb2)
{ return numb1 + numb2 }

//Do
function add(numb1, numb2){
  return numb1 + numb2;
}

Use a single space around your operators ( + - * / ).

//Don't 
function add(numb1,numb2,numb3){
return numb1+numb2+numb3;
}

//Do
function add(numb1, numb2, numb3){
  return numb1 + numb2 + numb3;
}

An empty line is a good choice to increase readability, but make sure you don't overdo it. You can use an empty line between two logical blocks.

//Don't 
function add(numb1,numb2){
  return numb1 + numb2;
}
let result = potato(2, 3);

//Do
function add(numb1, numb2){
  return numb1 + numb2;
}

let result = add(2, 3);

Use a single space after for/while/if.

If you have more than 2 conditions in your if statement breaks them down into individual lines.

//Don't
if (id === 001 && color === "black" && category === "shoe")

//DO
if (
  id === 001 && 
  color === "black" && 
  category === "shoe"
)

Avoiding 'else' is a good practice (Why you may ask?? That is a topic for another post.) But if you want to use 'else', use it without a line break.

//Don't 
if(...){
  ...........
}

else {.......} 

//Do
if(...){
  ........
} else { 
  ......
}

Bonus

If you want to learn more you can read Google JavaScript Style Guide

Or if you are a work-shy developer like me you can use an extension called prettier- code format. It will format your code in a standard manner.