Javascript Technical questions

What is API, and give example.

An API is a set of programming code that enables data transmission between one software product and another.

Explain event bubbling and how one may prevent it

Event bubbling is the concept in which an event triggers at the deepest possible element, and triggers on parent elements in nesting order. As a result, when clicking on a child element one may exhibit the handler of the parent activating.

What is impersonation?

Impersonation is an act of pretending to be another person. For IT Systems impersonation means that some specific users (usually Admins) could get an access to other user's data.

What is Restful or Rest API?

The app is the client or the front end part, under the hood, it needs to talk to the server or the backend to get or save the data. This communication is through http protocol, the same protocol that powers our web. So on the server we are exposed to a bunch of services that are accessible via the HTTP protocol. The client can then directly call the services by sending HTTP request. Now this is where REST comes in, Representational State Transfer. Rest is basically a convention for building these HTTP services. So we use simple HTTP protocol princicples to provide support to create, read, update, and delete data. We refer to these operation all together as CRUD operations. Example) Let's say we have a company called vidly for renting out movies, we have a client app where we manage the list of our customers. On the server, we should expose a service an endpoint like this. http://vidly.com/api/customers. So the customers can send HTTP requests to this endpoint to talk to our service. Now a few things about this endpoint. First of all, the address can start with HTTP:// or HTTPS:// that depends on the application, if you want the data to be exchanged on a secure channel, you will use HTTPS. After that we have the domain of the application "vidly.com". Next we have "/api", a lot of companies use this convention to expose their restful services, they include the word API somewhere in the address, it can be after the domain or subdomain like API/vidlink. After that we have "/customers", which refers to the collection of customers in our application. In the rest world, we refer this part as a resource, we can expose our resources such as customers, movies, rentals on various endpoints. This endpoint in this example work with the customers. All the operations around customers such as creating a customer, updating, deleting a customer would be done by sending an HTTP request to this endpoint. The type of the HTTP request determines the kind of operation. So every http request has what we call a verb or method that determines its type or intention. Here are the standard HTTP methods: GET - getting the data from the server. POST - uploading the data to the server. PUT - updating the data to the server. DELETE - Deleting the data from the server. Using GET: Request: GET /api/customers - notices the customers here, it indicates the list of customers, so when we get a response from the server, we should get an array of objects with customers data inside. If we want to get the specific customer, we should include its address as well. GET /api/customers/1 Then our server will response with only one customer object like this: {id: 1, name: "" } To update: Request: PUT /api/customers/1 , we need to specify the address of the specific customer that needs to be updated, but also include the customer object in the body of the request so this is a complete representation of the customer object with updated properties. { name: "" } we will send this HTTP request with the updated object with the server, and the server will updates the customer with the given ID. To Delete: DELETE /api/customers/1 , we just need an ID of the customer. To Create: we need to send an HTTP Post request. POST /api/customers - we don't need the address of a specific customer, because we are going to work with a collection of customers, we will post a new customer to this collection. That's why we should include a customer object in the body request. { name: "" } The server will receive this object and creates the customer for us.

Describe what User Interface (UI) Design does mean for you.

User Interface (UI) design is the design of software or websites with the focus on the user's experience and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible. Good user interface design puts emphasis on goals and completing tasks, and good UI design never draws more attention to itself than enforcing user goals.

How Can I Get Indexed Better by Search Engines?

It is possible to get indexed better by placing the following two statements in the <HEAD> part of your documents: <META NAME="keywords" CONTENT="keyword keyword keyword keyword"> <META NAME="description" CONTENT="description of your site">

What is npm?

npm stands for Node Package Manager. npm provides following two main functionalities: Online repositories for node.js packages/modules which are searchable on search.nodejs.org. Command line utility to install packages, do version management and dependency management of Node.js packages.

What is meant by Continuous Integration?

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.

Explain Null and Undefined in JavaScript.

JavaScript (and by extension TypeScript) has two bottom types: null and undefined. They are intended to mean different things: Something hasn't been initialised : undefined. Something is currently unavailable: null.

What is Node.js?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser

Okay, well let's say the list is pretty big, so you need something that's faster than O(n²).

I could just use a boolean array and use the integer values as indices with O(n) time complexity to iterate through the list and O(n) space complexity for the array/hash.

What is a Polyfill?

A polyfill is essentially the specific code (or plugin) that would allow you to have some specific functionality that you expect in current or "modern" browsers to also work in other browsers that do not have the support for that functionality built in. Polyfills are not part of the HTML5 standard Polyfilling is not limited to Javascript

What is the purpose of cache busting and how can you achieve it?

Browsers have a cache to temporarily store files on websites so they don't need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth. However, it can cause problems when the website has been changed by developers because the user's cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed. Cache busting is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file. A common technique to force the browser to re-download the file is to append a query string to the end of the file. src="js/script.js" => src="js/script.js?v=2" The browser considers it a different file but prevents the need to change the file name.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

What is ClickJacking?

ClickJacking is an attack that fools users into thinking they are clicking on one thing when they are actually clicking on another. The attack is possible thanks to HTML frames (iframes). Its other name, user interface (UI) redressing, better describes what is going on. Users think they are using a web page's normal UI, but in fact there is a hidden UI in control; in other words, the UI has been redressed. When users click something they think is safe, the hidden UI performs a different action.

Explain the three main ways to apply CSS styles to a web page.

1. Using the inline style attribute on an element. <div> <p style="color: maroon;"></p> </div> 2. Using a <style> block in the <head> section of your HTML. <head> <title>CSS Refresher</title> <style> body { font-family: sans-serif; font-size: 1.2em; } </style> </head> 3. Loading an external CSS file using the <link> tag <head> <title>CSS Refresher</title> <link rel="stylesheet" href="/css/styles.css" /> </head>

What is CSS preprocessor and why to use one?

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain. Here are a few of the most popular CSS preprocessors: SASS (SCSS) LESS Stylus PostCSS

What is a recursive function?

A function that calls itself directly or indirectly. The recursion continues until it reaches a set of parameters that return a value instead of calling the function recursively. A recursive function can solve specific problems quite quickly.

What is a Grid System in CSS?

A grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid systems include two key components: rows and columns. Some Grid Systems: Simple Grid Pure Flexbox Grid

Tell me about AJAX (JavaScript) in detail. Can you give me an example of when you last used it?

AJAX is the abbreviation of Asynchronous JavaScript and XML. AJAX is a technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.

Explain the difference between cookies, session and local storage

Cookies: Limited storage space 4096 bytes / ~4 kb Only allow to store data as strings Stored data is sent back to server on every HTTP request such as HTML, CSS, Images etc, Can store only 20 cookies per domain In total 300 cookies are allowed on a site Setting HTTP only flag will prevent accessing cookies via javascript Can set expiration duration for auto deletion (can be set either from server or client) Example) // Set with expiration & path document.cookie = "name=Gokul; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;"; // Get document.cookie; // Delete by setting empty value and same path document.cookie = "name=; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;"; Session Storage: Storage space is 5 mb / ~5120 kb Storage space may vary a little based on the browser Only allow to store data as strings Data is available per window or tab Once window or tab is closed stored data is deleted Data will be only available on same origin Example) // Set sessionStorage.setItem("name", "gokul"); // Get sessionStorage.getItem("name"); // gokul // Delete sessionStorage.removeItem("name"); // Delete All sessionStorage.clear(); Local Storage Storage space is 5 mb / ~5120 kb Storage space may vary a little based on the browser Only allow to store data as strings Data will be only available on same origin Data is persistant (untill explicitly deleted) API is similar to session storage Example) // Set localStorage.setItem("name", "gokul"); // Get localStorage.getItem("name"); // gokul // Delete localStorage.removeItem("name"); // Delete All localStorage.clear();

Differences between setInterval() and setTimeout()?

Example) const sayHello = () => { console.log("Hello"); }; const Hello_1 = setTimeout(sayHello, 2000); const Hello_2 = setInterval(sayHello, 2000); 1) The setTimeout() function will only invoke the sayHello function only one time after 2 second. 2) The setInterval() function will invoke the function sayHello every 2 second continuously. to clear setTimeout() function, we can write clearTimeout(Hello_1). to clear setInterval() function, we can write clearInterval(Hello_2).

What is Git?

Git is a Distributed Version Control system (DVCS). It can track changes to a file and allows you to revert back to any particular change. Its distributed architecture provides many advantages over other Version Control Systems (VCS) like SVN one major advantage is that it does not rely on a central server to store all the versions of a project's files.

Could you explain the Gitflow workflow?

Gitflow workflow employs two parallel long-running branches to record the history of the project, master and develop: Master - is always ready to be released on LIVE, with everything fully tested and approved (production-ready). Hotfix - Maintenance or "hotfix" branches are used to quickly patch production releases. Hotfix branches are a lot like release branches and feature branches except they're based on master instead of develop. Develop - is the branch to which all feature branches are merged and where all tests are performed. Only when everything's been thoroughly checked and fixed it can be merged to the master. Feature - Each new feature should reside in its own branch, which can be pushed to the develop branch as their parent one.

Okay, let's say the list of numbers is quite large, so you'd like to avoid creating a copy of it. Maybe you have 8GB of RAM, and the list takes up 6GB.

I could sort the numbers and compare adjacent pairs. That would take O(n*log n) time and O(1) space if I use an in-place sort like mergesort.

Describe Closure concept in JavaScript as best as you could

In C and most other common languages, after a function returns, all the local variables are no longer accessible because the stack-frame is destroyed. In JavaScript, if you declare a function within another function, then the local variables can remain accessible after returning from the function you called. A closure is a stack frame which is allocated when a function starts its execution, and not freed after the function returns (as if a 'stack frame' were allocated on the heap rather than the stack!). In JavaScript, you can think of a function reference variable as having both a pointer to a function as well as a hidden pointer to a closure.

Explain the difference between undefined and not defined in JavaScript

In JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error var name is not defined and the script will stop execute thereafter. But If you use typeof undeclared_variable then it will return undefined. Before starting further discussion let's understand the difference between declaration and definition. var x is a declaration because you are not defining what value it holds yet, but you are declaring its existence and the need of memory allocation. var x; // Declaration if (typeof x === 'undefined') // Will return true A variable that neither declared nor defined when we try to reference such variable then It result not defined. console.log(y); // Output: ReferenceError: y is not defined

What is Scope in JavaScript?

In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function's scoped variables. A variable name has to be unique within the same scope. A scope can be nested inside another scope. If one scope is nested inside another, code inside the innermost scope can access variables from either scope.

Can you describe the model-view-controller (MVC) architecture?

It separates data from the user interface. The MVC architecture is mostly used for GUI applications. The model layer contains the data, the view layer sends the data to the user, and the controller is the one that makes changes to the model based on user input. Now modern websites can be incredibly complex, without many developers working on the same application. To make these complex applications work easier, the most popular one is the MVC pattern, which is Model, View, and Controller. The goal of this pattern is to split a large application into specific sections that each of them has its own purpose. The controller is the one that make changes to the model based on the user input/request, and tell the rest of the server what to do with the request. It acts as a middleman between the other two section models. When the user makes a request, the controller receives it, and ask the model for the information based on the request. The model is responsible for handling all of the data logic. This means that the model interacts with the database and handles all valdiation, saving, updating, and deleting the data. The model will then send back its response back to the controller, the controller will then need to interact with the view to render the data to the user. The view is responsible with how to present the information that the controller send it. This means the view will be a template file that dynamitically render HTML based on the data that the controller send it. The view doesn't have to worry about how to handle the final presentation of the data, but instead only care about how to present it, the view will send its final presentation back to the controller, and the controller will handle sending that presentation back to the user. The important thing to note about this design is that the model and the view never interact with each other, they communicate to each other through the controller. This separation makes the complex applications much easier.

You need to update your local repos. What git commands will you use?

It's a two steps process. First you fetch the changes from a remote named origin: git fetch origin Then you merge a branch master to local: git merge origin/master Or simply: git pull origin master

Explain meta tags in HTML

Meta tags always go inside head tag of the HTML page. Meta tags is always passed as name/value pairs. Meta tags are not displayed on the page but intended for the browser. Meta tags can contain information about character encoding, description, title of the document etc,

What is Node.js?

Node.js is a web application framework built on Google Chrome's JavaScript Engine (V8 Engine). Node.js comes with runtime environment on which a Javascript based script can be interpreted and executed (It is analogus to JVM to JAVA byte code). This runtime allows to execute a JavaScript code on any machine outside a browser. Because of this runtime of Node.js, JavaScript is now can be executed on server as well.

What is OOP?

Object oriented programming (OOP) is a programming paradigm(the style of the code) based on the concept of objects. It was developed with the goal of organizing code, to make it more flexible and easier to maintain. OOP is object oriented programming that have 4 principles including encapsulation, abstraction, inheritance, and polymorphism. Abstraction: ignore or hiding details that don't matter, allowing us to get an overview perspective of the thing we are implementing, instead of messing with details that don't really matter to our implementation. For example) A phone can have internal stuff like verifying the phone's tempurature and voltage, vibration motor or speaker. But as a user interacting with a phone, we don't really need these details. In reality, all of these abstract details are hided away from the user. And all we have left are like the home button, volume buttons, and the screen. Another example would be addEvenListener funciton, that we use all the time in our app. Do we actually know how exactly it works behind the scenes? No, and we don't really care as a user. So these little details are hided from us. Encapsulation: Keep properties and methods private inside the class, so they are not accessible from outside the class. Some methods can be exposed as a public interface(API). Say we have a program. It has a few logically different objects which communicate with each other — according to the rules defined in the program. Encapsulation is achieved when each object keeps its state private, inside a class. Other objects don't have direct access to this state. Instead, they can only call a list of public functions — called methods. So, the object manages its own state via methods — and no other class can touch it unless explicitly allowed. If you want to communicate with the object, you should use the methods provided. But (by default), you can't change the state. Inheritance: When we have two classes that are closely related, like a user and an admin and they both share the same methods like password, email, and permissions, we can have one class inherit from the other. So we will have one parent class, and one child class and the child class then extends the parent class. This means that that child class inherit all the properties and methods from the parent class. For example, the user is the parent class, and the admin is a child class, the admin will have the properties like user name, password, and email, but also have its own properties and methods like permissions. Polymorphism: A child class can overwrite a method it inherited from a parent class. For example) With the admin as a child class, let says the login method from the user class required a password, for Admin child class, we can rewrite the login method to have a password and a key as well. So according to polymorphism, that login method will overwrite the login method that has been inherited from the user parent class.

Please explain big-O notation in the simplest terms.

Please explain big-O notation in the simplest terms. Big-O notation, also known as Landau's symbol, tells how the runtime or space requirement of a function grows as the input grows. Which means that the algorithm speed isn't measured in seconds but in the growth of the number of operations.

What is RESTful Web Services?

RESTful web services are light weight, highly scalable and maintainable and are very commonly used to create APIs for web-based applications.

What do you know about serverless model?

Serverless refers to a model where the existence of servers is hidden from developers. It means you no longer have to deal with capacity, deployments, scaling and fault tolerance and OS. It will essentially reducing maintenance efforts and allow developers to quickly focus on developing codes. Examples are: Amazon AWS Lambda Azure Functions

Explain equality in JavaScript.

Strict comparison (e.g., ===) checks for value equality without allowing coercion. Abstract comparison (e.g. ==) checks for value equality with coercion allowed. If either value (aka side) in a comparison could be the true or false value, avoid == and use ===.

Explain the CSS "box model" and the layout components that it consists of

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following: Content - The content of the box, where text and images appear Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content) Border - A border surrounding the padding (if any) and content Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

What is DOM (Document Object Model) and how is it linked to CSS?

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents. When a browser displays a document, it must combine the document's content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.

What does use strict do?

The use strict literal is entered at the top of a JavaScript program or at the top of a function and it helps you write safer JavaScript code by throwing an error if a global variable is created by mistake. For example, the following program will throw an error: function doSomething(val) { "use strict"; x = val + 10; }` It will throw an error because x was not defined and it is being set to some value in the global scope, which isn't allowed with use strict The small change below fixes the error being thrown: function doSomething(val) { "use strict"; var x = val + 10; }

How to compare two objects in JavaScript?

Two non-primitive values, like objects (including function and array) held by reference, so both == and === comparisons will simply check whether the references match, not anything about the underlying values. For example, arrays are by default coerced to strings by simply joining all the values with commas (,) in between. So two arrays with the same contents would not be == equal:

What is Webpack?

Webpack is a static module bundler for modern JavaScript applications. It builds a dependency graph that is responsible for bundling all your javascript modules into one regardless where they are located when one javascript file depends on each other.

Have you played around with the new CSS Flexbox or Grid specs?

Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.

What is the difference between span and div?

div is a block element span is inline element For bonus points, you could point out that it's illegal to place a block element inside an inline element, and that while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.

Given two strings, return true if they are anagrams of one another

var firstWord = "Mary"; var secondWord = "Army"; isAnagram(firstWord, secondWord); // true function isAnagram(first, second) { // For case insensitivity, change both words to lowercase. var a = first.toLowerCase(); var b = second.toLowerCase(); // Sort the strings, and join the resulting array to a string. Compare the results a = a.split("").sort().join(""); b = b.split("").sort().join(""); return a === b; }

Given a string, reverse each word in the sentence

var string = "Welcome to this Javascript Guide!"; // Output becomes !ediuG tpircsavaJ siht ot emocleW var reverseEntireSentence = reverseBySeparator(string, ""); // Output becomes emocleW ot siht tpircsavaJ !ediuG var reverseEachWord = reverseBySeparator(reverseEntireSentence, " "); function reverseBySeparator(string, separator) { return string.split(separator).reverse().join(separator); }