DEV Community: Farihaakter

JavaScript Interview Questions

Farihaakter — Sat, 08 May 2021 17:46:18 +0000

1. Truthy and Falsy value:

JavaScript has truthy and falsy value. They are called boolean in JS. When the value of a variables in javascript is null, 0, undefined, NaN, false, -0, then this values are called falsy.
Again when the value of a variable is true, {}, [], " ", 12 are all truthy value.

2.Null vs Undefined:

Null is an empty value while undefined is a variable that is declared but never assigned a value. When a variable is declared but no value is assigned to it then it returns undefined when called.

let a;
console.log(a);
// gives undefined in return

let a = null;
console.log(a);
// null

3. Double-Equal and Triple-Equal:

Both double equal and triple equal is used in JS. Both are value comparison operation in JS.
The double equal compares the values of two variables after converting them to a common type. It does not compare the type of the values. Example:

console.log(2 == '2')
// will return true

While triple equal compares both the type and the value of a variables. If the values are not the same type then the values are considered unequal.

console.log(2 === 2)
// will return true

4. Global scope and Block scope:

In JavaScript, scope determines the accessibility of a variable.
javascript has two types of scope:

Global scope

Local scope

Variables that are declared inside a function are only accessible from that function it is defined. They are local or block scope variables in JS.
On the other hand the variables that are defined outside of a function are became GLOBAL variables. They are accessible from anywhere.

5. Bind, Call, Apply:

Bind method creates a new function when called. It takes the function property of an object and bind it to the new object. So the new object can execute the code inside of that function.

Call method can be used to get a method of another object. Example:

var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}

var person1 = {
firstName:"Fariha",
lastName: "Aktar"
}

person.fullName.call(person1);  // Will return "Fariha Aktar"

apply method is similar to call method. The apply method takes arguments as an array. apply nmethod is used when you want to use arguments as an array.

6.setTimeout, setInterval:

setTimeout() methods calls a function after a specific number of millisecond.
setInterval() is similar to setTimeout(). setInterval is used when you want to repeat the execution method of a function.

setTimeout(function()
{ alert("Hello World");
}, 2000);

7. What is JavaScript:

JavaScript is a high level programming language that is used in modern web pages. It is used for both client and server side website. Most of the websites are build with JS in this modern age. It supports event-driven, functional, object-oriented, and prototype-based programming styles.

8. Features of JS:

The main features of JS is given below:

DOM manipulation:

The most amazing features of JS is DOM manipulation. In the early years DOM were static. but after javascript DOM became dynamic.

Functions as first class object:

In JS, functions are used as objects. It can have methods and properties just like any other objects. It also can pass as an arguments to another function.

JavaScript as a Client-Side Language:

JS can be used as a client side language. Developers don't have to learn any other language for server side.

The Syntax is Similar to Java:

JavaScript has similar syntax as java. It makes things easier for developers to work with JS.

9. How javascript code executes:

Javascript code is executed in two phases.

Memory creation:

In this phase, JS allocates all the variables and functions in a program.

Code execution phase:

In this phase, JS first executes main. then Js runs the code line by line

10.What is DOM :

DOM represent a page in a web. Programmers can manipulate its structure, style and content. A web page is a document. This document can be displayed in a web browser or as the HTML source.
The DOM represents that same document.

React

Farihaakter — Fri, 07 May 2021 16:17:58 +0000

1.React:

React is a JavaScript library for building user interfaces.
React follows the Unix philosophy because it is a small library that focuses only one thing. That "one thing" is building user interfaces.
A user interface(UI) is a thing that put in front of users to have them interact with a machine. Though JavaScript, we can use React to describe Web UIs.
The most popular thing in react is that it uses virtual DOM that can be used to reconcile the actual DOM. DOM is Document Object Model. It's the browsers' programming interface for HTML. The DOM API is used to change a document structure, style, and content.

2.React's tree reconciliation:

when React renders a tree of elements in the browser, it first generates a virtual representation of that tree and keeps it in its memory for later. When we tell react to update the tree of elements it previously rendered, it generates a new virtual representation of the updated tree. It will compare the the two versions of the tree that it has in memory and compute the difference between them and update only the changes. This process is known as the tree reconciliation algorithm.

3. React Components:

In react, components are used to describe UIs. React components are reusable, composable and stateful.
The basic form of a react component is a plain-old javascript function. Functions are reusable and they can be used in another functions.
When the state of a React component changes, its output changes as well. React component's name has to start with a capital letter.

4.JSX:

JSX is a JavaScript extension that is a representation of React's tree of objects. JSX uses syntax that are similar to HTML template. In React application we use JSX.

<div>
{array.map(x => <div>{x.body}<div>)}
</div>

Before being used in the browser, gets translated to:

React.createElement(
"div",
null,
array.map(x => 
React.createElement("div", null, x.body)
),
);

React takes this tree of objects and transforms it into a tree of DOM elements.

5.React Hooks:

A hook is a call to a special function in a component. all hooks begins with the word "use". They are many usefull things that we can do with react hooks.
React hooks can only be used in function components.There are many hooks like: useState, useEffect, useCallBack.

const Hook = () => {
const [count, setCount] = useState(0);
return(
<button onClick={() => setCount(count + 1)}>{count}</button>
);
};

6.Virtual-DOM:

Document Object Model or DOM is a representation of a tree structure. Any changes in a DOM can make the DOM re-painted which can make your app work slow.
Virtual-DOM reduces this problem by minimizing these two stages and give a better performance in a complex app. when an element changes in DOM, all the elements again created in the Virtual-DOM.
It will check if any changes is made in a component. Only changed element will be updated in the actual DOM.

7.Separate the concerns:

In react, you can put HTML, CSS, JStogether as a component. For many years, we split JS, CSS, HTMl in different files. And it shouldn't be confused with separation of concerns.

8.Data goes down:

In react, data goes down the tree of the components. For this reason, when a data is passed from parent to child component you need to use props. From JSX point of view props are HTML attributes.

9.Events go up:

In react, parent component can get data from its child component. let's say a perent component that needs data from the child input box. it will pass down a function as a prop to that child to push some data up. Then the parent component can save the data in its own state or can pass it down to a different components.

10.How rendering works:

Every state change inform react about state changes. Then, react calls render() method to update the components representation in memory and compares it with actual DOM. Then React will only update the changes to the DOM. Child components know that they need to re-render because their props changed.

Web-Developments

Farihaakter — Thu, 06 May 2021 13:55:17 +0000

1.Javascrips(Types of value):

Javascripts has nine types of values. This values are divided into two main categories:

Primitive values:

Undefined
Null
String
Numbers
Booleans
Symbols
BigInts

Objects and Functions:

Objects
Functions
All the other fundamentals are called objects like: array, regular expression.The value's type of javascript can be checked using typeof() operator:

console.log(typeof(2)); //"number"

2.Try-Catch:

Errors are the most common phenomenon in programming and if you are a beginner then bless you. You know what i mean. An error can occur for many reasons like we programmers made a mistakes or users put an invalid input and many more But you can handle an error with try-catch method.
When an error occurs a script dies meaning it will stop working and printing it to console. It's totally not good for users experience. That's when try-catch comes into play.
try-catch allows us to catch that error without stopping the script.
The syntax of try-catch is:

try{
//code
}
catch(err) {
//error handling
}

First the code in try block will execute and if it does not get any error then catch(err) will be ignored and if an error occurs in try block then the try execution will stop and will go to catch block. The error variables will contain an error objects with details about what happened.

3. Coding-Style:

Coding style is very important for a programmer. It must be clean and readable so other programmers can read our code. Usually we wright codes for users or a client or other developers. If our code is not readable then it will be troublesome for other developers to reuse or modify the code.
here is a detail info about how to wright code more clean:

https://javascript.info/try-catch?fbclid=IwAR3jDTTN00ohtJWi-xv49Pruec7HFFKC3F4u4Es6mZENqd3rxmfTRwvSC-8

4. Comments:

Comments are used in code to know how the code is working. It is really convenient for both users of the code and the coder himself. When a programmers comes back to his/her project after a while, comments help them why and how this code is written that way.
But its excess use can diminish code's cleanliness and readability. It is important to know when and how we use comments.
Comments has to be minimal and avoid using unnecessary comments.

5.Cross Browser Testing:

Cross browser testing is the practice of making sure that the web page or app is working across an acceptable number of web browser.

It is important that a web page or app is working in different types of browser like Chrome, Firefox, Safari and IE/Edge.

If your web app has many features like 3D animation or technologies then it might work on smart phone or high tech desktop or popular browsers but does not work on old browsers. That device or browsers has to support that tech to work. It might not even show in that browser. That's why it is really important to use cross browser testing according to your user need. What kind of users you going to target for your web app.
Usually there are four steps to follow when making a web app:

Initial planning > Development > Testing > Fixes

6.Block-Bindings(ES6):

ECMAScript 6 has introduce block level binding to make variable declaration more easy in javascript. Traditionally, the way variable declarations work has been one tricky part of programming in JavaScript. When variables is declared using var, it is treated as global variable. No matter where it is declared in a function it can be accessible from anywhere in that function. This is called Hoisting.

function(){
// x is accessible from here
if(condition){
var x = "value";
return x;
}else{
// x is accessible from here
return null;
}
// x is accessible from here
}

7.Block-Level-Declaration:

Block level declaration are those that declare variables that are not accessible from outside of a block. It has two types of syntax when declaring a block: let and const. Block scope are created:
1.Inside of a function
2.Inside of a block

8.Const vs Let declaration:

let declaration:

The let declaration syntax is the same as var declaration syntax. let can be used instead of var. The difference between var and let is let is accessible only in the it is declared. Unlike var it is not hoisted in the top of the functons.

const declaration:

Variables declared using const are considered constant.
const declaration are similar to let declaration. const variables are not accessible from outside of the block. but constant variables value can not be changed after assigning a value.

9.Declaring objects using const:

A const declaration of object prevents modifications of the binding but not the value of the objects.Example:

const object = {
   name: 'someone'
};

//work
object.name = 'new';

//throw error
object = {
  name: "new"
}

10.Functions:

Default parameters:

Functions with default parameters allows functions to use that value if that value is not pass in the parameters.Example:

function addition(a, b = 2){
   return a + b;
}

addition(1, 4) // 5

addition(5) // 7

First Blog

Farihaakter — Wed, 05 May 2021 15:22:16 +0000

1.Javascript:

javascript is a dynamic language that developers can use to make an interactive website. It is first invented by Brendan Eich in 1995 and It was released in 1996.
Unlike other programming languages javascript is designed to run as a scripting language in a host environment. That is why it is really popular language among developers.
javascript is a versatile language that has built in objects, types, array, methods, operators and function. its syntax is similar to java and C languages.

2.Variables:

Javascript variables can have values with different data-types. like: string, number, boolean, array and objects.
javascript uses one of three keywords when declaring a variable. This are: let, const and var.

let:

let is a block level variable that is available from the block it is declared.
Example:

function example(){ //it's not accessible from here for(let i = 0, i < 5, i++){ //accessible } //it's not accessible from here }

const:

const is a static variable which value can't be changed. it is available from the block it is declared.
Example:

const a = 2; //value is set a = 50; // will throw an error

var:

var is the most common keyword in javascript. 'var' declared variables can be accessible from anywhere in the function. So it can cause problem in future. It is preferable to use let or const rather than var. Example:

function example(){ //var is visible in here for(var i = 0, i <5, i++){ //accessible from here } // also accessible from here }

3.Operators:

In javascript there are operators called numeric operator like + ,- ,* ,/ ,%. There are also assignment operator = and comparison operators <, >, <=, >=. Example:

let a = 1 + 2; let b = 5 - 1; let c = 2 * 1; let d = 9 / 3;

4.Conditionals:

Conditionals are structures that are made to look whether a statement is true or false. If the statement is true then the function is executed. If and else are two conditionals in javascript.

5.Objects:

Objects are collection of name and value pairs. It's similar to dictionary in python. In js, objects are declared in two ways:

var object = new Object(); var object = {};

The object's value can be accessible by calling its name attribute:

let object = {name:'s', age: 24}; console.log(object.name);

Once created, the exist properties of an object can be changed in this way:

onject.name = 'x'

6.Arrays:

Arrays are another type of object in javascript. Arrays are created in this manner:

let x = new Array(); x[0] = 1; x[1] = 2; x[2] = 3;

If an array is empty, the value of an array will be undefined. arrays are iterable using loops.

7.Functions:

Functions are most used and useful element in a language.
It reduces the repetition of the same code. Functions have to be defined before it is called and it can called as many times as you want. Example of a function:

function example(x,y){ return x + y; }

In javascript, functions can take 0 to more arguments. Functions can be declared in another function definition.

8.Strings:

Strings are types that holds data in a text form. There are may built in methods in js that are used in string to manipulate its value.
Some of them are described bellow:

endsWith():

endsWith() method determines whether a string ends with the characters of a specified string:

const str = 'value'; console.log(str.endsWith('e')); // returning the value true

includes():

The includes() method determines whether a string is present in another string:

const str = 'hello world'; const word = 'hello'; console.log(str.includes(word))// return true

indexOf():

The indexOf() method returns the index value of a string from a specified string. It returns the first index it can find of that calling string object. If it does not find the string it will return -1.

slice():

The slice() method returns a extracted string of a specified string without modifying the original string.
Example:

const str = 'The cat'; console.log(str.slice(3))// expected output cat

9.Number:

javascript has two built in numeric types: Number and BigInt.
There are many built in methods that are present in numbers.

10.SSL:

When we go to a website, we see two types of URL http:// and https://. It is necessary to have that extra s to secure a website. When we fill a form giving personal information like email or bills. It is important to know that our information is secured and does not go to any other person. That extra s give us that security that we want. It's called SSL which stands for Secure Sockets Layer.