├── .DS_Store └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andyshora/front-end-interview-questions/HEAD/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Interview Questions for Front-end Developers 2 | ============================= 3 | 4 | How do you validate your markup and why? 5 | -------- 6 | W3C validator. 7 | 100% valid code is not always the goal, but it helps to write maintainable code. 8 | To ensure the code is rendered consistently cross-browser. 9 | 10 | Why use a Doctype? 11 | -------- 12 | A proper Doctype triggers standards mode in your browser. 13 | 14 | What is CDATA? 15 | -------- 16 | Used to be required to escape JavaScript in Doctypes prior to HTML5 in order to validate code. 17 | 18 | 19 | How do you waste time in JavaScript? 20 | -------- 21 | Redraw parts of the DOM, e.g. increase font-size in a loop. 22 | See http://www.bennadel.com/blog/2370-Overcoming-Asynchronous-Anxiety-By-Testing-JavaScript-s-Event-Loop.htm 23 | 24 | Explain hoisting in JavaScript 25 | -------- 26 | In JavaScript function declarations ( function foo() {} ) and variable declarations ( var bar ) are ‘hoisted’ i.e. are silently moved to the very top of the scope. 27 | 28 | Within its current scope, regardless of where a variable is declared, it will be, behind the scenes, hoisted to the top. However, only the declaration will be hoisted. If the variable is also initialized, the current value, at the top of the scope, will initially be set to undefined. 29 | 30 | ```javascript 31 | var myvar = 'my value'; 32 | (function() { 33 | alert(myvar); // undefined 34 | var myvar = 'local value'; // only the declararion of the variable (var myvar) was hoisted to the top of the scoope 35 | })(); 36 | ``` 37 | Above, the declaration was hoisted, but the initialization ( = 'local value') was not, resulting in an undefined error. 38 | 39 | 40 | What is the difference between var x = 1 and x = 1? 41 | -------- 42 | Novice JS programmers might have a basic answer about locals vs globals 43 | 44 | Intermediate JS guys should definitely have that answer, and should probably mention function-level scope 45 | 46 | "advanced" JS programmer should be prepared to talk about locals, implied globals (defined without var, assumed belongs to window DOM, problem if third-party script uses same var name and uses var, they can conflict), the window object, function-scope, declaration hoisting (if statements do not create new scope, only functions do), and . Furthermore, I'd love to hear about [[DontDelete]], hoisting precedence (parameters vs var vs function), and undefined. 47 | 48 | See 49 | http://sharkysoft.com/tutorials/jsa/content/031.html 50 | http://schalk-neethling.com/2011/07/quick-tip-the-problem-with-implied-globals-in-javascript/ 51 | http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting 52 | http://stackoverflow.com/questions/1484143/scope-chain-in-javascript 53 | 54 | Are objects passed by reference or by value? 55 | ----------- 56 | By reference. In JavaScript, all objects are passed by reference. When you make a change to a reference to an object, you change the actual object. Primitive types are passed by value. 57 | 58 | Is an Array an Object in JavaScript? 59 | ----------- 60 | Yes, Arrays inherit from Objects, and they have array-specific methods such as sort and length. 61 | 62 | Explain bit shifting in JavaScript 63 | ---------- 64 | Operands are treated as 32-bit integers. 65 | http://jsfiddle.net/andyshora/M4xAB/ 66 | ```javascript 67 | var temp; 68 | temp = 5 >> 1; // 101 -> 10 = 2 69 | temp = 8 >> 1; // 1000 -> 100 = 4 70 | temp = 10 >> 1; // 1010 -> 101 = 5 71 | // test 72 | document.write(temp); 73 | ``` 74 | 75 | What is the difference between using dot notation and bracket notation when accessing an object’s property? 76 | ----------- 77 | ```javascript 78 | val = ford.speed; // speed has to be a defined property 79 | 80 | val = ford['speed']; 81 | val = ford[ attr ]; // attr is a variable which may for example hold a string for the property name 82 | val = ford[ nextAttr() ]; // method call will return before accessing ford object 83 | ``` 84 | 85 | Why might a programmer have defined a variable with a capital letter? 86 | ----------- 87 | As a constructor for an Object. Instance names should be lower case. 88 | ```javascript 89 | // example 90 | 91 | var Car = new function(){ 92 | this.wheels = 4; 93 | } 94 | // instance of Car 95 | var ford = new Car(); 96 | ``` 97 | 98 | this and its scope 99 | ----------- 100 | ```javascript 101 | drink = 'soda'; //global variable 102 | 103 | var Foo = function(){ 104 | this.drink = 'beer'; //property of instance object 105 | console.log('Foo() -> ' + this.drink); 106 | }; 107 | 108 | function bar(){ 109 | console.log('bar() -> ' + this.drink); 110 | }; 111 | 112 | var qux = { 113 | drink: 'wine', // in the scope of qux, 'drink' = 'wine' 114 | getDrink: function(){ 115 | console.log('qux() -> ' + this.drink); 116 | } 117 | }; 118 | 119 | //now see how "this' differs in each case 120 | 121 | var baz = new Foo(); // Foo() -> beer 122 | bar(); // bar() -> soda 123 | qux.getDrink(); // qux() -> wine 124 | ``` 125 | 126 | 127 | What is a closure? 128 | -------- 129 | A closure is formed when you nest functions, inner functions can refer to the variables present in their outer enclosing functions even after their parent functions have already executed. 130 | 131 | What language is JavaScript based on? 132 | -------- 133 | ECMAScript = core language that JS is based on. 134 | 135 | 136 | What's the difference between a variable and a property? 137 | -------- 138 | var a = 'hello'; // variable 139 | You cant access variables with a . from the owner, you just need to know that they're there. 140 | 141 | Properties are the building blocks of objects. 142 | foo.bar 143 | 144 | They only appear interchangeable if the parent objects are the same 145 | 146 | 147 | Write a function to add arguments together 148 | --------- 149 | ```javascript 150 | function sum() { 151 | var i, l, result = 0; 152 | for (i = 0, l = arguments.length; i < l; i++) { 153 | result += parseInt(arguments[i]); 154 | } 155 | return result; 156 | } 157 | 158 | sum(1,2,3); // 6 159 | ``` 160 | And they should invoke it on your array like this (context for apply can be whatever, I usually use null in that case): 161 | ```javascript 162 | var data = [1,2,3]; 163 | sum.apply(null, data); // 6 164 | ``` 165 | 166 | Why use frameworks? 167 | --------- 168 | Good coders code, great coders reuse. Thousands of man hours have been poured into these libraries to abstract DOM capabilities away from browser specific implementations. There's no reason to go through all of the different browser DOM headaches yourself just to reinvent the fixes. 169 | 170 | Why use prototype to define methods instead of static methods? 171 | --------- 172 | You are extending the constructor function when you use prototype, so it will be available to all the object instances created with the new keyword, and the context within that function (the this keyword) will refer to the actual object instance where you call it. 173 | 174 | ```javascript 175 | // constructor function 176 | function MyClass () { 177 | var privateVariable; // private member only available within the constructor fn 178 | 179 | this.privilegedMethod = function () { // it can access private members 180 | //.. 181 | }; 182 | } 183 | 184 | // A 'static method', it's just like a normal function 185 | // it has no relation with any 'MyClass' object instance 186 | MyClass.staticMethod = function () {}; 187 | 188 | MyClass.prototype.publicMethod = function () { 189 | // the 'this' keyword refers to the object instance 190 | // you can access only 'privileged' and 'public' members 191 | }; 192 | 193 | var myObj = new MyClass(); // new object instance 194 | 195 | myObj.publicMethod(); 196 | MyClass.staticMethod(); 197 | ``` 198 | 199 | Public, private and privaledged members in JavaScript 200 | --------- 201 | ```javascript 202 | //Private 203 | 204 | // Constructor 205 | function Kid (name) { 206 | // Private 207 | var idol = "Paris Hilton"; 208 | } 209 | ``` 210 | 211 | You can delete or replace a privileged method, but you cannot alter its contents. 212 | ```javascript 213 | // Constructor 214 | function Kid (name) { 215 | // Private 216 | var idol = "Paris Hilton"; 217 | 218 | // Privileged 219 | this.getIdol = function () { 220 | return idol; 221 | }; 222 | } 223 | ``` 224 | 225 | A static member is shared by all instances of the class as well as the class itself (i.e. the Kid object), but it is only stored in one place. This means that its value is not inherited down to the object’s instances 226 | ```javascript 227 | // Constructor 228 | function Kid (name) { 229 | // Constructor code 230 | } 231 | 232 | // Static property 233 | Kid.town = "South Park"; 234 | 235 | 236 | // Public 237 | // Constructor 238 | function Kid (name) { 239 | // Public 240 | this.name = name; 241 | } 242 | Kid.prototype.getName = function () { 243 | return this.name; 244 | }; 245 | 246 | // ---------------------- all examples 247 | 248 | // Constructor 249 | function Kid (name) { 250 | // Private 251 | var idol = "Paris Hilton"; 252 | 253 | // Privileged 254 | this.getIdol = function () { 255 | return idol; 256 | }; 257 | 258 | // Public 259 | this.name = name; 260 | } 261 | 262 | // Public 263 | Kid.prototype.getName = function () { 264 | return this.name; 265 | }; 266 | 267 | // Static property 268 | Kid.town = "South Park"; 269 | 270 | // ---------------- usage 271 | 272 | // Create a new instance 273 | 274 | var cartman = new Kid("Cartman"); 275 | 276 | // Access private property 277 | cartman.idol; // undefined 278 | 279 | // Access privileged method 280 | cartman.getIdol(); // "Paris Hilton" 281 | 282 | // Access public property 283 | cartman.name; // "Cartman" 284 | 285 | // Access public method 286 | cartman.getName(); // "Cartman" 287 | 288 | // Access static property on an instance 289 | cartman.town; // undefined 290 | 291 | // Access static property on the constructor object 292 | Kid.town; // "South Park" 293 | ``` 294 | 295 | See http://robertnyman.com/2008/10/14/javascript-how-to-get-private-privileged-public-and-static-members-properties-and-methods/ 296 | 297 | What is Progressive Enhancement? 298 | ---------- 299 | Progressive Enhancement consists of the following core principles: 300 | 301 | basic content should be accessible to all browsers 302 | basic functionality should be accessible to all browsers 303 | sparse, semantic markup contains all content 304 | enhanced layout is provided by externally linked CSS 305 | enhanced behavior is provided by [[Unobtrusive JavaScript|unobtrusive]], externally linked JavaScript 306 | end user browser preferences are respected 307 | 308 | Can you describe the difference between progressive enhancement and graceful degradation? 309 | ---------- 310 | Describe feature detection. 311 | When features are not supported, maintain accessibility. 312 | Content should always be accessible, but user experience sacrificed for older browsers. Try to keep all functionality, and try to keep custom solutions compartmentalised where necessary, for example, in external files loaded for specific browsers. 313 | 314 | If you have 10 different stylesheets for a given design, how would you integrate them into the site? 315 | ---------- 316 | File concatenation and minification in the build process. 317 | Don't use @import as it results in an additional request. 318 | 319 | How would you reduce page load time/perceived load time? 320 | ---------- 321 | Reduce image sizes 322 | Use image sprites 323 | Image datauris inline for small things like avatars 324 | Concatenate assets 325 | Host assets on different hostnames 326 | Use CDN for assets 327 | Load content async and feedback loading state to user 328 | Minify scripts and stylesheets 329 | Page data 330 | Cache files 331 | 332 | 333 | What is FOUC? How do you avoid FOUC? 334 | ---------- 335 | http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content 336 | http://paulirish.com/2009/avoiding-the-fouc-v3/ 337 | 338 | 339 | What's a doctype do, and how many can you name? 340 | ---------- 341 | When you use a DOCTYPE declarations in your web pages, you are telling the web browser what version of (X)HTML your web page should be displayed in. The doctype gives the browser a list of supported tags and does not include any deprecated or proprietary tags in the list. You can get away with writing invalid or incorrect HTML code because most web browsers are amazingly forgiving. 342 | 343 | 344 | To define the language of a section of the document, add the lang attribute to the appropriate element, such as a div element: 345 | 346 | 347 | How do you serve a page with content in multiple languages? 348 | ---------- 349 | ```html 350 |
351 | Canadian French content... 352 |
353 |
354 | Canadian English content... 355 |
356 | ``` 357 | 358 | Probably use a CMS to serve up different content, but same styles. 359 | 360 | What are data- attributes good for? 361 | --------- 362 | Storing data in the DOM 363 | 364 | What's the difference between Java and JavaScript? 365 | --------- 366 | Here are some differences between the two languages: 367 | 368 | Java is an OOP programming language while Java Script is an OOP scripting language. 369 | Java creates applications that run in a virtual machine or browser while JavaScript code is run on a browser only. 370 | Java code needs to be compiled while JavaScript code are all in text. 371 | 372 | Java is a statically typed language; JavaScript is dynamic. 373 | Java is class-based; JavaScript is prototype-based. 374 | Java constructors are special functions that can only be called at object creation; JavaScript "constructors" are just standard functions. 375 | Java requires all non-block statements to end with a semicolon; JavaScript inserts semicolons at the ends of certain lines. 376 | Java uses block-based scoping; JavaScript uses function-based scoping. 377 | Java has an implicit this scope for non-static methods, and implicit class scope; 378 | JavaScript has implicit global scope. 379 | 380 | Here are some features that I think are particular strengths of JavaScript: 381 | 382 | JavaScript supports closures; Java can simulate sort-of "closures" using anonymous classes. (Real closures may be supported in a future version of Java.) 383 | All JavaScript functions are variadic; Java functions are only variadic if explicitly marked. 384 | JavaScript prototypes can be redefined at runtime, and has immediate effect for all referring objects. Java classes cannot be redefined in a way that affects any existing object instances. 385 | JavaScript allows methods in an object to be redefined independently of its prototype (think eigenclasses in Ruby, but on steroids); methods in a Java object are tied to its class, and cannot be redefined at runtime. 386 | 387 | 388 | How would you optimize a websites assets/resources? 389 | --------- 390 | File concatenation 391 | File minification 392 | CDN Hosted 393 | Caching 394 | etc. 395 | 396 | Why is it better to serve site assets from multiple domains? 397 | --------- 398 | Browsers restrict simultaneous downloads per domain, so you can just add different A records to point to the same location if you like, or create different buckets on a blob storage account. 399 | 400 | 401 | 402 | 403 | Advantages of LESS http://tympanus.net/codrops/2012/01/27/modular-front-end-development-with-less/ 404 | --------- 405 | Variables. Define any variable like so: @color1: #df0290;and use it later in your code: 406 | Mixins.Define useful functions with or without parameters 407 | Nested rules.Pretty self-explanatory, as I’m sure this is something you’ve been wishing for in CSS since you started using it 408 | 409 | What does & stand for in LESS? 410 | ----------- 411 | An ampersand (&) refers to the parent rule. So &.category would translate to article h2.category once the LESS code had been compiled. 412 | 413 | How would you organize a LESS library for a large project? 414 | ----------- 415 | /project/css/ 416 | - reset.css — resets default browser styling 417 | - grid.less — supplies mixins for a grid system, such as the .col(@width) mixin above 418 | - type.less — supplies mixins for font styling as well as @font-face rules 419 | - colorscheme.less — LESS variables for the design’s various colors 420 | - interface.less — mixins for interface features like buttons, forms, and dialogs 421 | - layout.less — design-specific layout of the site 422 | - style.less — the main stylesheet, including all of the above and adding in whatever site-specific styles are otherwise necessary 423 | 424 | Example LESS template - colorscheme.less 425 | ------------ 426 | ```css 427 | @background: #ffffff; 428 | @textcolor: #252525; 429 | @textcolor-strong: #090909; 430 | @textcolor-em: #666666; 431 | @textcolor-blockquote: #aaaaaa; 432 | 433 | @accent1: #2d9681; 434 | @accent2: #f8a34b; 435 | 436 | @warning: #d4230f; 437 | ``` 438 | 439 | CSS3 Advantages with LESS 440 | ----------- 441 | Long repetitive CSS3 code such as gradients, keyframe animations, can all be simplified with Mixins, taking in for example keyframe durations, percentages, animation and easing types as parameters. For gradients, start and stop colours, and blending positions can be controlled with variables. 442 | 443 | How does the content model differ in HTML4/5? http://www.w3.org/TR/html5-diff/#content-model 444 | ------------ 445 | Content model is what defines how elements may be nested — what is allowed as children (or descendants) of a certain element. 446 | 447 | At a high level, HTML4 had two major categories of elements, "inline" (e.g. span, img, text), and "block-level" (e.g. div, hr, table). Some elements did not fit in either category. 448 | 449 | Some elements allowed "inline" elements (e.g. p), some allowed "block-level" elements (e.g. body), some allowed both (e.g. div), while other elements did not allow either category but only allowed other specific elements (e.g. dl, table), or did now allow any children at all (e.g. link, img, hr). 450 | 451 | Notice the difference between an element itself being in a certain category, and having a content model of a certain category. For instance, the p element is itself a "block-level" element, but has a content model of "inline". 452 | 453 | To make it more confusing, HTML4 had different content model rules in its Strict, Transitional and Frameset flavors. For instance, in Strict, the body element allowed only "block-level" elements, but in Transitional, it allowed both "inline" and "block-level". 454 | 455 | To make things more confusing still, CSS uses the terms "block-level element" and "inline-level element" for its visual formatting model, which is related to CSS's 'display' property and has nothing to do with HTML's content model rules. 456 | 457 | HTML5 does not use the terms "block-level" or "inline" as part of its content model rules, to reduce confusion with CSS. However, it has more categories than HTML4, and an element can be part of none of them, one of them, or several of them. 458 | 459 | Function.prototype.bind 460 | ---------- 461 | 462 | 463 | Can you explain how inheritance works in JavaScript? 464 | ---------- 465 | Explain how scope works. 466 | 467 | Then show how objects can inherit properties: 468 | http://jsfiddle.net/andyshora/nvcZE/ 469 | ```javascript 470 | (function() { 471 | var genericObject = { 472 | bar : "Hello World", 473 | get_bar : function() { 474 | return this.bar; 475 | } 476 | }; 477 | var customObject = Object.create(genericObject); 478 | customObject.bar = "Aloha folks!"; 479 | document.write(customObject.get_bar() + '
'); //outputs: "Aloha folks" 480 | delete customObject.bar; 481 | document.write(customObject.get_bar()); //fallbacks to the prototype's value, outputs: "Hello World" 482 | })(); 483 | ``` 484 | 485 | When would you use document.write()? 486 | ---------- 487 | When messing around on jsfiddle or debugging code perhaps! 488 | 489 | 490 | Challenges 491 | ---------- 492 | 1. Write a function to reverse a string 493 | http://jsfiddle.net/andyshora/8zby5/ 494 | ```javascript 495 | // a function to reverse a string 496 | function reverseString(str){ 497 | if (str===undefined) return false; 498 | if (str.length < 2) return str; 499 | 500 | return str.split('').reverse().join(''); 501 | } 502 | document.write(reverseString("hello")); 503 | ``` 504 | 2. Implement a function to detect palindromes. 505 | http://jsfiddle.net/andyshora/WN2Bv/ 506 | ```javascript 507 | // function to detect palindromes 508 | function isPalindrome(str){ 509 | if (typeof str!=='string') return false; 510 | if (!str.length) return false; 511 | 512 | var len = str.length; 513 | var arr = str.split(''); // split string into array 514 | var breakAt = Math.floor(len/2); 515 | 516 | for (var i=0; i'); 544 | document.write(calcSquareRoot(226)); // false 545 | document.write('
'); 546 | document.write(calcSquareRoot(-1)); // false 547 | document.write('
'); 548 | document.write(calcSquareRoot(1)); // 1 549 | document.write('
'); 550 | document.write(calcSquareRoot('2')); // false 551 | document.write('
'); 552 | document.write(calcSquareRoot(4)); // 2 553 | ``` 554 | 555 | 5. Sort and concat arrays in a optimal way 556 | 6. Guess the two missing numbers in a array with n - 2 length containing 1..n unsorted numbers --------------------------------------------------------------------------------