DEV Community: MD. Kais

Google MicroSoft Facebook Interview Question

MD. Kais — Sat, 26 Jun 2021 10:08:54 +0000

The syllabus for the interviews is very clear and simple:
1) Dynamic Programming
2) Super recursion (permutation, combination,...2^n, m^n, n!...etc. type of program. (NP hard, NP programs)
3) Probability related programs
4) Graphs: BFS/DFS are usually enough
5) All basic data structures from Arrays/Lists to circular queues, BSTs, Hash tables, B-Trees, and Red-Black trees, and all basic algorithms like sorting, binary search, median,...
6) Problem solving ability at a level similar to TopCoder Division 1, 250 points. If you can consistently solve these, then you are almost sure to get in with 2-weeks brush up.
7) Review all old interview questions in Glassdoor to get a feel. If you can solve 95% of them at home (including coding them up quickly and testing them out in a debugger + editor setup), you are in good shape.
Practice coding--write often and write a lot. If you can think of a solution, you should be able to code it easily...without much thought.
9) Very good to have for design interview: distributed systems knowledge and practical experience.
10) Good understanding of basic discrete math, computer architecture, basic math.
11) Coursera courses and assignments give a lot of what you need to know.
12) Note that all the above except the first 2 are useful in "real life" programming too!
Interview 1:
Graph related question and super recursion
Interview 2:
Design discussion involving a distributed system with writes/reads going on at different sites in parallel.
Interview 3:
Array and Tree related questions
Interview 4:
Designing a simple class to do something. Not hard, but not easy either. You need to know basic data structures very well to consider different designs and trade-offs.
Interview 5:
Dynamic programming,
Computer architecture and low level perf. enhancement question which requires knowledge of Trees, binary search, etc.
Conclusion: "It's not the best who win the race; it's the best prepared who win it."

No Idea About React.Js?

MD. Kais — Thu, 27 May 2021 14:45:46 +0000

Before we start we assume that , you have a basic about HTML5, CSS , JavaScript and Document Object Model(DOM API) and JSX. Let's Dive into it

React is not a Framework

React is just a library and you need to make all decisions by yourself. It focuses on helping you to build user interfaces using components.

It doesn’t help you with server communication, translations, routing and so on. Some perceive this as a weakness. I agree with one wise man that once said:

“Framework solves the problem of its creators” ~one of my mentors

React is thin and it’s extremely easy to mix it with other 3rd party libraries. Rich JS ecosystem has a library for everything. You can choose your favorite one and plug it in without dealing with the design decisions/limitations of the framework.

Components Everywhere

React is all about Components
React follows the concept of Reusable Components.
Make Some Small Components , then join them and make a bigger Components.
Make a component and use it everywhere in your project.

Important topic before declare a Component

The Component name must be starts with a capital Letter. This is required cause Lowercase names are reversed for HTML elements.
Component can pass and receives a list of attributes. In general , Programmers call it props.
We can destructuring it in our component.
Use className instead of class to define a class.

JSX

React.Js introduces special JavaScript code, preprocessor step adding XML-like syntax into JavaScript. It helps to conduct building readable code, to save it in one verified file. Possibility of dropping HTML in render function without concatenating strings is excellent. Through using a particular JSX Transformer HTML is converted into functions:

Server-side Rendering

Mentioned above feature provides creating isomorphic/universal web apps. It accelerates loads of starting page because users do not need to wait for JavaScript loadings before viewing web sites.

One-way Data binding

It is always easily seen changing data place. It helps to monitor, to debug React’s self-contained components fast, especially in large applications.

Virtual DOM

React.js constructs efficient virtual DOM known as Document Object Model or vDOM. It allows to create light DOM tree and save it on server-side. It is one of the benefits working like that:

While user is interacting with Internet resource, new vDOM is being created.
Previous and recent versions are compared.
If mentioned versions have diffs, the vDOM will be rebuilt.

How rendering works

Every setState() call informs React about state changes. Then, React calls render() method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.

I often compare that to a diff mechanism in Git. There are two snapshots of component tree that React compares and just swaps what needs to be swapped.

I was looking for a clever diagram describing the render flow but couldn’t find one. You can read more about it here though.

State

Until now, we discussed only static components with static data passed down the components tree. Often, it’s needed to create a stateful component where the state is changing over time.

Let’s consider an <input> where you can type in a text that will be displayed below.

const InputBox = React.createClass({
  getInitialState () {
    return {
      text: ''
    }
  },

changeText (event) {
    this.setState({text: event.target.value})
  },

Advantages and Disadvantages of React.JS

There are ? benefits of ReactJS?:

Updates process is optimised and accelerated.
JSX makes components/blocks code readable. It displays how components are plugged or combined with.
React’s data binding establishes conditions for creation dynamic applications.
Prompt rendering. Using comprises methods to minimise number of DOM operations helps to optimise updating process and accelerate it.
Testable. React’s native tools are offered for testing, debugging code.
SEO-friendly. React presents the first-load experience by server side rendering and connecting event-handlers on the side of the user:

1. React.renderComponentToString is called on the server.

2. React.renderComponent() is called on the client side.

3. React preserves markup rendered on the server side, attaches event handlers.

Up to date. Facebook team supports the library. Advice or code samples can be given by Facebook community.
Using React+ES6/7, application gets high-tech and is suitable for highload systems.

Drawbacks of ReactJS

Learning curve. Being not full-featured framework it is requered in-depth knowledge for integration user interface free library into MVC framework.
View-orientedness is one of the cons of ReactJS. It should be found 'Model' and 'Controller' to resolve 'View' problem.
Not using isomorphic approach to exploit application leads to search engines indexing problems.
Lots of developers dislike JSX React’s documentation, manuals are difficult for newcomers’ understanding.
React’s large size library.

Top 10 Tricky InterView Question About JavaScript

MD. Kais — Thu, 27 May 2021 12:13:22 +0000

Truthy vs Falsy:

As well as a type, each value also has an inherent boolean value, generally known as either truthy or falsy. Some of the rules are a little bizarre so understanding the concepts and effect on comparison helps when debugging JavaScript applications.

The following values are always falsy:

false
0 (zero)
'' or "" (empty string)
null
undefined
NaN

Everything else is truthy. That includes:

'0' (a string containing a single zero)
'false' (a string containing the text “false”)
[] (an empty array)
{} (an empty object)
function(){} (an “empty” function)

Everything else is truthy.

Null vs Undefined

when it cause undefined?

declare but don't put a value.

let kais:
console.log(kais);
//undefined;

Don't return a function.

function add(n,m){
   console.log(n+m);
}
const result=add(2,3);
console.log(result)//undefined; //cause no retrun from the function.

don't return a value

function add(n,m){
   console.log(n+m);
return
}
const result=add(2,3);
console.log(result)//undefined; //cause no retrun a  value from the function.

if the value is not there

const kais={name:'kais',phone:'01213'};
console.log(kais.gf)//undefined;

if you set the value as undefined?

let kais=undefined;
console.log(kais);//undefined;

when we get null?

when we set the value as null

let kais=null;
//null

in code: https://github.com/Md-Kais/javaScript_interview/blob/main/nullVsundefined.js

Double equal vs Triple Equal

//tripleEqualVsDoubleEqual
//popular interview ques
//double equal never check data type of this variable{values};
//triple equal checks {data type+value}(strictly checks)

const first=0;
const second=false;
if(first==second){
    console.log('double match');//double match cause 0 means false
}
if(first===second){
    console.log('triple match');//0 is number and false is boolean type(never match);
}
const kais=1;
const kice='1';
if (kais==kice) {
    console.log('double match'); //value matches
}
if (kais===kice) {
    console.log('triple match');//triple never match cause kais is number and kice is boolean
}
//ALL  triple match is double match  but all double match isnot triple match
//as a jr. ,you use triple equal
const rais = 1;
const rice = 1;
if (kais == kice) {
    console.log('double match'); //value matches
}
if (rais === rice) {
    console.log('triple match');//triple matches cause of datatype+value
}

Scope:

Local Scope
Global Scope
Function Scope: Each Object/ function create a function scope

Global Scop

When programmer declare a undeclared variable inside a function then it creates a global scope and become a global variable; Using Strict mode to solve this problem

In "Strict Mode", undeclared variables are not automatically global. 'use strict'; at the top of the code makes it strict mode. more at: https://www.w3schools.com/js/js_strict.asp

myFunction();
function myFunction() {
  carName = "Volvo";
  var friend="rohit";
  console.log(friend);//rohit;
}
console.log(friend);//error; variable not declared.
console.log(carName);//Volvo. cause creates a global variable.

When programmer create a variable name using var. It becomes global variable.

Local Scope

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables have Function scope: They can only be accessed from within the function.

myFunction();
function myFunction() {
  carName = "Volvo";//global scope.
  var friend="rohit";//friend is a local variable
  console.log(friend);//rohit;
}
console.log(friend);//error; variable not declared.It's Local variable.
console.log(carName);//Volvo. cause undeclaration creates a global variable.

the Lifetime of JavaScript Variables

The lifetime of a JavaScript variable starts when it is declared.

Local variables are deleted when the function is completed.

In a web browser, global variables are deleted when you close the browser window (or tab).

scope problem

function Counter() {
  let count = 0;

  this.up = function() {
    return ++count;
  };
  this.down = function() {
    return --count;
  };
}

let counter = new Counter();

alert( counter.up() ); // ?
alert( counter.up() ); // ?
alert( counter.down() ); // ?
//1,2,1

Closure(main CONFUSING PART)

Closure means that things which creates a Unique Environment Inside an Environment. it means there is a part [[ environment ]]

definition if you a function within a function , execution of the inner function will create a scope inside of the outer function-a nested scope. Because the inside function is enclosed by outer function scope, the inner function
https://www.thatjsdude.com/images/scope/closureTwoFunc.png

https://www.thatjsdude.com/jsConcepts/concepts/scope.html

function a() {
    function b() {
        console.log('closure');
    }
    b(); //creates closure
    return false;//to skip undefined replying
}
//you call a function inside a function. so, you call the outer function is or not . the inner function execute.

//make a complex closure function;

function panda() {
    let penty = 0;
    return function() {
        penty++;
        return penty;
    }




}
const penty1 = panda();
console.log(penty1());
console.log(penty1());
console.log(penty1());
console.log(penty1());
console.log(penty1());

const penty2=panda();
console.log(penty2());
console.log(penty2());
console.log(penty2());

console.log(penty1());

Difference Between Bind,Call,Apply

what is bind?

ans:
1. Bind an object to a function.
2.reference it using 'this'.


//bind reduce the code repitition and make code DRY
//bind is calling a function without owner of this function
//suppose rohit has an axe . and you land it to kais. and kais can chope the wood but kais is not the owner of the axe
// so bind is a function calling.

//lets call two object
let c_1 = {
    x: 2,
    y: -2
}
let c_2 = {
    x: 22222,
    y: -2333
}
function printObject() {
    return(this.x + ',' + this.y);
}
let ans_1 = printObject.bind(c_1);
let ans_2 = printObject.bind(c_2);
console.log(ans_1(),
ans_2());
console.log(printObject());//undifined, undifined . cause this or object can't mention before

Call vs Apply

//call vs Apply
// call -> c, comma
//apply -> a, array
//call and apply is almost same. you have to call a object like this : 
//call:
//syntax: name_of_the-object_where_original_function_is_created.function_name.call(where_u_apply,data1,data2,data3,........................,dataN);
const normalPerson = {
    firstName: "Md.",
    lastName: "Kais",
    getFullName: function () {
        return (`${this.firstName} ${this.lastName}`);
    },//anonymus function;
    salary: 5500

}
const heroPerson = {
    firstName: "Masfdsdaf",
    lastName: "Ksfsadfd",
    getFullName: function () {
        return (`${this.firstName} ${this.lastName}`);

    },//anonymus function;
    salary: 10500,
    netSalary: function(TAX, tips, dutyless) {
        return (this.salary - TAX - tips - dutyless);
        console.log('hello');
    }
}
//call->comma
console.log(heroPerson.netSalary.call(normalPerson,55,550,100));//4795
console.log(heroPerson.netSalary.call(heroPerson, 55, 550, 100));//9795
//apply-> array
//data is passed by the help of array
//syntax: name_of_the-object_where_original_function_is_created.function_name.call(where_u_apply,[data1,data2,data3,........................,dataN]);

console.log(heroPerson.netSalary.apply(normalPerson, [55, 550, 100]));//4795
console.log(heroPerson.netSalary.apply(heroPerson, [55, 550, 100]));//9795

this keyword(important)

which is left side of the dot , this keyword follow that .

if there is no context , then this refers the whole window.

if there is an element , then this refers the that element.

if there is an object, then this refers that object.

const myObject = {
            name: 'Kuddus Ali',
            getFullName: function () {
                console.log(this);
                // this myObject er jonno kaj korbe. 
                // kintu amra jodi ei method ta onno object er jonno declare kori, tahole this oi method er hoye kaj korbe. 
                return 'Mr. ' + this.name;
            }
        }
        // console.log(myObject.getFullName);
        myObject.getFullName();
        const anotherObject = {
            name: 'Bidyut Ali',
        }
        anotherObject.getFullName = myObject.getFullName;
        // console.log(anotherObject.getFullName);
        anotherObject.getFullName();

        function add(a, b) {
            console.log(this);
            return a + b;
        }
        add(5, 7);
        // ekhane add method or function er bam pashe kono object dot(.) diye jukto nai, tai this er value ta hobe window. 

        anotherObject.sum = add;
        // add function ta ke anotherObject er sum method hisebe declare korlam. 

        anotherObject.sum();
        // ekhane sum() function er bame dot(.) diye anotherObject ase. 
        // tai seta this hisebe jabe add function er vitor. 

        setTimeout(function () {
            console.log(this);
        }, 5000);
        alert('I will come after 5 seconds delay');
//The keyword  you use to refer to an object through which they were invoked is this

Event Loop , Stack and Queue

Event loop means, how javascript works when execute that code. JavaScript event loops works in a stack way. It reads all the code. then start executing. Which comes first that execute last. Look at the video.

video link : https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en

Callback Function

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

Callback Function Sequence

JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.

function hello(name){
  console.log('hellp'+name);
}
hello(kais);
hello(rohit);
//hellpkais;
//hellprohit;

DOM API

DOM→ Document Object Model.

There are three types of things we have to care about when we create any website. They are

Content
Presentation
Behavior

We know content is controlled by HTML, presentation by CSS where the behavior which is the most important factor for a dynamic website is controlled by JavaScript. Now to make them work altogether, we need something that could be accessed by all of the technology we use(HTML, CSS, JavaScript). What if we create and control all of the 3 concerns using just this 'something'. This will be much easier. From here the idea of the DOM first came. This 'something' we were talking about is nothing but DOM API.

When we create any content for the Internet using HTML, the browsers convert them to a document object which contains all the elements we mentioned in the content as nodes. If we assign different styles to an individual element, this gets also saved in its node in the DOM.

Now here is the good thing. We can access any of the contents and presentations using JavaScript to manipulate them for different conditions, in other words adding behaviour to make the content dynamic.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Page</title>
  </head>
  <body>
    <h1>The main heading</h1>
    <p class="highlight">An interesting summary of this content.</p>
    <p>
      Some supplementary details to accompany our discussion.
             It also has a <a href="#">link</a>.
    </p>
    <div class="widget">
      <div class="foo"></div>
    </div>
    <table>
      <thead>
        <tr>
          <th>School</th>
          <th>Color</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>UNC Chapel Hill</td>
          <td>Carolina Blue</td>
        </tr>
        <tr>
          <td>NC State</td>
          <td>Wolfpack Red</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

The above HTML will look like this in the DOM object.

The image and the code are taken from here

CSS Most asked Interview Question

MD. Kais — Sat, 22 May 2021 18:39:52 +0000

PDF Link:

Drive Link

Github Gist

Gist

HTML Interview Questions

MD. Kais — Thu, 20 May 2021 14:11:07 +0000