-
-
Save eshrinivasan/cb5dce322891c6c606c9cd5871296d0d to your computer and use it in GitHub Desktop.
| <h2> Javascript</h2> | |
| What are the differences between null and undefined? | |
| What are the differences between == and ===? | |
| What is reflow? What causes reflow? How could you reduce reflow? | |
| What is repaint and when does this happen? | |
| What does defer and async keyword does in a script tag? | |
| What is the difference between .call and .apply, .bind? | |
| Explain "this" in javascript | |
| Explain prototypal inheritance in javascript | |
| <h2> JQuery </h2> | |
| What is the difference between jQuery find and children? | |
| Is it possible to include multiple versions of jQuery on the same page? How | |
| do you avoid conflicts that may occur between jQuery vs other javascript libraries? | |
| Name some of the jQuery selectors? | |
| <h2> Angular </h2> | |
| List a few ways to improve performance in an AngularJS app. | |
| What is data binding in AngularJS? | |
| broadcast vs emit | |
| Difference between service and factory in AngularJS | |
| Explain what are directives ? Mention some of the most commonly used directives in AngularJS application ? |
What are the differences between null and undefined?
The undefined value is a primitive value used when a variable has not been assigned a value.
The null value is a primitive value that represents the null, empty, or non-existent reference.
null is a special value meaning "no value". null is a special object because typeof null returns 'object'.
What are the differences between == and ===?
JavaScript has both strict and type-converting equality comparison. For strict equality the objects being compared must have the same type and:
- Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
- Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another.
- Two Boolean operands are strictly equal if both are true or both are false.
- Two objects are strictly equal if they refer to the same Object.
- Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is false]
What does defer and async keyword does in a script tag?
defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.
async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
What is .call and .apply and what are the differences between them?
It is useful at times for one object to borrow the function of another object, meaning that the borrowing object simply executes the lent function as if it were its own.
The difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly. A useful mnemonic is "A for array and C for comma."
Explain "this" in javascript
The this keyword behaves differently in JavaScript compared to other language. In Object Oriented languages, the this keyword refers to the current instance of the class. In JavaScript the value of this is determined mostly by the invocation context of function (context.function()) and where it is called.
Explain prototypal inheritance in javascript
First, every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.
The second concept with prototype in JavaScript is the prototype attribute. Think of the prototype attribute as a characteristic of the object; this characteristic tells us the object’s “parent”. In simple terms: An object’s prototype attribute points to the object’s “parent”—the object it inherited its properties from. The prototype attribute is normally referred to as the prototype object, and it is set automatically when you create a new object.To expound on this: Every object inherits properties from some other object, and it is this other object that is the object’s prototype attribute or “parent.”
What is data binding in AngularJS?
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer.
Difference between service and factory in AngularJS
The Factory recipe gives the Injector a factory function that it calls when it needs to instantiate the service. When called, the factory function creates and returns the service instance. The dependencies of the Service are injected as the functions' arguments. So using this recipe adds the following abilities:
Ability to use other services (have dependencies)
Service initialization
Delayed/lazy initialization
The Service recipe is almost the same as the Factory recipe, but here the Injector invokes a constructor with the new operator instead of a factory function.
Explain what are directives ? Mention some of the most commonly used directives in AngularJS application ?
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
List a few ways to improve performance in an AngularJS app.
Minimize watchers
Use ng-if instead of ng-show if applicable
Disable debug info like so:
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
Enable strict di mode
Coding assessment
JS:
function to increment a counter
function that accepts a list and callback and calls the callback on every item
function that sums any number of arguments as well as array as input
function to create an object and add a method to the object
CSS:
divs with list of images and make it responsive
adding a click event to a list of ul/li and find out which li was clicked
Prep for UI Dev Interviewer technical questions:
Name some design patterns in javascript and explain one of them with examples
https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know
Difference between Angular 1 and 2?
The latest version of Angular 2 gives many advantages over AngularJS 1.x including better performance, lazy loading, simpler APIs, easier debugging and considerably more.
- AngularJS is two-way data-bound and has watchers listening to make that happen. Angular 2 is one-way data-bound and only is two-way data-bound with use of ngModel.
- AngularJS installs like most JS frameworks, and Angular 2 installs with a “batteries included” philosophy, giving you a hot-reloading server and a primed readiness for Observables to be used.
- AngularJS is a regular JavaScript framework. Angular 2 is in TypeScript.
- AngularJS is not as componentized as Angular 2. With Angular 2, you generally have a separate folder for every component with the HTML, CSS, and business logic all in there (can be separate files or all in one file).
broadcast vs emit in AngularJS
emit:The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.
broadcast:The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.
on: It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.
prototypal inheritance in angularjs
-
A child scope normally prototypically inherits from its parent scope, but not always. One exception to this rule is a directive with scope: { ... }
-
ng-repeat, ng-switch, ng-view, ng-include and ng-if create child scopes that does not inherit parent scope for primitives (e.g., number, string, boolean)
- create plnkr.co(or jsfiddle) to fetch the value of input field and display it in console.
- explain scope in javascript
https://github.com/angular/angular.js/wiki/Understanding-Scopes - hoisting in javascript and how it works
https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch4.md
JS Dev:
Coding challenges:
- Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5
- duplicate([1,2,3,4,5]);// [1,2,3,4,5,1,2,3,4,5]
- sort numbers in javascript(special case, requires callback function return a - b)
- max using apply in javascript
- [2, 5, 7] to [4, 10, 14] using array map
- [3, 5, 6], [5, 8] => output 5 in javascript
Understanding of concepts
- JSONP, cross origin issues
- Security issues in javascript
- function that executes only once
- memory leaks in javascript
- counter function using closures
- hoisting, closures
- call and apply usecases
- promises https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
https://www.quora.com/How-do-you-judge-a-JavaScript-programmer-by-only-5-questions
- I have an HTML table with five cells in it. Each cell has a button and a field. You do not have control over the HTML or naming conventions used for IDs, etc. Write an event handler that can be applied to each button which will call a function and write the result of that function to the field that is in the cell of the button that was clicked. Do not iterate over the cells of the table.
- Explain to me how OOP works in JavaScript. This is going to involve a conversation about prototype inheritance, closures, and lexical scoping.
- Give me an example of something that you would use a closure for - explain the closure you’ve written.
- Describe how you would develop a single-page application without using a framework (this one is more of a discussion and covers performance and the memory leaks Dean mentioned).
- JavaScript is a functional programming language. Give me an example of how you can use higher order functions in JavaScript to iterate over and apply a function to every element in an array. Do not use a for or while loop.
- I need to be able to store a DOM element so that it may, based on the results of a LATER event be moved from one container element to another. For example, I need to create a button which removes an LI from an OL or UL. The element needs to be stored during the current session so that - based on the result of ANOTHER event, I can then either attach it to the second container, move it back to the first container, or discard it. (I’m interested in their knowledge of scoping in the session.. if they recommend a global, I’ll say ok, if we don’t want to use a global variable what other options do we have? This is not an over difficult question, but it allows you to see how they think when the obvious answer isn’t the best choice).
A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.
Causes:
How to reduce reflow?
A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color.