|
2 | 2 |
|
3 | 3 | I post daily multiple choice JavaScript questions on my [Instagram](https://www.instagram.com/theavocoder), which I'll also post here!
|
4 | 4 |
|
5 |
| -From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! :muscle: :rocket: I update this repo weekly with new questions. Last update: <a href=#20190726><b>July 26th</b></a> |
| 5 | +From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! :muscle: :rocket: I update this repo weekly with new questions. Last update: <a href=#20190817><b>August 17th</b></a> |
6 | 6 |
|
7 | 7 | The answers are in the collapsed sections below the questions, simply click on them to expand it. Good luck :heart:
|
8 | 8 |
|
@@ -3014,5 +3014,245 @@ getItems(["banana", "apple"], "pear", "orange")
|
3014 | 3014 | ```
|
3015 | 3015 |
|
3016 | 3016 | The above example works. This returns the array `[ 'banana', 'apple', 'orange', 'pear' ]`
|
| 3017 | +</p> |
| 3018 | +</details> |
| 3019 | + |
| 3020 | +--- |
| 3021 | + |
| 3022 | +###### <a name=20190817></a>95. What's the output? |
| 3023 | + |
| 3024 | +```javascript |
| 3025 | +function nums(a, b) { |
| 3026 | + if |
| 3027 | + (a > b) |
| 3028 | + console.log('a is bigger') |
| 3029 | + else |
| 3030 | + console.log('b is bigger') |
| 3031 | + return |
| 3032 | + a + b |
| 3033 | +} |
| 3034 | + |
| 3035 | +console.log(nums(4, 2)) |
| 3036 | +console.log(nums(1, 2)) |
| 3037 | +``` |
| 3038 | + |
| 3039 | +- A: `a is bigger`, `6` and `b is bigger`, `3` |
| 3040 | +- B: `a is bigger`, `undefined` and `b is bigger`, `undefined` |
| 3041 | +- C: `undefined` and `undefined` |
| 3042 | +- D: `SyntaxError` |
| 3043 | + |
| 3044 | +<details><summary><b>Answer</b></summary> |
| 3045 | +<p> |
| 3046 | + |
| 3047 | +#### Answer: B |
| 3048 | + |
| 3049 | +In JavaScript, we don't _have_ to write the semicolon (`;`) explicitly, however the JavaScript engine still adds them after statements. This is called **Automatic Semicolon Insertion**. A statement can for example be variables, or keywords like `throw`, `return`, `break`, etc. |
| 3050 | + |
| 3051 | +Here, we wrote a `return` statement, and another value `a + b` on a _new line_. However, since it's a new line, the engine doesn't know that it's actually the value that we wanted to return. Instead, it automatically added a semicolon after `return`. You could see this as: |
| 3052 | + |
| 3053 | +```javascript |
| 3054 | + return; |
| 3055 | + a + b |
| 3056 | +``` |
| 3057 | + |
| 3058 | +This means that `a + b` is never reached, since a function stops running after the `return` keyword. If no value gets returned, like here, the function returns `undefined`. Note that there is no automatic insertion after `if/else` statements! |
| 3059 | + |
| 3060 | +</p> |
| 3061 | +</details> |
| 3062 | + |
| 3063 | +--- |
| 3064 | + |
| 3065 | +###### 96. What's the output? |
| 3066 | + |
| 3067 | +```javascript |
| 3068 | +class Person { |
| 3069 | + constructor() { |
| 3070 | + this.name = "Lydia" |
| 3071 | + } |
| 3072 | +} |
| 3073 | + |
| 3074 | +Person = class AnotherPerson { |
| 3075 | + constructor() { |
| 3076 | + this.name = "Sarah" |
| 3077 | + } |
| 3078 | +} |
| 3079 | + |
| 3080 | +const member = new Person() |
| 3081 | +console.log(member.name) |
| 3082 | +``` |
| 3083 | + |
| 3084 | +- A: `"Lydia"` |
| 3085 | +- B: `"Sarah"` |
| 3086 | +- C: `Error: cannot redeclare Person` |
| 3087 | +- D: `SyntaxError` |
| 3088 | + |
| 3089 | +<details><summary><b>Answer</b></summary> |
| 3090 | +<p> |
| 3091 | + |
| 3092 | +#### Answer: B |
| 3093 | + |
| 3094 | +We can set classes equal to other classes/function constructors. In this case, we set `Person` equal to `AnotherPerson`. The name on this constructor is `Sarah`, so the name property on the new `Person` instance `member` is `"Sarah"`. |
| 3095 | + |
| 3096 | +</p> |
| 3097 | +</details> |
| 3098 | + |
| 3099 | +--- |
| 3100 | + |
| 3101 | +###### 97. What's the output? |
| 3102 | + |
| 3103 | +```javascript |
| 3104 | +const info = { |
| 3105 | + [Symbol('a')]: 'b' |
| 3106 | +} |
| 3107 | + |
| 3108 | +console.log(info) |
| 3109 | +console.log(Object.keys(info)) |
| 3110 | +``` |
| 3111 | + |
| 3112 | +- A: `{Symbol('a'): 'b'}` and `["{Symbol('a')"]` |
| 3113 | +- B: `{}` and `[]` |
| 3114 | +- C: `{ a: "b" }` and `["a"]` |
| 3115 | +- D: `{Symbol('a'): 'b'}` and `[]` |
| 3116 | + |
| 3117 | +<details><summary><b>Answer</b></summary> |
| 3118 | +<p> |
| 3119 | + |
| 3120 | +#### Answer: D |
| 3121 | + |
| 3122 | +A Symbol is not _enumerable_. The Object.keys method returns all _enumerable_ key properties on an object. The Symbol won't be visible, and an empty array is returned. When logging the entire object, all properties will be visible, even non-enumerable ones. |
| 3123 | + |
| 3124 | +This is one of the many qualities of a symbol: besides representing an entirely unique value (which prevents accidental name collision on objects, for example when working with 2 libraries that want to add properties to the same object), you can also "hide" properties on objects this way (although not entirely. You can still access symbols using the `Object.getOwnPropertySymbols()` method). |
| 3125 | + |
| 3126 | +</p> |
| 3127 | +</details> |
| 3128 | + |
| 3129 | +--- |
| 3130 | + |
| 3131 | +###### 98. What's the output? |
| 3132 | + |
| 3133 | +```javascript |
| 3134 | +const getList = ([x, ...y]) => [x, y] |
| 3135 | +const getUser = user => { name: user.name, age: user.age } |
| 3136 | + |
| 3137 | +const list = [1, 2, 3, 4] |
| 3138 | +const user = { name: "Lydia", age: 21 } |
| 3139 | + |
| 3140 | +console.log(getList(list)) |
| 3141 | +console.log(getUser(user)) |
| 3142 | +``` |
| 3143 | + |
| 3144 | +- A: `[1, [2, 3, 4]]` and `undefined` |
| 3145 | +- B: `[1, [2, 3, 4]]` and `{ name: "Lydia", age: 21 }` |
| 3146 | +- C: `[1, 2, 3, 4]` and `{ name: "Lydia", age: 21 }` |
| 3147 | +- D: `Error` and `{ name: "Lydia", age: 21 }` |
| 3148 | + |
| 3149 | +<details><summary><b>Answer</b></summary> |
| 3150 | +<p> |
| 3151 | + |
| 3152 | +#### Answer: A |
| 3153 | + |
| 3154 | +The `getList` function receives an array as its argument. Between the parentheses of the `getList` function, we destructure this array right away. You could see this as: |
| 3155 | + |
| 3156 | + `[x, ...y] = [1, 2, 3, 4]` |
| 3157 | + |
| 3158 | + With the rest parameter `...y`, we put all "remaining" arguments in an array. The remaining arguments are `2`, `3` and `4` in this case. The value of `y` is an array, containig all the rest parameters. The value of `x` is equal to `1` in this case, so when we log `[x, y]`, `[1, [2, 3, 4]]` gets logged. |
| 3159 | + |
| 3160 | + The `getUser` function receives an object. With arrow functions, we don't _have_ to write curly brackets if we just return one value. However, if you want to return an _object_ from an arrow function, you have to write it between parentheses, otherwise no value gets returned! The following function would have returned an object: |
| 3161 | + |
| 3162 | +```const getUser = user => ({ name: user.name, age: user.age })``` |
| 3163 | + |
| 3164 | +Since no value gets returned in this case, the function returns `undefined`. |
| 3165 | + |
| 3166 | +</p> |
| 3167 | +</details> |
| 3168 | + |
| 3169 | +--- |
| 3170 | + |
| 3171 | +###### 99. What's the output? |
| 3172 | + |
| 3173 | +```javascript |
| 3174 | +const name = "Lydia" |
| 3175 | + |
| 3176 | +console.log(name()) |
| 3177 | +``` |
| 3178 | + |
| 3179 | +- A: `SyntaxError` |
| 3180 | +- B: `ReferenceError` |
| 3181 | +- C: `TypeError` |
| 3182 | +- D: `undefined` |
| 3183 | + |
| 3184 | +<details><summary><b>Answer</b></summary> |
| 3185 | +<p> |
| 3186 | + |
| 3187 | +#### Answer: C |
| 3188 | + |
| 3189 | +The variable `name` holds the value of a string, which is not a function, thus cannot invoke. |
| 3190 | + |
| 3191 | +TypeErrors get thrown wehn a value is not of the expected type. JavaScript expected `name` to be a function since we're trying to invoke it. It was a string however, so a TypeError gets thrown: name is not a function! |
| 3192 | + |
| 3193 | +SyntaxErrors get thrown when you've written something that isn't valid JavaScript, for example when you've written the word `return` as `retrun`. |
| 3194 | +ReferenceErrors get thrown when JavaScript isn't able to find a reference to a value that you're trying to access. |
| 3195 | + |
| 3196 | +</p> |
| 3197 | +</details> |
| 3198 | + |
| 3199 | +--- |
| 3200 | + |
| 3201 | +###### 100. What's the value of output? |
| 3202 | + |
| 3203 | +```javascript |
| 3204 | +// 🎉✨ This is my 100th question! ✨🎉 |
| 3205 | + |
| 3206 | +const output = `${[] && 'Im'}possible! |
| 3207 | +You should${'' && `n't`} see a therapist after so much JavaScript lol` |
| 3208 | +``` |
| 3209 | + |
| 3210 | +- A: `possible! You should see a therapist after so much JavaScript lol` |
| 3211 | +- B: `Impossible! You should see a therapist after so much JavaScript lol` |
| 3212 | +- C: `possible! You shouldn't see a therapist after so much JavaScript lol` |
| 3213 | +- D: `Impossible! You shouldn't see a therapist after so much JavaScript lol` |
| 3214 | + |
| 3215 | +<details><summary><b>Answer</b></summary> |
| 3216 | +<p> |
| 3217 | + |
| 3218 | +#### Answer: B |
| 3219 | + |
| 3220 | +`[]` is a truthy value. With the `&&` operator, the right-hand value will be returned if the left-hand value is a truthy value. In this case, the left-hand value `[]` is a truthy value, so `"Im'` gets returned. |
| 3221 | + |
| 3222 | +`""` is a falsy value. If the left-hand value is falsy, nothing gets returned. `n't` doesn't get returned. |
| 3223 | + |
| 3224 | +</p> |
| 3225 | +</details> |
| 3226 | + |
| 3227 | +--- |
| 3228 | + |
| 3229 | +###### 101. What's the value of output? |
| 3230 | + |
| 3231 | +```javascript |
| 3232 | +const one = (false || {} || null) |
| 3233 | +const two = (null || false || "") |
| 3234 | +const three = ([] || 0 || true) |
| 3235 | + |
| 3236 | +console.log(one, two, three) |
| 3237 | +``` |
| 3238 | + |
| 3239 | +- A: `false` `null` `[]` |
| 3240 | +- B: `null` `""` `true` |
| 3241 | +- C: `{}` `""` `[]` |
| 3242 | +- D: `null` `null` `true` |
| 3243 | + |
| 3244 | +<details><summary><b>Answer</b></summary> |
| 3245 | +<p> |
| 3246 | + |
| 3247 | +#### Answer: C |
| 3248 | + |
| 3249 | +With the `||` operator, we can return the first truthy operand. If all values are falsy, the last operand gets returned. |
| 3250 | + |
| 3251 | +`(false || {} || null)`: the empty object `{}` is a truthy value. This is the first (and only) truthy value, which gets returned. `one` is equal to `{}`. |
| 3252 | + |
| 3253 | +`(null || false || "")`: all operands are falsy values. This means that the past operand, `""` gets returned. `two` is equal to `""`. |
| 3254 | + |
| 3255 | +`([] || 0 || "")`: the empty array`[]` is a truthy value. This is the first truthy value, which gets returned. `three` is equal to `[]`. |
| 3256 | + |
3017 | 3257 | </p>
|
3018 | 3258 | </details>
|
0 commit comments