diff --git a/data/questions.json b/data/questions.json index 039fe908..3a46b875 100644 --- a/data/questions.json +++ b/data/questions.json @@ -2,27 +2,29 @@ { "name": "bem.md", "question": "What is CSS BEM?", - "answer": "The BEM methodology is another naming convention for CSS classes. The BEM stands for Block, Element, Modifier which is an explanation for its structure. Block is a standalone component that is reusable across projects. Elements and modifiers are part of the block with no standalone meaning. Here is the example of the typical syntax:\n\n```css\n/* block component */\n.block {}\n\n/* element */\n.block__element {}\n\n/* modifier */\n.block__element--modifier {}\n```", + "answer": "The BEM methodology is another naming convention for CSS classes. The BEM stands for Block, Element, Modifier which is an explanation for its structure. Block is a standalone component that is reusable across projects. Elements and modifiers are part of the block with no standalone meaning. Here is the example of the typical syntax:\n\n```css\n/* block component */\n.block {\n}\n\n/* element */\n.block__element {\n}\n\n/* modifier */\n.block__element--modifier {\n}\n```", "goodToHear": [ "Block is a top-level abstraction of a new component", "Elements make no sense to be alone - they are tightly dependent on blocks", "Modifier is a flag added to block or element so it makes them a bit more specific" ], "links": [ - "[Writing clean and maintainable CSS](https://hackernoon.com/writing-clean-and-maintainable-css-using-bem-methodology-1dcbf810a664)" + "[Writing clean and maintainable CSS](https://hackernoon.com/writing-clean-and-maintainable-css-using-bem-methodology-1dcbf810a664)", + "" ], - "categories": [ + "tags": [ "css" ], + "expertise": "junior", "questionCodeBlocks": [], "answerCodeBlocks": [ - "```css\n/* block component */\n.block {}\n\n/* element */\n.block__element {}\n\n/* modifier */\n.block__element--modifier {}\n```" + "```css\n/* block component */\n.block {\n}\n\n/* element */\n.block__element {\n}\n\n/* modifier */\n.block__element--modifier {\n}\n```" ] }, { "name": "clone-object.md", "question": "How do you clone an object in JavaScript?", - "answer": "Using the object spread operator `...`, the object's own enumerable properties can be copied\ninto the new object. This creates a shallow clone of the object.\n\n```js\nconst obj = { a: 1, b: 2 };\nconst shallowClone = { ...obj };\n```\n\nWith this technique, prototypes are ignored. In addition, nested objects are not cloned, but rather their references get copied, so nested objects still refer to the same objects as the original. Deep-cloning is much more complex in order to effectively clone any type of object (Date, RegExp, Function, Set, etc) that may be nested within the object.\n\nOther alternatives include:\n\n* `JSON.parse(JSON.stringify(obj))` can be used to deep-clone a simple object, but it is CPU-intensive and only accepts valid JSON (therefore it strips functions and does not allow circular references).\n* `Object.assign({}, obj)` is another alternative.\n* `Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {})` is another more verbose alternative that shows the concept in greater depth.", + "answer": "Using the object spread operator `...`, the object's own enumerable properties can be copied\ninto the new object. This creates a shallow clone of the object.\n\n```js\nconst obj = { a: 1, b: 2 }\nconst shallowClone = { ...obj }\n```\n\nWith this technique, prototypes are ignored. In addition, nested objects are not cloned, but rather their references get copied, so nested objects still refer to the same objects as the original. Deep-cloning is much more complex in order to effectively clone any type of object (Date, RegExp, Function, Set, etc) that may be nested within the object.\n\nOther alternatives include:\n\n* `JSON.parse(JSON.stringify(obj))` can be used to deep-clone a simple object, but it is CPU-intensive and only accepts valid JSON (therefore it strips functions and does not allow circular references).\n* `Object.assign({}, obj)` is another alternative.\n* `Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {})` is another more verbose alternative that shows the concept in greater depth.", "goodToHear": [ "JavaScript passes objects by reference, meaning that nested objects get their references copied, instead of their values.", "The same method can be used to merge two objects." @@ -30,14 +32,16 @@ "links": [ "", "[MDN docs for Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)", - "[Clone an object in vanilla JS](http://voidcanvas.com/clone-an-object-in-vanilla-js-in-depth/)" + "[Clone an object in vanilla JS](http://voidcanvas.com/clone-an-object-in-vanilla-js-in-depth/)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [ - "```js\nconst obj = { a: 1, b: 2 };\nconst shallowClone = { ...obj };\n```" + "```js\nconst obj = { a: 1, b: 2 }\nconst shallowClone = { ...obj }\n```" ] }, { @@ -52,32 +56,36 @@ "links": [ "[MDN docs for closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)", "[What is a closure](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)", - "[I never understood JavaScript closures](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)" + "[I never understood JavaScript closures](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "senior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, { "name": "comparing-objects.md", "question": "How do you compare two objects in JavaScript?", - "answer": "Even though two different objects can have the same properties with equal values, they are not considered equal when compared using `==` or `===`. This is because they are being compared by their reference (location in memory), unlike primitive values which are compared by value.\n\nIn order to test if two objects are equal in structure, a helper function is required. It will\niterate through the own properties of each object to test if they have the same values, including nested objects.\nOptionally, the prototypes of the objects may also be tested for equivalence by passing `true` as the 3rd argument.\n\nNote: this technique does not attempt to test equivalence of data structures other than\nplain objects, arrays, functions, dates and primitive values.\n\n```js\nfunction isDeepEqual(obj1, obj2, testPrototypes = false) {\n if (obj1 === obj2) {\n return true;\n }\n\n if (typeof obj1 === \"function\" && typeof obj2 === \"function\") {\n return obj1.toString() === obj2.toString();\n }\n\n if (obj1 instanceof Date && obj2 instanceof Date) {\n return obj1.getTime() === obj2.getTime();\n }\n\n const prototypesAreEqual = testPrototypes\n ? isDeepEqual(\n Object.getPrototypeOf(obj1),\n Object.getPrototypeOf(obj2),\n true\n )\n : true;\n\n const obj1Props = Object.getOwnPropertyNames(obj1);\n const obj2Props = Object.getOwnPropertyNames(obj2);\n\n return (\n obj1Props.length === obj2Props.length &&\n prototypesAreEqual &&\n obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))\n );\n}\n```", + "answer": "Even though two different objects can have the same properties with equal values, they are not considered equal when compared using `==` or `===`. This is because they are being compared by their reference (location in memory), unlike primitive values which are compared by value.\n\nIn order to test if two objects are equal in structure, a helper function is required. It will\niterate through the own properties of each object to test if they have the same values, including nested objects.\nOptionally, the prototypes of the objects may also be tested for equivalence by passing `true` as the 3rd argument.\n\nNote: this technique does not attempt to test equivalence of data structures other than\nplain objects, arrays, functions, dates and primitive values.\n\n```js\nfunction isDeepEqual(obj1, obj2, testPrototypes = false) {\n if (obj1 === obj2) {\n return true\n }\n\n if (typeof obj1 === \"function\" && typeof obj2 === \"function\") {\n return obj1.toString() === obj2.toString()\n }\n\n if (obj1 instanceof Date && obj2 instanceof Date) {\n return obj1.getTime() === obj2.getTime()\n }\n\n const prototypesAreEqual = testPrototypes\n ? isDeepEqual(\n Object.getPrototypeOf(obj1),\n Object.getPrototypeOf(obj2),\n true\n )\n : true\n\n const obj1Props = Object.getOwnPropertyNames(obj1)\n const obj2Props = Object.getOwnPropertyNames(obj2)\n\n return (\n obj1Props.length === obj2Props.length &&\n prototypesAreEqual &&\n obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))\n )\n}\n```", "goodToHear": [ "Primitives like strings and numbers are compared by their value", "Objects on the other hand are compared by their reference (location in memory)" ], "links": [ "[Object Equality in JavaScript](http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html)", - "[Deep comparison between two values](https://30secondsofcode.org/object#equals)" + "[Deep comparison between two values](https://30secondsofcode.org/object#equals)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [ - "```js\nfunction isDeepEqual(obj1, obj2, testPrototypes = false) {\n if (obj1 === obj2) {\n return true;\n }\n\n if (typeof obj1 === \"function\" && typeof obj2 === \"function\") {\n return obj1.toString() === obj2.toString();\n }\n\n if (obj1 instanceof Date && obj2 instanceof Date) {\n return obj1.getTime() === obj2.getTime();\n }\n\n const prototypesAreEqual = testPrototypes\n ? isDeepEqual(\n Object.getPrototypeOf(obj1),\n Object.getPrototypeOf(obj2),\n true\n )\n : true;\n\n const obj1Props = Object.getOwnPropertyNames(obj1);\n const obj2Props = Object.getOwnPropertyNames(obj2);\n\n return (\n obj1Props.length === obj2Props.length &&\n prototypesAreEqual &&\n obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))\n );\n}\n```" + "```js\nfunction isDeepEqual(obj1, obj2, testPrototypes = false) {\n if (obj1 === obj2) {\n return true\n }\n\n if (typeof obj1 === \"function\" && typeof obj2 === \"function\") {\n return obj1.toString() === obj2.toString()\n }\n\n if (obj1 instanceof Date && obj2 instanceof Date) {\n return obj1.getTime() === obj2.getTime()\n }\n\n const prototypesAreEqual = testPrototypes\n ? isDeepEqual(\n Object.getPrototypeOf(obj1),\n Object.getPrototypeOf(obj2),\n true\n )\n : true\n\n const obj1Props = Object.getOwnPropertyNames(obj1)\n const obj2Props = Object.getOwnPropertyNames(obj2)\n\n return (\n obj1Props.length === obj2Props.length &&\n prototypesAreEqual &&\n obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))\n )\n}\n```" ] }, { @@ -89,11 +97,13 @@ "Some disadvantages of using CSS preprocessors (setup, re-compilation time can be slow etc.)" ], "links": [ - "[CSS Preprocessors](https://medium.com/@garyfagan/css-preprocessors-6f226fa16f27)" + "[CSS Preprocessors](https://medium.com/@garyfagan/css-preprocessors-6f226fa16f27)", + "" ], - "categories": [ + "tags": [ "css" ], + "expertise": "junior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -107,28 +117,32 @@ ], "links": [ "[MDN docs on Events and Handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers)", - "[Understanding Node.js event-driven architecture](https://medium.freecodecamp.org/understanding-node-js-event-driven-architecture-223292fcbc2d)" + "[Understanding Node.js event-driven architecture](https://medium.freecodecamp.org/understanding-node-js-event-driven-architecture-223292fcbc2d)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "senior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, { "name": "fibonacci.md", "question": "Generate an array, containing the Fibonacci sequence, up until the nth term.", - "answer": "Create an empty array of the specific length. Use Array.reduce() to add values into the array, using the sum of the last two values, except for the first two.\n\n```js\nconst fibonacci = n =>\n Array.from({ length: n }).reduce(\n (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),\n []\n );\n```", + "answer": "Create an empty array of the specific length. Use Array.reduce() to add values into the array, using the sum of the last two values, except for the first two.\n\n```js\nconst fibonacci = n =>\n Array.from({ length: n }).reduce(\n (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),\n []\n )\n```", "goodToHear": [], "links": [ - "[Similar problem](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippets_archive/fibonacciUntilNum.md)" + "[Similar problem](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippets_archive/fibonacciUntilNum.md)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [ - "```js\nconst fibonacci = n =>\n Array.from({ length: n }).reduce(\n (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),\n []\n );\n```" + "```js\nconst fibonacci = n =>\n Array.from({ length: n }).reduce(\n (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),\n []\n )\n```" ] }, { @@ -138,11 +152,13 @@ "goodToHear": [], "links": [ "[MDN docs for basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)", - "[A complete guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" + "[A complete guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", + "" ], - "categories": [ + "tags": [ "css" ], + "expertise": "junior", "questionCodeBlocks": [ "```html\n
\n
\n
\n
\n
\n```" ], @@ -159,11 +175,13 @@ ], "links": [ "[A simple helper function to check equality](https://github.com/Chalarangelo/30-seconds-of-code#approximatelyequal)", - "[Fix \"0.1 + 0.2 = 0.300000004\" in JavaScript](http://blog.blakesimpson.co.uk/read/61-fix-0-1-0-2-0-300000004-in-javascript)" + "[Fix \"0.1 + 0.2 = 0.300000004\" in JavaScript](http://blog.blakesimpson.co.uk/read/61-fix-0-1-0-2-0-300000004-in-javascript)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [ "```js\n0.1 + 0.2 // 0.300000004\n```" @@ -180,11 +198,13 @@ "links": [ "[MDN docs for forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)", "[MDN docs for map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)", - "[JavaScript — Map vs. ForEach](https://codeburst.io/javascript-map-vs-foreach-f38111822c0f)" + "[JavaScript — Map vs. ForEach](https://codeburst.io/javascript-map-vs-foreach-f38111822c0f)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -200,37 +220,41 @@ ], "links": [ "[Javascript and Functional Programming: An Introduction](https://hackernoon.com/javascript-and-functional-programming-an-introduction-286aa625e26d)", - "[Master the JavaScript Interview: What is Functional Programming?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)" + "[Master the JavaScript Interview: What is Functional Programming?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "senior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, { "name": "hoisting-example.md", - "question": "What will the console log in this example?\n\n```js\nvar foo = 1;\nvar foobar = function () {\n console.log(foo);\n var foo = 2;\n};\nfoobar();\n```", + "question": "What will the console log in this example?\n\n```js\nvar foo = 1\nvar foobar = function() {\n console.log(foo)\n var foo = 2\n}\nfoobar()\n```", "answer": "Due to hoisting, the local variable `foo` is declared before the `console.log` method is called. This means the local variable `foo` is passed as an argument to `log` instead of the global one declared outside of the function. However, since the value is not hoisted with the variable declaration, the output will be `undefined`, not `2`.", "goodToHear": [ "Hoisting is JavaScript’s default behavior of moving declarations to the top", "Mention of `strict` mode" ], "links": [ - "[MDN docs for hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)" + "[MDN docs for hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [ - "```js\nvar foo = 1;\nvar foobar = function () {\n console.log(foo);\n var foo = 2;\n};\nfoobar();\n```" + "```js\nvar foo = 1\nvar foobar = function() {\n console.log(foo)\n var foo = 2\n}\nfoobar()\n```" ], "answerCodeBlocks": [] }, { "name": "hoisting.md", "question": "How does hoisting work in JavaScript?", - "answer": "Hoisting is a JavaScript mechanism where variables and function declarations are put into memory during the compile phase. This means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.\n\n```js\nconsole.log(hoist); // Output: undefined\nvar hoist = 'The variable has been hoisted.';\n```", + "answer": "Hoisting is a JavaScript mechanism where variables and function declarations are put into memory during the compile phase. This means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.\n\n```js\nconsole.log(hoist) // Output: undefined\nvar hoist = \"The variable has been hoisted.\"\n```", "goodToHear": [ "Hoisting is JavaScript’s default behavior of moving declarations to the top", "Functions are hoisted before variables", @@ -240,14 +264,16 @@ ], "links": [ "[MDN docs for hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)", - "[Understanding Hoisting in JavaScript](https://scotch.io/tutorials/understanding-hoisting-in-javascript)" + "[Understanding Hoisting in JavaScript](https://scotch.io/tutorials/understanding-hoisting-in-javascript)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [ - "```js\nconsole.log(hoist); // Output: undefined\nvar hoist = 'The variable has been hoisted.';\n```" + "```js\nconsole.log(hoist) // Output: undefined\nvar hoist = \"The variable has been hoisted.\"\n```" ] }, { @@ -258,11 +284,13 @@ "Decorative images should have empty `alt` tag" ], "links": [ - "[A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)" + "[A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)", + "" ], - "categories": [ + "tags": [ "html" ], + "expertise": "junior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -275,12 +303,14 @@ ], "links": [ "", - "[Node.js docs on event loop, timers and process.nextTick()](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)" + "[Node.js docs on event loop, timers and process.nextTick()](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)", + "" ], - "categories": [ + "tags": [ "node", "javascript" ], + "expertise": "senior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -295,11 +325,13 @@ ], "links": [ "[MDN docs for null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)", - "[MDN docs for undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)" + "[MDN docs for undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -311,11 +343,13 @@ "Difference between pass-by-value and pass-by-reference" ], "links": [ - "[JavaScript Value vs Reference](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18)" + "[JavaScript Value vs Reference](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -329,31 +363,35 @@ ], "links": [ "[MDN docs for inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)", - "[Differences between class and prototypal inheritance](https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9)" + "[Differences between class and prototypal inheritance](https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [] }, { "name": "reference-example.md", - "question": "What is the output of the following code?\n\n```js\nconst a = [1,2,3];\nconst b = [1,2,3];\nconst c = \"1,2,3\";\n\nconsole.log(a == c);\nconsole.log(a == b);\n```", - "answer": "The first `console.log` outputs `true` because JavaScript's compiler performs type conversion and therefore it compares to strings by their value. On the other hand, the second `console.log` outputs `false` because Arrays are Objects and Objects are compared by reference.", + "question": "What is the output of the following code?\n\n```js\nconst a = [1, 2, 3]\nconst b = [1, 2, 3]\nconst c = \"1,2,3\"\n\nconsole.log(a == c)\nconsole.log(a == b)\n```", + "answer": "The first `console.log` outputs `true` because JavaScript's compiler performs type conversion and therefore it compares to strings by their value. On the other hand, the second `console.log` outputs `false` because Arrays are Objects and Objects are compared by reference.", "goodToHear": [ "JavaScript performs automatic type conversion", "Objects are compared by reference", "Primitives are compared by value" ], "links": [ - "[JavaScript Value vs Reference](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18)" + "[JavaScript Value vs Reference](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [ - "```js\nconst a = [1,2,3];\nconst b = [1,2,3];\nconst c = \"1,2,3\";\n\nconsole.log(a == c);\nconsole.log(a == b);\n```" + "```js\nconst a = [1, 2, 3]\nconst b = [1, 2, 3]\nconst c = \"1,2,3\"\n\nconsole.log(a == c)\nconsole.log(a == b)\n```" ], "answerCodeBlocks": [] }, @@ -368,29 +406,33 @@ "links": [ "", "[Open external anchors using rel=\"noopener\"](https://developers.google.com/web/tools/lighthouse/audits/noopener)", - "[About rel=\"noopener\"](https://mathiasbynens.github.io/rel-noopener/)" + "[About rel=\"noopener\"](https://mathiasbynens.github.io/rel-noopener/)", + "" ], - "categories": [ + "tags": [ "html" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [] }, { "name": "return-semicolon.md", - "question": "What does the following function return?\n\n```js\nfunction greet() {\n return\n {\n message: \"hello\"\n };\n}\n```", + "question": "What does the following function return?\n\n```js\nfunction greet() {\n return\n {\n message: \"hello\"\n }\n}\n```", "answer": "Because of JavaScript's automatic semicolon insertion (ASI), the compiler places a semicolon after `return` keyword and therefore it returns `undefined` without an error being thrown.", "goodToHear": [ "Automatic semicolon placement can lead to time-consuming bugs" ], "links": [ - "[Automatic semicolon insertion in JavaScript](http://2ality.com/2011/05/semicolon-insertion.html)" + "[Automatic semicolon insertion in JavaScript](http://2ality.com/2011/05/semicolon-insertion.html)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [ - "```js\nfunction greet() {\n return\n {\n message: \"hello\"\n };\n}\n```" + "```js\nfunction greet() {\n return\n {\n message: \"hello\"\n }\n}\n```" ], "answerCodeBlocks": [] }, @@ -405,27 +447,31 @@ "`NaN` is not equivalent to anything, not even itself" ], "links": [ - "[MDN docs for comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)" + "[MDN docs for comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "junior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, { "name": "typeof-typeof.md", - "question": "What does the following code evaluate to?\n\n```js\ntypeof typeof 0;\n```", + "question": "What does the following code evaluate to?\n\n```js\ntypeof typeof 0\n```", "answer": "It evaluates to `\"string\"`.\n\n`typeof 0` evaluates to the string `\"number\"` and therefore `typeof \"number\"` evaluates to `\"string\"`.", "goodToHear": [], "links": [ - "[MDN docs for typeof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)" + "[MDN docs for typeof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [ - "```js\ntypeof typeof 0;\n```" + "```js\ntypeof typeof 0\n```" ], "answerCodeBlocks": [] }, @@ -440,11 +486,13 @@ ], "links": [ "[MDN docs for data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)", - "[Understanding Data Types in JavaScript](https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript)" + "[Understanding Data Types in JavaScript](https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -458,11 +506,13 @@ "Prohibits some syntax likely to be defined in future versions of ECMAScript" ], "links": [ - "[MDN docs for strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)" + "[MDN docs for strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "senior", "questionCodeBlocks": [], "answerCodeBlocks": [] }, @@ -475,11 +525,13 @@ "Creates a private namespace" ], "links": [ - "[MDN docs for closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)" + "[MDN docs for closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)", + "" ], - "categories": [ + "tags": [ "javascript" ], + "expertise": "intermediate", "questionCodeBlocks": [], "answerCodeBlocks": [ "```js\nconst myLibrary = function () {\n var privateVariable = 2;\n return {\n publicMethod: () => privateVariable;\n };\n}();\nprivateVariable; // ReferenceError\nmyLibrary.publicMethod(); // 2\n```" @@ -496,11 +548,13 @@ "links": [ "[MDN docs for z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)", "[Understanding CSS z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index)", - "[What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)" + "[What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)", + "" ], - "categories": [ + "tags": [ "css" ], + "expertise": "junior", "questionCodeBlocks": [], "answerCodeBlocks": [] } diff --git a/questions/bem.md b/questions/bem.md index a5de491c..e1619dc5 100644 --- a/questions/bem.md +++ b/questions/bem.md @@ -6,13 +6,16 @@ The BEM methodology is another naming convention for CSS classes. The BEM stands ```css /* block component */ -.block {} +.block { +} /* element */ -.block__element {} +.block__element { +} /* modifier */ -.block__element--modifier {} +.block__element--modifier { +} ``` #### Good to hear @@ -26,3 +29,5 @@ The BEM methodology is another naming convention for CSS classes. The BEM stands * [Writing clean and maintainable CSS](https://hackernoon.com/writing-clean-and-maintainable-css-using-bem-methodology-1dcbf810a664) + + diff --git a/questions/clone-object.md b/questions/clone-object.md index 9dc4d181..54e2828e 100644 --- a/questions/clone-object.md +++ b/questions/clone-object.md @@ -6,8 +6,8 @@ Using the object spread operator `...`, the object's own enumerable properties c into the new object. This creates a shallow clone of the object. ```js -const obj = { a: 1, b: 2 }; -const shallowClone = { ...obj }; +const obj = { a: 1, b: 2 } +const shallowClone = { ...obj } ``` With this technique, prototypes are ignored. In addition, nested objects are not cloned, but rather their references get copied, so nested objects still refer to the same objects as the original. Deep-cloning is much more complex in order to effectively clone any type of object (Date, RegExp, Function, Set, etc) that may be nested within the object. @@ -31,3 +31,5 @@ Other alternatives include: * [Clone an object in vanilla JS](http://voidcanvas.com/clone-an-object-in-vanilla-js-in-depth/) + + diff --git a/questions/closures.md b/questions/closures.md index 2b6658ff..aec07ff6 100644 --- a/questions/closures.md +++ b/questions/closures.md @@ -21,3 +21,5 @@ A closure is a function defined inside another function and has access to its le * [I never understood JavaScript closures](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8) + + diff --git a/questions/comparing-objects.md b/questions/comparing-objects.md index 3db01887..41f99de0 100644 --- a/questions/comparing-objects.md +++ b/questions/comparing-objects.md @@ -14,15 +14,15 @@ plain objects, arrays, functions, dates and primitive values. ```js function isDeepEqual(obj1, obj2, testPrototypes = false) { if (obj1 === obj2) { - return true; + return true } if (typeof obj1 === "function" && typeof obj2 === "function") { - return obj1.toString() === obj2.toString(); + return obj1.toString() === obj2.toString() } if (obj1 instanceof Date && obj2 instanceof Date) { - return obj1.getTime() === obj2.getTime(); + return obj1.getTime() === obj2.getTime() } const prototypesAreEqual = testPrototypes @@ -31,16 +31,16 @@ function isDeepEqual(obj1, obj2, testPrototypes = false) { Object.getPrototypeOf(obj2), true ) - : true; + : true - const obj1Props = Object.getOwnPropertyNames(obj1); - const obj2Props = Object.getOwnPropertyNames(obj2); + const obj1Props = Object.getOwnPropertyNames(obj1) + const obj2Props = Object.getOwnPropertyNames(obj2) return ( obj1Props.length === obj2Props.length && prototypesAreEqual && obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop])) - ); + ) } ``` @@ -55,3 +55,5 @@ function isDeepEqual(obj1, obj2, testPrototypes = false) { * [Deep comparison between two values](https://30secondsofcode.org/object#equals) + + diff --git a/questions/css-preprocessors.md b/questions/css-preprocessors.md index 11d500af..a111edf5 100644 --- a/questions/css-preprocessors.md +++ b/questions/css-preprocessors.md @@ -14,3 +14,5 @@ CSS preprocessors add useful functionality that native CSS does not have, and ge * [CSS Preprocessors](https://medium.com/@garyfagan/css-preprocessors-6f226fa16f27) + + diff --git a/questions/event-driven-programming.md b/questions/event-driven-programming.md index 0450bc95..102f8ec5 100644 --- a/questions/event-driven-programming.md +++ b/questions/event-driven-programming.md @@ -15,3 +15,5 @@ Event-driven programming is building an application that is based on and respond * [Understanding Node.js event-driven architecture](https://medium.freecodecamp.org/understanding-node-js-event-driven-architecture-223292fcbc2d) + + diff --git a/questions/fibonacci.md b/questions/fibonacci.md index b69224b9..f53a9825 100644 --- a/questions/fibonacci.md +++ b/questions/fibonacci.md @@ -9,7 +9,7 @@ const fibonacci = n => Array.from({ length: n }).reduce( (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), [] - ); + ) ``` #### Good to hear @@ -19,3 +19,5 @@ const fibonacci = n => * [Similar problem](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippets_archive/fibonacciUntilNum.md) + + diff --git a/questions/flex-layout.md b/questions/flex-layout.md index 84159150..43bdc48c 100644 --- a/questions/flex-layout.md +++ b/questions/flex-layout.md @@ -38,3 +38,5 @@ We only need to set the `display` property of the `flex-grid` element to `flex` * [A complete guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + + diff --git a/questions/floating-point.md b/questions/floating-point.md index d8eea132..107b794a 100644 --- a/questions/floating-point.md +++ b/questions/floating-point.md @@ -18,3 +18,5 @@ It evaluates to `false` because JavaScript uses the IEEE 754 standard for Math a * [Fix "0.1 + 0.2 = 0.300000004" in JavaScript](http://blog.blakesimpson.co.uk/read/61-fix-0-1-0-2-0-300000004-in-javascript) + + diff --git a/questions/for-each-map.md b/questions/for-each-map.md index e339510a..39910f81 100644 --- a/questions/for-each-map.md +++ b/questions/for-each-map.md @@ -16,3 +16,5 @@ Both methods iterate through the elements of an array. `map()` maps each element * [JavaScript — Map vs. ForEach](https://codeburst.io/javascript-map-vs-foreach-f38111822c0f) + + diff --git a/questions/functional-programming.md b/questions/functional-programming.md index 913c09d7..aff2659a 100644 --- a/questions/functional-programming.md +++ b/questions/functional-programming.md @@ -18,3 +18,5 @@ Functional programming is a paradigm in which programs are built in a declarativ * [Master the JavaScript Interview: What is Functional Programming?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0) + + diff --git a/questions/hoisting-example.md b/questions/hoisting-example.md index 5edbe833..ec564896 100644 --- a/questions/hoisting-example.md +++ b/questions/hoisting-example.md @@ -1,12 +1,12 @@ ### What will the console log in this example? ```js -var foo = 1; -var foobar = function () { - console.log(foo); - var foo = 2; -}; -foobar(); +var foo = 1 +var foobar = function() { + console.log(foo) + var foo = 2 +} +foobar() ``` #### Answer @@ -23,3 +23,5 @@ Due to hoisting, the local variable `foo` is declared before the `console.log` m * [MDN docs for hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) + + diff --git a/questions/hoisting.md b/questions/hoisting.md index b2412ebd..f5230b24 100644 --- a/questions/hoisting.md +++ b/questions/hoisting.md @@ -5,8 +5,8 @@ Hoisting is a JavaScript mechanism where variables and function declarations are put into memory during the compile phase. This means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. ```js -console.log(hoist); // Output: undefined -var hoist = 'The variable has been hoisted.'; +console.log(hoist) // Output: undefined +var hoist = "The variable has been hoisted." ``` #### Good to hear @@ -23,3 +23,5 @@ var hoist = 'The variable has been hoisted.'; * [Understanding Hoisting in JavaScript](https://scotch.io/tutorials/understanding-hoisting-in-javascript) + + diff --git a/questions/image-accessibility.md b/questions/image-accessibility.md index 3cf72b57..f77ab733 100644 --- a/questions/image-accessibility.md +++ b/questions/image-accessibility.md @@ -13,3 +13,5 @@ The `alt` attribute provides alternative information for an image if a user cann * [A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) + + diff --git a/questions/node-event-loop.md b/questions/node-event-loop.md index dbb034e5..dcd59305 100644 --- a/questions/node-event-loop.md +++ b/questions/node-event-loop.md @@ -15,3 +15,5 @@ The event loop handles all async callbacks. Callbacks are queued in a loop, whil * [Node.js docs on event loop, timers and process.nextTick()](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/) + + diff --git a/questions/null-vs-undefined.md b/questions/null-vs-undefined.md index bf434b8b..4ceff1a0 100644 --- a/questions/null-vs-undefined.md +++ b/questions/null-vs-undefined.md @@ -16,3 +16,5 @@ In JavaScript, two values discretely represent nothing - `undefined` and `null`. * [MDN docs for undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) + + diff --git a/questions/pass-by-value-reference.md b/questions/pass-by-value-reference.md index 720981e4..5acbe763 100644 --- a/questions/pass-by-value-reference.md +++ b/questions/pass-by-value-reference.md @@ -13,3 +13,5 @@ JavaScript always passes by value. However, with objects, the value is a referen * [JavaScript Value vs Reference](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18) + + diff --git a/questions/prototypal-inheritance.md b/questions/prototypal-inheritance.md index f572dd5c..c1eaa217 100644 --- a/questions/prototypal-inheritance.md +++ b/questions/prototypal-inheritance.md @@ -17,3 +17,5 @@ In the prototypal inheritance paradigm, object instances inherit directly from o * [Differences between class and prototypal inheritance](https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9) + + diff --git a/questions/reference-example.md b/questions/reference-example.md index d11209e1..bb3511c5 100644 --- a/questions/reference-example.md +++ b/questions/reference-example.md @@ -1,17 +1,17 @@ ### What is the output of the following code? ```js -const a = [1,2,3]; -const b = [1,2,3]; -const c = "1,2,3"; +const a = [1, 2, 3] +const b = [1, 2, 3] +const c = "1,2,3" -console.log(a == c); -console.log(a == b); +console.log(a == c) +console.log(a == b) ``` #### Answer -The first `console.log` outputs `true` because JavaScript's compiler performs type conversion and therefore it compares to strings by their value. On the other hand, the second `console.log` outputs `false` because Arrays are Objects and Objects are compared by reference. +The first `console.log` outputs `true` because JavaScript's compiler performs type conversion and therefore it compares to strings by their value. On the other hand, the second `console.log` outputs `false` because Arrays are Objects and Objects are compared by reference. #### Good to hear @@ -24,3 +24,5 @@ The first `console.log` outputs `true` because JavaScript's compiler performs ty * [JavaScript Value vs Reference](https://medium.com/dailyjs/back-to-roots-javascript-value-vs-reference-8fb69d587a18) + + diff --git a/questions/rel-noopener.md b/questions/rel-noopener.md index ba08acdc..b0377247 100644 --- a/questions/rel-noopener.md +++ b/questions/rel-noopener.md @@ -17,3 +17,5 @@ The `rel="noopener"` is an attribute used in `` elements (hyperlinks). It pre * [About rel="noopener"](https://mathiasbynens.github.io/rel-noopener/) + + diff --git a/questions/return-semicolon.md b/questions/return-semicolon.md index 74c28112..583dc141 100644 --- a/questions/return-semicolon.md +++ b/questions/return-semicolon.md @@ -5,7 +5,7 @@ function greet() { return { message: "hello" - }; + } } ``` @@ -22,3 +22,5 @@ Because of JavaScript's automatic semicolon insertion (ASI), the compiler places * [Automatic semicolon insertion in JavaScript](http://2ality.com/2011/05/semicolon-insertion.html) + + diff --git a/questions/type-comparison.md b/questions/type-comparison.md index 3677a9e0..ec457fe4 100644 --- a/questions/type-comparison.md +++ b/questions/type-comparison.md @@ -16,3 +16,5 @@ When using triple equals in JavaScript we are testing for strict equality. This * [MDN docs for comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) + + diff --git a/questions/typeof-typeof.md b/questions/typeof-typeof.md index ed723b3e..051400dc 100644 --- a/questions/typeof-typeof.md +++ b/questions/typeof-typeof.md @@ -1,7 +1,7 @@ ### What does the following code evaluate to? ```js -typeof typeof 0; +typeof typeof 0 ``` #### Answer @@ -17,3 +17,5 @@ It evaluates to `"string"`. * [MDN docs for typeof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof) + + diff --git a/questions/types.md b/questions/types.md index 3d129110..c5bdf873 100644 --- a/questions/types.md +++ b/questions/types.md @@ -16,3 +16,5 @@ The latest ECMAScript standard defines seven data types, six of them being primi * [Understanding Data Types in JavaScript](https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript) + + diff --git a/questions/use-strict.md b/questions/use-strict.md index dc26661c..e914f56a 100644 --- a/questions/use-strict.md +++ b/questions/use-strict.md @@ -22,3 +22,5 @@ Including `'use strict'` at the beginning of your JavaScript source file enables * [MDN docs for strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) + + diff --git a/questions/wrap-content.md b/questions/wrap-content.md index 2c578e93..6fe210ca 100644 --- a/questions/wrap-content.md +++ b/questions/wrap-content.md @@ -25,3 +25,5 @@ myLibrary.publicMethod(); // 2 * [MDN docs for closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + + diff --git a/questions/z-index.md b/questions/z-index.md index 98fa9e6b..9b5e28dc 100644 --- a/questions/z-index.md +++ b/questions/z-index.md @@ -16,3 +16,5 @@ When elements overlap, z-order determines which one covers the other. * [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) + + diff --git a/scripts/extract.js b/scripts/extract.js index 14d836ca..08ec2f2c 100644 --- a/scripts/extract.js +++ b/scripts/extract.js @@ -42,7 +42,8 @@ attempt("questions.json generation", () => { .split("\n") .map(v => v.replace("* ", "")) .filter(v => v.trim() !== "" && !v.includes("tags")), - categories: (contents.match(/