- Bind: https://gist.github.com/harishekhar/1eded01d275e2dd9b089f2886ff9d9df
- Reduce: https://gist.github.com/harishekhar/80425b082e99fb2aa6270d436e8bbeaa
- Filter: https://gist.github.com/harishekhar/f782ecc4c33898579652919cd50b28d1
- Map: https://gist.github.com/harishekhar/19272c865ccdce8359d20579678c1f4d
- Some: https://gist.github.com/harishekhar/355acf3c8e5847c7057a78d3d22c8d1b
- Every: https://gist.github.com/harishekhar/a3c9be0ead9f0b20cae268709c32e8ed
- Object.assign: <>
- Promise: https://brunoscopelliti.com/lets-write-a-promise-polyfill/
- Debounce: https://davidwalsh.name/javascript-debounce-function
- Throttle: https://css-tricks.com/debouncing-throttling-explained-examples/
- Memomize: https://www.freecodecamp.org/news/understanding-memoize-in-javascript-51d07d19430e/
- Object Deep Clone: https://gist.github.com/harishekhar/28247be45237a592cdfd7e858b92372d
- Singleton:
- Prototype:
- Pub/Sub:
- Mixin:
- Revealing module pattern:
- Carousel: https://codepen.io/shekhardtu/pen/eobMVW?editors=1010
- Auto-complete/Auto Suggest,
- Game timer
- Splitwise
- Lazy loading
- Modal/Popup
- facebook like/comment module and reply to comment
- Autosuggest multiple tags: https://codepen.io/shekhardtu/pen/ymzXgv
- Progress bar: https://codepen.io/shekhardtu/pen/ROEJyx?editors=0010
var temp = curry(avg, 1, 2, 3);
temp(10); //4 - stores 1, 2, 3 in closures and adds 10 for average
temp(1, 2); //1.8 - stores 1, 2, 3 in closures and add 1, 2 for average
//Average function:
var avg = function (...param) {
var sum = 0;
for(var i = 0; i < param.length; i++) {
sum += param[i];
}
return param.length > 0 ? sum / param.length : 0;
}
var curry = function (fn, ...m) {
return function (...n) {
return fn.apply(this, m.concat(n));
}
}
9. Difference between classical and prototype inheritence? If you design a language, which one will you choose?
Can I change obj.a and why can I change it if const means that variable cannot be reassigned or re-declared?
13. Object.freeze and Object.seal. Another way of asking is, how will you prevent object property value to be updated or added?
15. In what order will the numbers 1-4 be logged to the console when the code below is executed? Why?
(function() {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
})();
var a={},
b={key:'b'},
c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);
http://stackoverflow.com/questions/22248432/calculate-depth-of-unordered-list
21. Write a function to get factorial and cache the result. If it's called next time, return from cache.
a. How can you improve the performance of factorial using memoization?
b. How can you improve memoization approach since it takes more space?
c. We can ask which one is better recursive or iterative version of factorial?
25. What is Cross-site request forgery(CSRF) and How will you save site from Cross-site request forgery?
a. https://www.freecodecamp.org/news/a-quick-introduction-to-web-security-f90beaf4dd41/
X = [1,2]
X.push(X)
console.log(X)
var a = '1';
var b = 'c';
console.log(a + b); //1c
console.log(a - b); //NaN
console.log(a * b); //NaN
console.log(a / b); //NaN
var a = 1;
var b = '2';
console.log(a + b); //12
console.log(a - b); //-1
console.log(a * b); //2
console.log(a / b); //.5
//Primitive type (string, number, etc.) are passed by value and objects are passed by reference
31. What is the output of following? What is the reason for output, how many closures are created in following example?
for(var i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000*i);
}
Fix:
for(var i = 1; i <= 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 1000*i);
})(i);
}
(function() {
x = 1;
function x() {};
var x;
console.log('var x => ', x);
})()
hositing order => funtion definition -> variable declaration
function A() {}
// Static
A.getSmth = function() {
return 1;
}
// Public
A.prototype.getAnother = function() {
return 2;
}
var a = new A();
try {
console.log(a.getSmth());
} catch(e) {
console.log('a.getSmth() TypeError => ', e.constructor.name);
}
var head = {};
var newNode = {};
head.next = newNode;
newNode.next = head;
head = null;
console.log('newNode.next => ', newNode.next);
36. How to handle images in responsive website - srcset, sizes, base64, blurring effect using canvas etc.
function getVolume(l, h, w) {
console.log('voulume: ' + (l * h * w));
}
function curryFun(fn) {
var arrLength = fn.length;
return (function repeat() {
var mem = [].slice.apply(arguments);
return function() {
var next = mem.concat([].slice.apply(arguments));
return next.length >= arrLength ? fn.apply(null, next) : repeat.apply(null, next);
}
}());
}
var curry = curryFun(getVolume);
curry(2)(3)(4);
float (clear etc., effect of display: block),
position, overflow-hidden: what it does,
Ways to align the item center,
flex box, grid layout, box-shadow
49. CSS Interview questions: https://css-tricks.com/interview-questions-css/
function curry(fn) {
if(fn.length === 0) {
return fn.apply();
}
function nest(N, args) {
return function() {
var arg = [].slice.apply(arguments);
if(N - arg.length <= 0) {
return fn.apply(null, args.concat(arg));
}
args = args.concat(arg);
return nest(N - args.length, args);
}
}
return nest(fn.length, []);
}
var sum = function (x, y, z) {
return x + y + z;
}
var result = curry(sum);
console.log(result(1)(2)(3));
console.log(result(1, 2)(3));
console.log(result(1)(2, 3));
https://medium.freecodecamp.org/understanding-memoize-in-javascript-51d07d19430e
https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css
57. Middelware design pattern: https://gist.github.com/darrenscerri/5c3b3dcbe4d370435cfa
- add(1)(2)(3);
- add(1)(2,3)(4)(5,6,7);
- add(2,3,4,5)(1)();
- add(20)(10)(10).toValue();
- Solution: https://gist.github.com/harishekhar/b7f3e618f2fd225e1a3a6d9d19f8c708>
- https://dev.to/aershov24/top-26-javascript-interview-questions-i-wish-i-knew-26k1
- https://dev.to/adyngom/28-relevant-javascript-interview-questions-part-i-the-first-4-2a16
- https://dev.to/adyngom/4-more-relevant-javascript-questions-to-help-fix-the-broken-coding-interview-3b8k
- https://www.freecodecamp.org/news/cracking-the-front-end-interview-9a34cd46237/