DEV Community: Samss Jubair

10 Javascript Very Basic Interview Questions You Should Know

Samss Jubair — Sat, 08 May 2021 15:46:17 +0000

This article is especially for beginners who are looking for Job as a Javascript Developer. I have searched a lot of Javascript interview questions and these 10 seem most important to me. Let's dig into this a bit.

1. What is Javascript?

Javascript is a programming language that is used for Web Development. JavaScript runs on the client-side of the web.

According to MDN JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it's used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

2. What is DOM

DOM stands for Document Object Model. When a web page is loaded the browser creates a DOM using the HTML and CSS file. The DOM is represented by nodes and elements. You can manipulate DOM using javascript. It's a tree-like structure.

3. How JS Code is Executed

It's a bit large question to answer in an Interview. But we can say it briefly. Javascript runs on the browser. There's a javascript engine for almost every browser. V8 is the most popular of them. Chrome uses the V8 engine. On the other hand, Firefox uses the Spider-Monkey engine.

4. Difference between == and ===

If I say this shortly, == only checks if both values are the same or not. It doesn't check the type of these values. Check out the code below:

if(2=="2"){
 console.log("true")
} else {
console.log("false")
}

The above code will log true. Because it treats both 2 and "2" as equal as it doesn't check the types.

On the contrary === checks both type and quality. For instance:

if(2==="2"){
 console.log("true")
} else {
console.log("false")
}

This will log false. Because 2 and "2" are equal by values but they are of different types.

5. Null vs Undefined

Generally, null means empty and non-existent value while undefined means something that is declared but not defined yet. Though you can explicitly set undefined to a variable too.

var n;
console.log(typeof(n)); // undefined

var n = null;
console.log(typeof(n)); // object

Interestingly null is an object type in JS.

6. Var vs Let vs Const

Before ES6 var was the only way to declare a variable. But now we have more options.

There is a term as scope. Scope means where these variables are available for use. var declarations are globally scoped or function/locally scoped.

Var can be hoisted which we will discuss a few seconds later. But now let is more preferable for variable declarations. You can use const when there is no need to change a variable later in the code. To get the difference between this you can read the following article which I found pretty useful.

7. Hoisting

In javascript, a variable can be used before it has been declared. The concept of variable and function declarations to physically moved to the top of your code is called hoisting.

console.log(num); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage
var num; // Declaration
num = 6;

So are let and const variables not hoisted? The answer is a bit more complicated than that. All declarations (function, var, let, const, and class) are hoisted in JavaScript, while the var declarations are initialized with undefined, but let and const declarations remain uninitialized.

8. Global vs Local Scope

In javascript, scopes are divided in two ways. Local and global.
Variables declared in the function are called local scope. That variable can't be accessed outside of the function. On the contrary, variables declared outside of a function are called global scope. it can be accessed inside the function.

var genre= "superhero" //global scope
// code here can't use superhero but genre
function myFunction() {
  var superhero = "Batman"; // local scope

  // code here CAN use superhero and genre

}

9. Closure

A closure gives us access to an outer function’s scope from an inner function. It can be created by returning another function from a function. It creates a close environment for each instance. For example:

function sum(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = sum(5);
var add10 = sum(10);

console.log(add5(6));  // 11
console.log(add10(6)); // 16

Here add5 and add10 are both closures. They share the same definition but store different environments. To know more about closures you can follow the link below:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

10. Callback Function

According to MDN, A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. For instance

function greeting(name) {
  console.log('Hello ' + name);
}

function greetEmployee(name,callback) {

  callback(name);
}

greetEmployee("Dwight",greeting);

Here the greeting function has been used inside the greetEmployee function. This is what we call a callback function. Follow this to grasp more about js callback.

Thanks for reading this. Hope this will help you.

Stay in touch
Happy coding

10 Things You Need To Learn About Before Starting ReactJS

Samss Jubair — Fri, 07 May 2021 15:54:47 +0000

Millions of developers use ReactJS. If you are new to React development or willing to start it, this article might help you. Here are my top 10 things you should know definitely about react.

1. Is React a library or framework?

It's a common question among newbies. Rather I have seen some people working with react who think it's a framework.

For the record, It's a library. A framework is theoretically a larger thing comparing to a library. A library is more flexible when it is compared to a framework. You have more control over it.

React is comparatively small than frameworks like Angular, Vue, Laravel, or Django.

2. What is ReactJS actually?

It's an open-source javascript library for frontend development. It was created and developed by Facebook. ReacrtJS is extremely popular nowadays for creating single-page web applications.

3. Why React?

React provides better performance and better user experience compared to other frameworks. It uses reusable components that reduce a lot of pain for frontend developers. It's fast and SEO-friendly. ReactJS guarantees quicker rendering. It's also easy to learn.

Another exciting thing is you can use React for both Android and ios app development by using React-Native. Before heading to ReactJS I was passionate about android app development. This feature excited me the most to learn ReactJS.

4. JSX

React introduces us to JSX. JSX is a syntax extension of Javascript. You can write HTML inside your Javascript code using JSX.

const element = <h1>ROXANNE</h1>;

Instead of writing markups and logic in separate files, react introduces us to JSX. Browsers don't understand JSX, to translate JSX with browser understandable JS we need a transpiler. For example Babel and Transcripts.

To know more about it read the article below
https://reactjs.org/docs/introducing-jsx.html

5. The Virtual DOM

You may hear the word DOM (Document Object Model) if you have some previous frontend developing experience. DOM treats HTML as a tree structure. We can modify the DOM using JS. If you modify anything in the DOM the whole tree structures get updated. It can consume a decent amount of time if you are working with a large application.

You can learn more about DOM if you are interested from [here]{http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_general}

React introduces us to the Virtual Dom. Whenever any changes occur in V DOM it does not update the whole DOM. It rather compares the change with the previous version of DOM using Diffing algorithm. Then it applies the reconciliation process to update the UI. It's one of the coolest features of ReactJS in my opinion. You can learn more about this from the URL below:
https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

6. Components

A react application is all about components in my eyes. You can create reusable components which can be used as an HTML element wherever you need it. You can use two types of components in ReactJS. Functional and Class-based.

Class-based components are slightly out of date. If you want to learn reactJS now I'll suggest you learn functional components first.

function Welcome() {
  return <h1>Hello, How you doin?</h1>;
}

function App() {
  return (
    <div>
      <Welcome/>
      <Welcome/>
      <Welcome/>
    </div>
  );
}

Here Welcome is a component that has been used three times. You can divide your react application into a lot of components like this. You can get a clear idea about this from the link below:
https://reactjs.org/docs/components-and-props.html

7. Props

HTML elements can have some properties like title, placeholder, etc. You can also use this type of thing in react. It's called the props. You can pass some data while declaring your component just like you declare HTML properties. For example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Michael" />
      <Welcome name="Dwight" />
      <Welcome name="Jim" />
    </div>
  );
}

Here we are passing different names for each Welcome component like we are passing HTML property. Using props we can send different data to components to build UI.

to learn more about props follow this URL https://reactjs.org/docs/components-and-props.html

9. Hooks

A Hook is a special function that lets you “hook into” React features. For example, useEffect, useState, useRef, useContext, useReducer etc. If you want to use functional components to develop ReactJS applications hook is something you can't ignore.
You can follow the article below to know more about hooks.
https://reactjs.org/docs/hooks-state.html

10. State

State is a special react feature that reduces a lot of pain for the developer for changing the UI. Here we will discuss briefly the useState method. First, have a peek at the following code

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The useState hook returns a pair of values: the current state and a function that updates it. In class component we use this.state.count and this.setState for similar reason. The value of the state can be updated using the setState method. To learn more about useState hooks follow the link below:
https://reactjs.org/docs/hooks-state.html

I guess this is all for today. This is my first article in dev.to
Inspire me to continue writing. Thanks for reading this

Happy coding!