├── CONTRIBUTING.md ├── .gitignore ├── answers ├── tricky │ ├── what-will-it-log.md │ ├── unary-operator.md │ ├── primitive-values.md │ ├── array-literal-vs-condensed.md │ └── import-statements-browser.md ├── general │ ├── double-equal-vs-triple-equal.md │ ├── javascript-type.md │ ├── encryption-vs-hashing.md │ ├── what-is-type-coercion.md │ ├── progressive-enhancement-graceful-degradation.md │ ├── call-apply-bind.md │ ├── what-is-a-closure.md │ ├── function-or-block-scope.md │ └── function-hoisting.md ├── bestpractices │ ├── what-is-currying.md │ ├── eval-dangerous.md │ ├── repaint-reflow.md │ └── tdd-spy-mock-stub.md ├── functional-asynch │ ├── what-is-a-thunk.md │ ├── what-is-a-callback.md │ └── event-loop.md └── es6 │ ├── temporal-dead-zone.md │ └── when-not-to-use-arrow-functions.md └── README.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ###OSX### 2 | 3 | .DS_Store -------------------------------------------------------------------------------- /answers/tricky/what-will-it-log.md: -------------------------------------------------------------------------------- 1 | # What is the value of `console.log(+'meow')`? Explain your answer. 2 | 3 | # What does `3 instanceof Number` evaluate to? True or false? Explain your answer. 4 | 5 | -------------------------------------------------------------------------------- /answers/tricky/unary-operator.md: -------------------------------------------------------------------------------- 1 | # What is the value of `console.log(+'meow')`? Explain your answer. 2 | 3 | This will log `NaN`. 4 | 5 | The operator `+` is known as the unary operator. When an element is prefixed by the unary operator, the JavaScript interpreter will try to convert that element into a number. If the conversion fails, this will result in `NaN`. 6 | 7 | Under the hood, the unary operator attempts to call `valueOf()` and `toString()` to convert the element into a number. 8 | 9 | 10 | For a deep dive on the unary operator and the conversion process for different types, I encourage you to read [The unary + operator](http://xkr.us/articles/javascript/unary-add/). -------------------------------------------------------------------------------- /answers/general/double-equal-vs-triple-equal.md: -------------------------------------------------------------------------------- 1 | # What is difference between '==' and '===' ? 2 | 3 | The biggest difference between '==' and '===' is [type coercion](what-is-type-coercion.md). When you use '===' the statement checks stricly and does not coerce into a different type any part of the statement. Consider the follow. 4 | 5 | ```javascript 6 | 1 === true // returns false as 1 is not stricly equal to true 7 | ``` 8 | 9 | However if you use '==' Javascript will attempt to type coerce. Observe below. 10 | 11 | ```javascript 12 | 1 == true // returns true as 1 is coerced into true 13 | ``` 14 | 15 | Using == is typically bad form since when you are comparing for equality you typically want strict equality. -------------------------------------------------------------------------------- /answers/bestpractices/what-is-currying.md: -------------------------------------------------------------------------------- 1 | # What is currying? What are some examples? 2 | 3 | Currying is an over powered method that lets you make thirteen three points in a single game. 4 | 5 | ## Seriously, what is currying? 6 | 7 | Currying is when you partial invoke a function, but not with all of it's argument with the purpose of returning it as function that can be supplied its missing arguments later. 8 | 9 | Consider the following. 10 | 11 | ```javascript 12 | // es6!! 13 | var add = (a, b) => { 14 | return a + b 15 | } 16 | 17 | // invoked add function partially with c and 2 18 | var add2 = (c) => { 19 | return add(c, 2) 20 | } 21 | 22 | // returns 6 23 | add2(4) 24 | ``` 25 | 26 | Currying lets you create library of easily configured functions and also helps with keeping code D.R.Y. -------------------------------------------------------------------------------- /answers/functional-asynch/what-is-a-thunk.md: -------------------------------------------------------------------------------- 1 | # What is a thunk in Javascript? 2 | 3 | A syncronous thunk is a function that has everything already needed to return a value, it does not require any arguments be passed in. In the case of an asynchronous thunk, it requires only a callback in order for it to return the value. 4 | 5 | Consider the following examples. 6 | 7 | ```javascript 8 | var str2arr = function(str) { 9 | return str.split('') 10 | } 11 | 12 | var thunkStr2arr = function() { 13 | return str2arr('hohoho') 14 | } 15 | 16 | thunkStr2arr() // returns [ 'h', 'o', 'h', 'o', 'h', 'o' ] 17 | 18 | 19 | var str2arrAsync = function(str, cb) { 20 | setTimeout(function() { 21 | cb(str.split('')) 22 | }, 1000) 23 | } 24 | 25 | var thunkStr2arrAsync = function(cb) { 26 | return str2arrAsync('hahaha', cb) 27 | } 28 | 29 | thunkStr2arrAsync(console.log) // returns [ 'h', 'a', 'h', 'a', 'h', 'a' ] 30 | ``` -------------------------------------------------------------------------------- /answers/general/javascript-type.md: -------------------------------------------------------------------------------- 1 | 2 | # Is Javascript static or dynamic? Is it strong or weak type? 3 | 4 | TLDR answer - Javascript is dynamic and weakly typed. 5 | 6 | ## Static vs Dynamic 7 | 8 | A staticly typed language is one in which the types are checked are compile time. This is opposed to dynamically typed languages where type is checked as run time. Additionally, most staticly typed languages require you to declare the type as part of the variable declaration process. 9 | 10 | ## Strong vs weak 11 | 12 | Related to static vs dynamic, strong vs weak related to if a pointer can be reassigned to a value of a different type. In the case of Javascript, this is possile. We are able to do somethin like below. 13 | 14 | ```Javascript 15 | var a = "string" 16 | a = 3 // this is allowed 17 | ``` 18 | 19 | Additionally, [type coercion](what-is-type-coercion.md) can occured because Javascript is weakly typed. If it were not, type coercion would not be possible. -------------------------------------------------------------------------------- /answers/tricky/primitive-values.md: -------------------------------------------------------------------------------- 1 | # What does `3 instanceof Number` evaluate to? True or false? Explain your answer. 2 | 3 | It will evaluate to `false`. 4 | 5 | Let's look at this in depth: 6 | 7 | ``` 8 | var num1 = 3; 9 | var num2 = new Number(3); 10 | 11 | console.log(num1 instanceof Number); // false 12 | console.log(3 instanceof Number); // false 13 | console.log(num2 instanceof Number); // true 14 | 15 | ``` 16 | 17 | What's the difference between `num1` and `num2`. In this case, num1 is a primitive or simple value. `num2` is a complex value. Let's log the type of each variable. 18 | 19 | ``` 20 | console.log(typeof num1); // "number" 21 | console.log(typeof num2); // "object" 22 | 23 | ``` 24 | 25 | So in the question, we use `instanceof` which is basically `Constructor.prototype.isPrototype(value)`. 26 | The number `3` is a primitive value and therefore not a product of the `Number` constructor call. 27 | 28 | For a deep dive on primitive types and reference types, I encourage you to read [Angus Croll's The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/). 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /answers/bestpractices/eval-dangerous.md: -------------------------------------------------------------------------------- 1 | # Why is eval() considered evil and dangerous? 2 | 3 | The `eval` function allows you to inject a string and evaluate it at any time. 4 | 5 | Let's look at this example: 6 | 7 | ``` 8 | var morning = "good morning"; 9 | 10 | function speak(greeting){ 11 | console.log(morning); 12 | } 13 | 14 | speak(morning); 15 | 16 | ``` 17 | 18 | This logs `good morning`. But what about this: 19 | 20 | ``` 21 | var greeting = "good morning"; 22 | 23 | function speak(str){ 24 | eval(str); 25 | console.log(greeting); 26 | } 27 | 28 | speak("var greeting = 'meow'"); 29 | 30 | ``` 31 | 32 | This will log `meow`. Meow... indeed. Since no local `greeting` variable was defined. We expected 33 | to access the global scope, instead, `eval` injected a new local variable into our scope. 34 | 35 | So how bad is this: 36 | 37 | * You leave your code vulnerable to malicious code injection 38 | * You slow down your code's performance 39 | 40 | To clarify, I wouldn't call it "evil", but I'd say it's dangerous and should be avoided in most cases. There are some unique scenarios 41 | where an eval is needed, but for 99% of your `eval` is not necessary. 42 | 43 | -------------------------------------------------------------------------------- /answers/bestpractices/repaint-reflow.md: -------------------------------------------------------------------------------- 1 | # What is meant by 'repaint and reflow'? How does it affect your application? 2 | 3 | Hello and welcome to the world of little known optimization techniques. Reflow and repaint are important concepts that most developers are not exposed to. 4 | 5 | Put simply, browser reflow is simply the process of re-calculating the positions of elements on a page. When you change a div's height, or the font, or set a property using the style attribute, the browser has to recalculate in order to re-render 6 | the webpage. 7 | 8 | What typically triggers reflow: 9 | 10 | * Resizing the window 11 | * Changing the font 12 | * Changing the font size 13 | * Animations of DOM elements 14 | * Adding/removing a stylesheet 15 | * Calculating offsetWidth or offsetHeight 16 | 17 | Reflow is an expensive process and should be avoided. Click [here](https://www.youtube.com/watch?v=ZHxbs5WEQzE) to watch an awesome video on how to minimize browser reflow. 18 | 19 | So what about repaint? Repaint happens when you change the element's apperance without any major changes. So that includes changing the color, background color, the border color or setting the 20 | `visibility:hidden`. 21 | 22 | From a performance standpoint, repaint is less expensive than reflow. 23 | 24 | -------------------------------------------------------------------------------- /answers/general/encryption-vs-hashing.md: -------------------------------------------------------------------------------- 1 | # What is the difference between encryption and hashing? 2 | 3 | The TLDR answer is that encryption is two way and hashing is only one way. 4 | 5 | Both are methods to securely transfer data, but there is some difference. 6 | 7 | ## Encryption is two way 8 | 9 | When we say encryption is two way, it means that something can be decrypted after it has been encrypted. This is the entire purpose of encryption. The idea is that you transfer encrypted information, and the receiever can then decrypt it and read the contents. 10 | 11 | ## Hashing is one way, can't be undone 12 | 13 | The concept between hashing is that it can't be undone. It is a one way operation, and there is no way to go from the hash to the original contents. While this may seem more secure, it does obviously come with a cost. 14 | 15 | If passing over hashed data, there is no way for the recipient to go back from the hashed data to the original data. This means the use case is a little more limited. Since the process of hashing is unique (given an input, always produces the same output & doesn't produce the same output for two different inputs) it means we can compare is the same iput is properly submitted again at a later date (like a password submissions?) but we can't identify what the password is. -------------------------------------------------------------------------------- /answers/tricky/array-literal-vs-condensed.md: -------------------------------------------------------------------------------- 1 | # What is the difference between an array literal vs a condensed array? 2 | 3 | Sometimes a trick question, but if they asked it they are probably fishing for something. 4 | 5 | First off, what does this all mean? 6 | 7 | ## Array literal 8 | 9 | An array literal is our usual way of declaring and array. 10 | 11 | ```javascript 12 | var a = [1, 2, 3] // a = [1, 2, 3] 13 | ```` 14 | 15 | # Condensed array 16 | 17 | A condensed array is instatiated using the Array constructor. 18 | 19 | ```javascript 20 | var b = new Array(1, 2, 3) // b = [1, 2, 3] 21 | ``` 22 | 23 | # No Difference? 24 | 25 | So in this case there is no difference. We've used both of them nicely and ended up with the same result. However the condensed array approach has a few other intricacies. 26 | 27 | Consider the following... 28 | 29 | ```javascript 30 | var c = new Array(10) // c = [ , , , , , , , , , ] 31 | ``` 32 | 33 | This can save some time if you want to create an arry with multiple undefined values. 34 | 35 | But it's not all good news. 36 | 37 | Consider the following... 38 | 39 | ```javascript 40 | var d = [4, 5, , 7, 8] // d = [4, 5, undefined, 7, 8] 41 | 42 | var e = new Array(4, 5, , 7, 8 ) // Syntax error 43 | ``` 44 | 45 | So, there is a difference depending on how you use it. 46 | -------------------------------------------------------------------------------- /answers/es6/temporal-dead-zone.md: -------------------------------------------------------------------------------- 1 | # What is the Temporal Dead Zone? 2 | 3 | To understand the concept of Temporal Dead Zone (TDZ), let's look at this familiar ES5 code: 4 | 5 | ``` 6 | console.log(language); 7 | var language = 'JavaScript'; 8 | 9 | ``` 10 | 11 | This will log `undefined`. 12 | 13 | In ES5, all variable declarations are processed before any code is executed. 14 | Known as `hoisting`, all `var` declarations appear to be moved to the top. In this example, the variable language 15 | is hoisted and declared, however; it has not been assigned the value of `JavaScript` yet. 16 | 17 | Now let's look at the same code using ES6 syntax: 18 | 19 | ``` 20 | console.log(language); 21 | let language = 'JavaScript'; 22 | 23 | ``` 24 | This will throw a `ReferenceError`. 25 | 26 | A common mistake is to assume that the `let/const` were not hoisted. The short answer is that `let/const` declarations are hoisted, but they will throw errors when you try to access them before a value is initialized. 27 | 28 | How will this affect your code? If you had `if-statements` checking if the variable is currently set to `undefined`, this will require your attention and a revision of the app's logic. 29 | 30 | For a deep dive on why `let/const` are different, I encourage you to read [Fabrício S. Matté's post on TDZ](http://jsrocks.org/2015/01/temporal-dead-zone-tdz-demystified/). 31 | 32 | -------------------------------------------------------------------------------- /answers/general/what-is-type-coercion.md: -------------------------------------------------------------------------------- 1 | # What is type coercion and when it is useful? 2 | 3 | Type coercion is when some data or object is coerced into a different type of object. 4 | 5 | For example, consider the following statement. 6 | 7 | ```javascript 8 | // returns true 9 | 1 == true 10 | ``` 11 | 12 | With double equals, 1 is coerce into being a boolean which results in true == true or a true statement. That was a simple example with double equals, but type coercion can be used in a number of useful ways. 13 | 14 | For example. 15 | 16 | ```javascript 17 | var a = 'hello' 18 | var b = 99 19 | 20 | // logs the string 'hello99' 21 | // in this case the number 99 is coerced into a string 22 | console.log(a + b) 23 | 24 | // another examples 25 | var object = 'apple' 26 | 27 | // object is coerced into true, so we log a statement 28 | if (object) { 29 | console.log('I have an ' + object) 30 | } 31 | ``` 32 | 33 | This can also get you into trouble. Consider the following. 34 | 35 | ```javascript 36 | // I have an array, I may not know how long it is 37 | var a = [0, 1, 2, 3] 38 | 39 | // I want to say if there is something at index 0 of a then do something 40 | // But a[0] is actually the number 0 when coerced is false 41 | // This if statement does nothing 42 | if (a[0]) { 43 | // do something 44 | } 45 | ``` 46 | 47 | Because coercion exists, it is important in Javascript to mindful of how may be indirectly using it. 48 | -------------------------------------------------------------------------------- /answers/functional-asynch/what-is-a-callback.md: -------------------------------------------------------------------------------- 1 | # What is a callback? 2 | 3 | In short, a callback is a function that is passed as an argument to another function. Consider the example below. 4 | 5 | ```javascript 6 | var a = [1, 2, 3] 7 | 8 | // console logs 1, 2, 3 9 | // not this does not return anything 10 | a.map(function(item) {console.log(item)}) 11 | ``` 12 | 13 | Observe that we are passing the function (in this case an anonymous function) as the argument to map. This function is the callback. 14 | 15 | ## Asynchronously 16 | 17 | More importantly, callbacks are regularly used with in asynchronous functions. This is a typical practice to extract some result when we are waiting for some action to come back before proceeding. A simple example exists below. 18 | 19 | ```javascripts 20 | 21 | var asyncExample = function(cb) { 22 | setTimeout(function() { 23 | cb() 24 | }, 5000) 25 | } 26 | 27 | var printSomething = function() {console.log('something')} 28 | 29 | asyncExample(printSomething) // console logs 'something' after 5000ms 30 | ``` 31 | 32 | This is especially common when dealing with ajax calls or reading/writing actions. 33 | 34 | ## Other notes 35 | 36 | The context of a function can and will change when passed in as a callback. With that said, it means if a function or method references 'this' it will be necessary to use call/apply when trying to invoke that function in a callback. 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /answers/tricky/import-statements-browser.md: -------------------------------------------------------------------------------- 1 | # Why is my import statement not working in the browser? 2 | 3 | Let's consider this code: 4 | 5 | ``` 6 | import React from 'react'; 7 | 8 | class HelloWorld extends React.Component { 9 | render() { 10 | return

Hello, world!

; 11 | } 12 | } 13 | export default HelloWorld; 14 | ``` 15 | We ran `npm install`, React is definitely included in our `package.json` and we're using Babel to transpile our code. Can you tell what's going wrong? Explain the bug and suggest a solution. 16 | 17 | Can you think of a reason? The answer is quite simple, you can't use `import/export` statements in the browser. 18 | 19 | Let's delve a bit deeper on why ES6 `import/export` statements don't work in the browser even though you're using Babel. 20 | A common mistake is to think Babel is enough to handle this issue. Babel simply transpiles our code from ES6 to ES5 syntax, so it can be compatible with all browsers. 21 | 22 | So in this case, `import/export` are transpiled by Babel to their CommonJS `require'/module.exports` equivalent. 23 | 24 | In order to run client-side `import` statements, you'll need to use tools like [Webpack](https://webpack.github.io/)or [Browserify](http://browserify.org/). 25 | 26 | You can also directly include the libraries/modules in your `index.html` 27 | 28 | ``` 29 | 30 | 31 | ``` 32 | 33 | -------------------------------------------------------------------------------- /answers/general/progressive-enhancement-graceful-degradation.md: -------------------------------------------------------------------------------- 1 | # What is the difference progressive enhancement vs graceful degradation? 2 | 3 | First off, you should provide an understand of the terms and what they mean/aim to achieve. Both progressive enhancement and graceful degradation refer to methods for handling a larger concept of accessibility. Specifically progressive enhancement and graceful degradation deal with the problem of technology and support. 4 | 5 | ## Progressive Enhancement 6 | 7 | Progressive enhancement is the concept of starting at a baseline for user experience for most browsers (usually covering 'old' browsers). Advanced features are then added when a browser is able to support them. In this scenario, we don't dumb down the experience to support older browsers. 8 | 9 | ## Graceful Degradation 10 | 11 | Graceful degradation taks the opposite approach. It builds the experience focused on 'modern' browsers thus able to provide a potentially more rich experience. It will then gracefully degrade this experience for old environments but still maintain basic functionality. 12 | 13 | For example, older version of Internet Explorer may not have a full featured experience but they would still have maintain the basic functionality. 14 | 15 | Often times this also means defining and conveying a browser support level. 16 | 17 | ## But same thing 18 | 19 | They ultimately are very similar things with just slightly different approaches, but it is important to understand these concepts. There is no absolute better of the two, but your interviewer may have opinions and you should be comfortable with talking about it. -------------------------------------------------------------------------------- /answers/general/call-apply-bind.md: -------------------------------------------------------------------------------- 1 | 2 | # What is the difference between call, apply, and bind ? 3 | 4 | At a very high level, call and apply execute a function immediately. Bind returns a new function. 5 | 6 | Call and apply are very similar in that they allow you to invoke a function. The difference is that call takes arguments one by one, apply takes in arguments as an array. Remember A for apply, A for array. Consider the following examples. 7 | 8 | ```javascript 9 | var john = { 10 | favoriteFood: 'pizza' 11 | } 12 | 13 | var bob = { 14 | favoriteFood: 'spaghetti' 15 | } 16 | 17 | var favFood = function(eatAction, afterEatAction) { 18 | console.log('It\'s time to ' + eatAction + ' ' + this.favoriteFood + '! Then ' + afterEatAction + '.') 19 | } 20 | 21 | bob.favFood('scarf down', 'sleep') 22 | // bob.favFood is not a function... 23 | // Results in error, favFood is not a method on bob 24 | // In order to user this method for bob, I need to use call or apply 25 | 26 | favFood.call(bob, 'scarf down', 'sleep') //It's time to scarf down spaghetti! Then sleep. 27 | 28 | favFood.apply(john, ['scarf down', 'sleep']) //It's time to scarf down pizza! Then sleep. 29 | 30 | favFood.call(john, ['scarf down', 'sleep']) //It's time to scarf down,sleep pizza! Then undefined. 31 | // Notice this is not what we want, but doesn't hard error out. 32 | // On the other hand... 33 | 34 | favFood.apply(bob, 'scarf down', 'sleep') //Uncaught TypeError... hard error 35 | ``` 36 | 37 | Bind is used to return a function that can invoke at a later time. 38 | 39 | ```javascript 40 | var eatThenSomething = favFood.bind(bob) 41 | eatThenSomething('gobble', 'nap') //It's time to gobble spaghetti! Then nap. 42 | ``` 43 | 44 | 45 | -------------------------------------------------------------------------------- /answers/bestpractices/tdd-spy-mock-stub.md: -------------------------------------------------------------------------------- 1 | # In TDD what is the difference between a spy, mock, and stub? 2 | 3 | ## What is TDD? 4 | 5 | First off, TDD stands for test driven development. At a very broad level, it means requiremetns are set up as specific test cases prior to actually code writing. The purpose of writing new code is to past the established test. 6 | 7 | [More info](https://en.wikipedia.org/wiki/Test-driven_development) 8 | 9 | ## So what is a spy, mock and/or stub? 10 | 11 | There is some vagueness to this question, but it's used as a basis if you've actually understand TDD at a deeper level. Most of the answers in this readme are based on usage with Sinon. Terminology/use may vary with a different testing framework. 12 | 13 | ### What's a spy? 14 | 15 | A spy is typically used to gather information about function calls. In essence, a spy can hijack a function and add additional properties that allow you observe other things about that function. For example, we can determine how many times a function was called and validate that against any expected behavior. It's possible we want to make sure an function for an AJAX call we implemented only runs once, we could use a spy to determine that. 16 | 17 | ### What's a stub? 18 | 19 | A stub is a function that replaces another function completely. Instead of only hijacking and adding properties, it completed replaces the function. Stubs are useful when you want to guarantee a specific response. For example, our AJAX call needs to get a specific response, but it's possible the endpoint is not up and running, in this case we could use a stub. 20 | 21 | ### What's a mock? 22 | 23 | Mocks are very similar to subs, but are primarily useful if you want to sub more than on function on a given object. Instead of replacing functions, you can mock an entire object. 24 | 25 | -------------------------------------------------------------------------------- /answers/general/what-is-a-closure.md: -------------------------------------------------------------------------------- 1 | # What is a closure? 2 | 3 | First, make sure to understand functional scope. Second, overall there seems to be a lack of consistency in regards to the definition of a closure so please be mindful when having intense conversations on this topic. 4 | 5 | A closure is a function that retains access to variables of the context it was created in even after said function call has returned. 6 | 7 | Typically after a function has returned, variables that were created inside the context of that function are no longer accessible. Consider the following. 8 | 9 | ```javascript 10 | var awFunc = function(first) { 11 | var someFunc = function(second) { 12 | return (first + second) 13 | } 14 | 15 | return someFunc('some') 16 | } 17 | 18 | var someNewFunc = awFunc('awe') // returns awesome 19 | someNewFunc() // Uncaught ReferenceError 20 | 21 | // Let's try to access the variables first and second 22 | first // Uncaught ReferenceError 23 | second // Uncaught ReferenceError 24 | 25 | ``` 26 | 27 | However we can refactor a little and come up with the following code 28 | 29 | ```javascript 30 | var awFunc = function(first) { 31 | var someFunc = function(second) { 32 | return (first + second) 33 | } 34 | 35 | return someFunc // notice function is not invoked 36 | } 37 | 38 | var someMoreFunc = awFunc('awe') // At this point awFunc has finished running 39 | 40 | // We can wait a long time right here if we want 41 | 42 | someMoreFunc('somer') // returns awesomer 43 | // I still have access to variables of awFunc even after it's finished running 44 | ``` 45 | 46 | So one obvious advantage is to allow for separation of concerns when writing code. This become extremely useful when considering asynchronous code. 47 | 48 | Related topic includes [currying](../bestpractices/what-is-currying.md). 49 | 50 | 51 | -------------------------------------------------------------------------------- /answers/es6/when-not-to-use-arrow-functions.md: -------------------------------------------------------------------------------- 1 | # Arrow functions are cool in ES6. When should you NOT use arrow functions. Name three or more cases. 2 | 3 | Arrow functions are neat but are not suitable for all use cases. For those who are ready to get rid of `function` and move on to arrow functions, it's time to examine a simple scenario where the arrow function would complicate your logic. 4 | 5 | ## Event Handlers 6 | 7 | Let's look at this example, we have a link on our page with an id of `myLink`. Every time you hover over this link, a CSS class `highlight` is toggled and the text is highlighted. 8 | 9 | ``` 10 | 11 | var myLink = document.getElementById('myLink'); 12 | 13 | myLink.addEventListener('mouseenter', function(){ 14 | this.classList.toggle('highlight'); 15 | console.log(this.classList); 16 | }); 17 | 18 | ``` 19 | This logs `highlight`. 20 | 21 | Using ES5 syntax, this works as expected. Now let's try that in ES6 using arrow functions: 22 | 23 | ``` 24 | const myLink = document.getElementById('myLink'); 25 | 26 | myLink.addEventListener('mouseenter', () => { 27 | this.classList.toggle('hightlight'); 28 | console.log(this.classList); 29 | }); 30 | 31 | ``` 32 | 33 | This logs `TypeError: Cannot read property 'classList' of undefined`. 34 | 35 | Womp womp. What's going on here? If you try to console log the value of this, 36 | you'll get `window`. The `window` does not have a `classList` and your event 37 | handler doesn't work as it should. 38 | 39 | For a deep dive on different scenarios, I encourage you to read [Wes Bos's post on When Not to Use an Arrow Function](http://wesbos.com/arrow-function-no-no/ 40 | ). 41 | 42 | If you're not sure whether an arrow function is appropriate, [Kyle Simpson](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md) provides us with this awesome chart: 43 | 44 | ![Arrow Functions Visual Aid](https://github.com/getify/You-Dont-Know-JS/raw/master/es6%20%26%20beyond/fig1.png) 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /answers/general/function-or-block-scope.md: -------------------------------------------------------------------------------- 1 | # Is JavaScript block-scoped or function scoped? 2 | 3 | Short answer - Javascript is function scoped. 4 | 5 | ## What is block-scoped? 6 | 7 | Block-scoped exists when a declared variable has inside a block of code (usually enclosed between curly backets) is only visible/accessible within that block of code. 8 | 9 | Consider the following. 10 | 11 | ```javascript 12 | var testFunc = function() { 13 | 14 | // printed it defined in the "for loop" block 15 | for (var n = 0; n < 10; n++) { 16 | var printed = n 17 | } 18 | 19 | // logging printed outside of block 20 | console.log(printed) 21 | } 22 | 23 | // logs 9 - printed is available outside of block 24 | testFunc() 25 | ``` 26 | 27 | Thus Javscript is function scoped. 28 | 29 | ## Or Not! It's a trick question!!! 30 | 31 | With the introduction of ES6, const and let has been introduced as ways to declare/assign variables. Consider the following. 32 | 33 | ```javascript 34 | var testFunc = function() { 35 | 36 | // var is defined in the this for loop block 37 | for (var n = 0; n < 10; n++) { 38 | // notice use of let 39 | let printed = n 40 | } 41 | 42 | // logging printed outside of block 43 | console.log(printed) 44 | } 45 | 46 | // logs printed is not defined 47 | testFunc() 48 | ``` 49 | 50 | Similarly 51 | 52 | ```javascript 53 | var testFunc = function() { 54 | 55 | // var is defined in the this for loop block 56 | for (var n = 0; n < 10; n++) { 57 | var printed = 1 58 | } 59 | 60 | // logging printed outside of block 61 | console.log(printed) 62 | } 63 | 64 | // logs 1 65 | testFunc() 66 | ``` 67 | 68 | And 69 | 70 | ```javascript 71 | var testFunc = function() { 72 | 73 | // var is defined in the this for loop block 74 | for (var n = 0; n < 10; n++) { 75 | // notice use of const 76 | const printed = 1 77 | } 78 | 79 | // logging printed outside of block 80 | console.log(printed) 81 | } 82 | 83 | // logs printed is not defined 84 | testFunc() 85 | ``` 86 | 87 | So Javascript also has block scoping. -------------------------------------------------------------------------------- /answers/general/function-hoisting.md: -------------------------------------------------------------------------------- 1 | # What is function hoisting? Provide some examples where it can be good or bad. 2 | 3 | Function (and also variable) hoisting is when a function (or variable) is available before it's actual declaration statement. 4 | 5 | Consider the following code. 6 | 7 | ```javascript 8 | // returns a is not defined - reference error 9 | console.log(a) 10 | ``` 11 | 12 | ```javascript 13 | // returns undefined 14 | console.log(a) 15 | var a = "hello" 16 | console.log(a) 17 | ```` 18 | 19 | Behind the scenes 'var a' is hoisted to the top. It is not declared, and so remains undefined, but no longer has a reference error. 20 | 21 | Similarly, if a function is declared via functional declaration (using the keyword function) it is hoisted to the top. (However since the syntax of function delcaration has no assignment, the body of the function is hoisted.) 22 | 23 | Compare variable vs function declaration. 24 | 25 | ```javascript 26 | // foo exists indepedently from bar 27 | var foo = 'bar' 28 | // functoin foo exists with bar - not separated 29 | function foo() { 30 | return 'bar' 31 | } 32 | ``` 33 | 34 | So in this case the function can be invoked before it's function declaration statement. Observe below. 35 | 36 | ```javascript 37 | // returns reference error - hard crash 38 | console.log(foo()) 39 | ``` 40 | 41 | ```javascript 42 | // returns 9 43 | console.log(foo()) 44 | function foo() { 45 | return 9 46 | } 47 | ``` 48 | 49 | This does not work for function expressions (assigning to a variable) 50 | 51 | ```javascript 52 | // returns foo is not a function 53 | console.log(foo()) 54 | var foo = function() { 55 | return 9 56 | } 57 | ``` 58 | 59 | It would seem functional declaration can save us in certain situation. 60 | 61 | However, depending on the scope it is possible to overwrite function that you may not intend to, resulting in chaos. See below. 62 | 63 | ```javascript 64 | for (var n = 0; n < 1; n++) { 65 | // I invote giveBack accidentally ahead of declaring it 66 | // Would expect it to return error 67 | // In fact returns 1 68 | console.log(giveBack()) 69 | var giveBack = function() { 70 | return 2 71 | } 72 | } 73 | 74 | // this get hoisted 75 | function giveBack() {return 1} 76 | ``` 77 | 78 | While the example is rather benign, it is easy to see how this may result in an ongoing error which is not detected 79 | 80 | 81 | -------------------------------------------------------------------------------- /answers/functional-asynch/event-loop.md: -------------------------------------------------------------------------------- 1 | # What is the event loop in Javascript? How does this differ/compare to some other languages? 2 | 3 | ## Understanding a bit how Javascript differs from some other languages. 4 | 5 | In order to understand the event loop in Javascript, it is good to understand the results first. Consider the following examples. 6 | 7 | ```javascript 8 | var eatBeforeSwim = function(callback) { 9 | setTimeout(callback, 1000) 10 | console.log('Time for a swim!') 11 | } 12 | 13 | var eatPizza = function() { 14 | console.log('I ate some pizza!') 15 | } 16 | 17 | eatBeforeSwim(eatPizza) 18 | // Logs 'Time for a swim!', after about 1000ms logs 'I ate some pizza!' 19 | ``` 20 | 21 | In Javascript, action that wait to return (such as setTimeout or AJAX calls, are non blocking). This means the code will continue to run while waiting for something to come back. This is often referred to as the asynchronous nature of Javascript. Compare this with a Ruby example below. 22 | 23 | ```ruby 24 | def eat_before_swim(some_action) 25 | sleep(1) 26 | puts (some_action) 27 | puts ('Time for a swim!') 28 | end 29 | 30 | eat_before_swim('I ate some pizza!') 31 | # After 1s logs 'I ate some pizza!', then logs 'Time for a swim! 32 | ``` 33 | 34 | While the code is not 100% equivalent, the concept to get across is that in Ruby the sleep action is blocking things from moving forward. Similar behavior is experienced with http requests. So the subsequent lines will not be evaluated and run until the previous line is complete. 35 | 36 | ## Event loop in Javascript 37 | 38 | Now that we understand Javascript is asynchronous, we can look at the event loop. In essence, the event loop is responsible for how this asynchronous behavior happens. Before going further it is important to understand a few additional points about Javascript. 39 | 40 | ### Javascript is single threaded 41 | 42 | This means Javascript will process each line of code after the previous line of code. We intentionally do not use the word run here. In order to evaluate when/how to run lines of code, Javascript keeps track of two things. 43 | 44 | ### Event Table (Hash) and Event Queue 45 | 46 | When the Javascript engine comes across a line of code that needs to be run, it places the 'trigger' of that execution and the action of it in an event table. Later on, when the engine checks the event table, any events that have transpired, the corresponding action is moved into an event queue. Later on, when the engine checks the event queue, if there is an event there to execute it will do so. After executing, it will check the event table again to see if any new events have transpired. 47 | 48 | Javascript is looping through this process over and over. (There may also be some additional processes but not part of the event loop discussion). 49 | 50 | ### Relating to callbacks 51 | 52 | In the case of a callback, when the initial function is invoke (let's say setTimeout), the trigger-action pair of '1000ms in the future' and callback are added to the event table. Later on, when the Javascript engine checks the event table and '1000ms in the future' has transpired, it will add the callback ot the event queue. 53 | 54 | In reality, the callback is executed the next time the Javascript engine checks the event queue. In fact it is possible this may not be right away, and so the actual timing of the callback being executed is not 1000ms. 55 | 56 | (Editor notes - needs picture probably) 57 | 58 | ## Closing notes 59 | 60 | This explanation is intentionally broad as to provide a basic understanding. If there is further curiosity on this topic, it's suggested the reader do a deep dive into the topic. However for more roles it's unlikely a super indepth knowledge will be a requirement. 61 | 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Job Interview Questions 2 | 3 | This repo contains a number of JavaScript interview questions that can be used for interview prep or when vetting potential candidates. 4 | 5 | Some suggested answers along with relevant resources are posted in the answers folder. You can also submit answers to questions as a contributor. 6 | 7 | ## Table of Contents 8 | 9 | 1. [General Questions](#general-questions) 10 | 1. [Architecture & Patterns](#architecture--patterns) 11 | 1. [Browser & DOM](#browser--dom) 12 | 1. [ES6](#es6) 13 | 1. [Functional & Asynchronous Programming](#functional--asynchronous-programming) 14 | 1. [Tricky Questions](#tricky-questions) 15 | 1. [Best Practices & Optimization](#best-practices--optimization) 16 | 1. [Algorithms & Data Structures](#algorithms--data-structures) 17 | 1. [CSS & UI](#css--ui) 18 | 1. [React & Redux](#react--redux) 19 | 1. [Angular](#angular) 20 | 1. [Angular2](#angular2) 21 | 22 | ## Getting Involved 23 | 24 | 1. [Contributors](#contributors) 25 | 26 | ### General Questions 27 | * [What is a closure?](answers/general/what-is-a-closure.md) 28 | * [Is JavaScript block-scoped or function scoped?](answers/general/function-or-block-scope.md) 29 | * [Is JavaScript a compiled or interpreted language?](answers/general/function-or-block-scope.md) 30 | * [What is function hoisting? Provide some examples where it can be good or bad.](answers/general/function-hoisting.md) 31 | * [What is type coercion and when is it useful or dangerous.](answers/general/what-is-type-coercion.md) 32 | * [What is the difference between == and ===.](answers/general/double-equal-vs-triple-equal.md) 33 | * [What is the difference between call, apply, and bind?](answers/general/call-apply-bind.md) 34 | * [What is the difference between encryption and hashing?](answers/general/encryption-vs-hashing.md) 35 | * [Is JavaScript static or dnyamic? Is it strongly or weakly type?](answers/general/javascript-type.md) 36 | * [What is the difference between progressive enhancement versus graceful degradation?](answers/general/progressive-enhancement-graceful-degradation.md) 37 | * [What is object serialization and deserialization. Give examples.]() 38 | * [Does JavaScript use mixins?]() 39 | * [What is tree shaking in JavaScript?]() 40 | * [What is reflection? Can you give examples of reflect methods you've used in the past?]() 41 | * [What is the V8 engine? Is the V8 engine written in JavaScript?]() 42 | * [CommonJS vs AMD vs ES2015, what are the differences and which one do you prefer and why?]() 43 | 44 | ### Architecture & Patterns 45 | * [What is fault tolerance? How can you improve your app's fault tolerance?]() 46 | 47 | ### Browser & DOM 48 | * [What are the differences between window and document in the browser?]() 49 | * [What is a host object? How is it different from a native object?]() 50 | * [What is the difference between event bubbling and event capturing?]() 51 | * [What is browser detection? How is it different from feature detection? Give examples of when you would use them.]() 52 | * [What is Shadow DOM?]() 53 | * [How is the DOM different from BOM in JavaScript?]() 54 | 55 | ### ES6 56 | * [What is the Temporal Dead Zone?](answers/es6/temporal-dead-zone.md) 57 | * [Arrow functions are cool in ES6. When should you NOT use arrow functions. Name three or more cases.](answers/es6/when-not-to-use-arrow-functions.md) 58 | * [What is a trampolined function? What is it used for? Will we still need this technique with ES6?]() 59 | * [What is a symbol in JavaScript? Is it a primitive? What's a typical use case for a symbol in ES6?]() 60 | * [What is the difference between Map and WeakMap in ES6?]() 61 | 62 | ### Functional & Asynchronous Programming 63 | * [What is a callback?](answers/functional-asynch/what-is-a-callback.md) 64 | * [What is a generator?]() 65 | * [What is a thunk in Javascript?](answers/functional-asynch/what-is-a-thunk.md) 66 | * [What is the event loop in Javascript? How does this differ/compare to some other languages?](answers/functional-asynch/event-loop.md) 67 | * [What is a race condition?]() 68 | * [Are there any differences between a thunk and a promise?]() 69 | 70 | ### Tricky Questions 71 | * [What is the value of `console.log(+'meow')`? Explain your answer.](answers/tricky/unary-operator.md) 72 | * [What does `3 instanceof Number` evaluate to? True or false? Explain your answer.](answers/tricky/primitive-values.md) 73 | * [Why is my import statement not working in the browser?](answers/tricky/import-statements-browser.md) 74 | * [What is the difference between an array literal and condensed arrays?](answers/tricky/array-literal-vs-condensed.md) 75 | * [What does it mean to "hydrate" an object in JavaScript?]() 76 | 77 | ### Best Practices & Optimization 78 | * [Why is eval() considered evil and dangerous?](answers/bestpractices/eval-dangerous.md) 79 | * [What is meant by 'repaint and reflow'? How does it affect your application?](answers/bestpractices/repaint-reflow.md) 80 | * [What is currying?](answers/bestpractices/what-is-currying.md) 81 | * [In TDD what is the difference between a spy, mock, and stub?](answers/bestpractices/tdd-spy-mock-stub.md) 82 | * [What's the difference between (visibility: hidden) and (display: none)? Which is better for your website's performance?]() 83 | * [What are memory leaks? What are the most common leaks in your JS code?]() 84 | * [What are the differences between graceful degradation and progressive enhancement? Can you give examples?]() 85 | 86 | ### Algorithms & Data Structures 87 | **Graphs, Trees and Binary Search Trees** 88 | * [How can you check if a tree is a binary tree?]() 89 | * [What is the difference between traversing a tree breadth first and depth first?]() 90 | 91 | ### CSS & UI 92 | * [Why do we use z-index in CSS?]() 93 | 94 | ### React & Redux 95 | * [What are React mixins? Give an example.]() 96 | * [What is a pub/sub pattern? Does Redux follow this pattern?]() 97 | 98 | #Contributors 99 | 100 | This repo is currently maintained by [AJ Zawawi](https://github.com/ajzawawi) 101 | 102 | Contributors: [Daniel Chang](https://github.com/dan-h-ch) 103 | --------------------------------------------------------------------------------