Skip to content

Commit 8535fd3

Browse files
Executable coding blocks production-readiness - PR 1 (#20)
Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
1 parent de949a2 commit 8535fd3

File tree

19 files changed

+276
-191
lines changed
  • questions
    • explain-the-concept-of-hoisting-with-regards-to-functions
    • explain-the-concept-of-the-spread-operator-and-its-uses
    • explain-the-difference-in-hoisting-between-var-let-and-const
    • how-do-you-access-the-index-of-an-element-in-an-array-during-iteration
    • how-do-you-check-the-data-type-of-a-variable
    • how-do-you-convert-a-string-to-a-number-in-javascript
    • what-are-rest-parameters-and-how-are-they-used
    • what-are-template-literals-and-how-are-they-used
    • what-are-the-differences-between-variables-created-using-let-var-or-const
    • what-are-the-various-data-types-in-javascript
    • what-is-the-difference-between-double-equal-and-triple-equal
    • what-is-the-purpose-of-the-break-and-continue-statements
    • what-is-the-purpose-of-the-switch-statement
    • what-is-the-spread-operator-and-how-is-it-used
    • what-is-the-ternary-operator-and-how-is-it-used
    • what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items
    • whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states

19 files changed

+276
-191
lines changed

README.md

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1494,7 +1494,7 @@ There are multiple ways to iterate over object properties as well as arrays in J
14941494

14951495
The `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties
14961496

1497-
```js
1497+
```js live
14981498
const obj = {
14991499
a: 1,
15001500
b: 2,
@@ -1513,7 +1513,7 @@ for (const key in obj) {
15131513

15141514
`Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.
15151515

1516-
```js
1516+
```js live
15171517
const obj = {
15181518
a: 1,
15191519
b: 2,
@@ -1529,7 +1529,7 @@ Most common ways to iterate over array are using `for` loop and `Array.prototype
15291529

15301530
**Using `for` loop**
15311531

1532-
```js
1532+
```js live
15331533
let array = [1, 2, 3, 4, 5, 6];
15341534
for (let index = 0; index < array.length; index++) {
15351535
console.log(array[index]);
@@ -1538,7 +1538,7 @@ for (let index = 0; index < array.length; index++) {
15381538

15391539
**Using `Array.prototype.forEach` method**
15401540

1541-
```js
1541+
```js live
15421542
let array = [1, 2, 3, 4, 5, 6];
15431543
array.forEach((number, index) => {
15441544
console.log(`${number} at index ${index}`);
@@ -1549,7 +1549,7 @@ array.forEach((number, index) => {
15491549

15501550
This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.
15511551

1552-
```js
1552+
```js live
15531553
const numbers = [1, 2, 3, 4, 5];
15541554

15551555
for (const number of numbers) {
@@ -2322,9 +2322,9 @@ Template literals are a feature in JavaScript that allow for easier string inter
23222322

23232323
Example:
23242324

2325-
```js
2326-
const name = 'John';
2327-
const greeting = `Hello, ${name}!`;
2325+
```js live
2326+
const myName = 'John';
2327+
const greeting = `Hello, ${myName}!`;
23282328
console.log(greeting); // Output: Hello, John!
23292329
```
23302330

@@ -2365,14 +2365,16 @@ console.log(result); // "Hello world! How are you?"
23652365

23662366
The spread operator, represented by three dots (`...`), is used in JavaScript to expand iterable objects like arrays or strings into individual elements. It can also be used to spread object properties. For example, you can use it to combine arrays, copy arrays, or pass array elements as arguments to a function.
23672367

2368-
```js
2368+
```js live
23692369
const arr1 = [1, 2, 3];
23702370
const arr2 = [4, 5, 6];
2371-
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
2371+
const combined = [...arr1, ...arr2];
2372+
console.log(combined); // [1, 2, 3, 4, 5, 6]
23722373

23732374
const obj1 = { a: 1, b: 2 };
23742375
const obj2 = { c: 3, d: 4 };
2375-
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
2376+
const combinedObj = { ...obj1, ...obj2 };
2377+
console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
23762378
```
23772379

23782380
<!-- Update here: /questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx -->
@@ -2565,16 +2567,17 @@ let b = 10;
25652567

25662568
To avoid problems related to hoisting, always declare variables at the top of their scope using `let` or `const` instead of `var`. This ensures that variables are block-scoped and not hoisted to the top of their containing function or global scope. Additionally, declare functions before they are called to avoid issues with function hoisting.
25672569

2568-
```js
2570+
```js live
25692571
// Use let or const
25702572
let x = 10;
25712573
const y = 20;
2574+
console.log(x, y); // Output: 10 20
25722575

25732576
// Declare functions before calling them
25742577
function myFunction() {
25752578
console.log('Hello, world!');
25762579
}
2577-
myFunction();
2580+
myFunction(); // Output: 'Hello, world!'
25782581
```
25792582

25802583
<!-- Update here: /questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx -->
@@ -2615,7 +2618,7 @@ There are multiple ways to iterate over object properties as well as arrays in J
26152618

26162619
The `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties
26172620

2618-
```js
2621+
```js live
26192622
const obj = {
26202623
a: 1,
26212624
b: 2,
@@ -2634,7 +2637,7 @@ for (const key in obj) {
26342637

26352638
`Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.
26362639

2637-
```js
2640+
```js live
26382641
const obj = {
26392642
a: 1,
26402643
b: 2,
@@ -2650,7 +2653,7 @@ Most common ways to iterate over array are using `for` loop and `Array.prototype
26502653

26512654
**Using `for` loop**
26522655

2653-
```js
2656+
```js live
26542657
let array = [1, 2, 3, 4, 5, 6];
26552658
for (let index = 0; index < array.length; index++) {
26562659
console.log(array[index]);
@@ -2659,7 +2662,7 @@ for (let index = 0; index < array.length; index++) {
26592662

26602663
**Using `Array.prototype.forEach` method**
26612664

2662-
```js
2665+
```js live
26632666
let array = [1, 2, 3, 4, 5, 6];
26642667
array.forEach((number, index) => {
26652668
console.log(`${number} at index ${index}`);
@@ -2670,7 +2673,7 @@ array.forEach((number, index) => {
26702673

26712674
This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.
26722675

2673-
```js
2676+
```js live
26742677
const numbers = [1, 2, 3, 4, 5];
26752678

26762679
for (const number of numbers) {
@@ -2698,7 +2701,7 @@ There are also other inbuilt methods available which are suitable for specific s
26982701

26992702
The `break` statement is used to exit a loop or switch statement prematurely, while the `continue` statement skips the current iteration of a loop and proceeds to the next iteration. For example, in a `for` loop, `break` will stop the loop entirely, and `continue` will skip to the next iteration.
27002703

2701-
```js
2704+
```js live
27022705
for (let i = 0; i < 10; i++) {
27032706
if (i === 5) break; // exits the loop when i is 5
27042707
console.log(i);
@@ -2738,7 +2741,7 @@ The ternary operator is a shorthand for an `if-else` statement in JavaScript. It
27382741

27392742
To access the index of an element in an array during iteration, you can use methods like `forEach`, `map`, `for...of` with `entries`, or a traditional `for` loop. For example, using `forEach`:
27402743

2741-
```js
2744+
```js live
27422745
const array = ['a', 'b', 'c'];
27432746
array.forEach((element, index) => {
27442747
console.log(index, element);
@@ -2786,7 +2789,7 @@ switch (expression) {
27862789

27872790
Rest parameters in JavaScript allow a function to accept an indefinite number of arguments as an array. They are denoted by three dots (`...`) followed by the name of the array. This feature is useful for functions that need to handle multiple arguments without knowing the exact number in advance.
27882791

2789-
```js
2792+
```js live
27902793
function sum(...numbers) {
27912794
return numbers.reduce((acc, curr) => acc + curr, 0);
27922795
}
@@ -2808,22 +2811,26 @@ console.log(sum(1, 2, 3, 4)); // Output: 10
28082811

28092812
The spread operator (`...`) in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.
28102813

2811-
```js
2814+
```js live
28122815
// Copying an array
28132816
const arr1 = [1, 2, 3];
28142817
const arr2 = [...arr1];
2818+
console.log(arr2); // Output: [1, 2, 3]
28152819

28162820
// Merging arrays
28172821
const arr3 = [4, 5, 6];
28182822
const mergedArray = [...arr1, ...arr3];
2823+
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
28192824

28202825
// Copying an object
28212826
const obj1 = { a: 1, b: 2 };
28222827
const obj2 = { ...obj1 };
2828+
console.log(obj2); // Output: { a: 1, b: 2 }
28232829

28242830
// Merging objects
28252831
const obj3 = { c: 3, d: 4 };
28262832
const mergedObject = { ...obj1, ...obj3 };
2833+
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
28272834

28282835
// Passing array elements as function arguments
28292836
const sum = (x, y, z) => x + y + z;
@@ -3005,7 +3012,7 @@ A parameter is a variable in the declaration of a function, while an argument is
30053012

30063013
Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.
30073014

3008-
```js
3015+
```js live
30093016
// Function declaration
30103017
hoistedFunction(); // Works fine
30113018
function hoistedFunction() {

questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: Explain the concept of hoisting with regards to functions
66

77
Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.
88

9-
```js
9+
```js live
1010
// Function declaration
1111
hoistedFunction(); // Works fine
1212
function hoistedFunction() {
@@ -30,7 +30,7 @@ Hoisting is a JavaScript mechanism where variables and function declarations are
3030

3131
Function declarations are fully hoisted. This means you can call a function before its declaration in the code.
3232

33-
```js
33+
```js live
3434
hoistedFunction(); // Works fine
3535

3636
function hoistedFunction() {
@@ -42,7 +42,7 @@ function hoistedFunction() {
4242

4343
Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.
4444

45-
```js
45+
```js live
4646
nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function
4747

4848
var nonHoistedFunction = function () {
@@ -54,7 +54,7 @@ var nonHoistedFunction = function () {
5454

5555
Arrow functions behave similarly to function expressions in terms of hoisting.
5656

57-
```js
57+
```js live
5858
arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function
5959

6060
var arrowFunction = () => {

questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,26 @@ title: Explain the concept of the spread operator and its uses
66

77
The spread operator (`...`) in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.
88

9-
```js
9+
```js live
1010
// Copying an array
1111
const arr1 = [1, 2, 3];
1212
const arr2 = [...arr1];
13+
console.log(arr2); // Output: [1, 2, 3]
1314

1415
// Merging arrays
1516
const arr3 = [4, 5, 6];
1617
const mergedArray = [...arr1, ...arr3];
18+
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
1719

1820
// Copying an object
1921
const obj1 = { a: 1, b: 2 };
2022
const obj2 = { ...obj1 };
23+
console.log(obj2); // Output: { a: 1, b: 2 }
2124

2225
// Merging objects
2326
const obj3 = { c: 3, d: 4 };
2427
const mergedObject = { ...obj1, ...obj3 };
28+
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
2529

2630
// Passing array elements as function arguments
2731
const sum = (x, y, z) => x + y + z;
@@ -37,7 +41,7 @@ console.log(sum(...numbers)); // Output: 6
3741

3842
The spread operator can be used to create a shallow copy of an array. This is useful when you want to duplicate an array without affecting the original array.
3943

40-
```js
44+
```js live
4145
const arr1 = [1, 2, 3];
4246
const arr2 = [...arr1];
4347
console.log(arr2); // Output: [1, 2, 3]
@@ -47,7 +51,7 @@ console.log(arr2); // Output: [1, 2, 3]
4751

4852
You can use the spread operator to merge multiple arrays into one. This is a concise and readable way to combine arrays.
4953

50-
```js
54+
```js live
5155
const arr1 = [1, 2, 3];
5256
const arr3 = [4, 5, 6];
5357
const mergedArray = [...arr1, ...arr3];
@@ -58,7 +62,7 @@ console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
5862

5963
Similar to arrays, the spread operator can be used to create a shallow copy of an object. This is useful for duplicating objects without affecting the original object.
6064

61-
```js
65+
```js live
6266
const obj1 = { a: 1, b: 2 };
6367
const obj2 = { ...obj1 };
6468
console.log(obj2); // Output: { a: 1, b: 2 }
@@ -68,7 +72,7 @@ console.log(obj2); // Output: { a: 1, b: 2 }
6872

6973
The spread operator can also be used to merge multiple objects into one. This is particularly useful for combining properties from different objects.
7074

71-
```js
75+
```js live
7276
const obj1 = { a: 1, b: 2 };
7377
const obj3 = { c: 3, d: 4 };
7478
const mergedObject = { ...obj1, ...obj3 };
@@ -79,7 +83,7 @@ console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
7983

8084
The spread operator allows you to pass elements of an array as individual arguments to a function. This is useful for functions that accept multiple arguments.
8185

82-
```js
86+
```js live
8387
const sum = (x, y, z) => x + y + z;
8488
const numbers = [1, 2, 3];
8589
console.log(sum(...numbers)); // Output: 6

questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ title: Explain the difference in hoisting between `var`, `let`, and `const`
1414

1515
`var` declarations are hoisted to the top of their containing function or global scope. This means the variable is available throughout the entire function or script, even before the line where it is declared. However, the variable is initialized with `undefined` until the actual declaration is encountered.
1616

17-
```js
17+
```js live
1818
console.log(a); // Output: undefined
1919
var a = 10;
2020
console.log(a); // Output: 10
@@ -24,7 +24,7 @@ console.log(a); // Output: 10
2424

2525
`let` declarations are also hoisted to the top of their block scope, but they are not initialized. This creates a "temporal dead zone" (TDZ) from the start of the block until the declaration is encountered. Accessing the variable in the TDZ results in a `ReferenceError`.
2626

27-
```js
27+
```js live
2828
console.log(b); // ReferenceError: Cannot access 'b' before initialization
2929
let b = 20;
3030
console.log(b); // Output: 20
@@ -34,7 +34,7 @@ console.log(b); // Output: 20
3434

3535
`const` declarations behave similarly to `let` in terms of hoisting. They are hoisted to the top of their block scope but are not initialized, resulting in a TDZ. Additionally, `const` requires an initial value at the time of declaration and cannot be reassigned.
3636

37-
```js
37+
```js live
3838
console.log(c); // ReferenceError: Cannot access 'c' before initialization
3939
const c = 30;
4040
console.log(c); // Output: 30

0 commit comments

Comments
 (0)