javascript – Page 2 – Learners Store

Difference between map and flatmap in javascript with examples.

map() in JavaScript :

map() method creates a new Array by applying a function to each element of the original Array.
map() returns a new Array of the Same Length.
map() does not modify the original Array.

Example of returning an Array :

const array = [5, 10, 15, 20];
const newArray = array.map(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of returning nested Array Structure :

const array = [5, 10, 15, 20];
const nestedArray = array.map(n => [n, n * 2]);
console.log(nestedArray);

Output : 

[ [ 5, 10 ], [ 10, 20 ], [ 15, 30 ], [ 20, 40 ] ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.map(word => word ? [word] : []);
console.log(newArray);

Output :

[ [ 'Hello' ], [], [ 'World' ], [] ]

flatMap() in JavaScript :

flatMap() method first maps each element using a function, then flattens the result by one level.
Applies a function like map()
flattens one level deep of nesting.
useful to remove null/undefined from Array.

Example of returning an Array like map() :

const array = [5, 10, 15, 20];
const newArray = array.flatMap(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of nested structure into a flat Array :

const array = [5, 10, 15, 20];
const nestedArray = array.flatMap(n => [n, n * 2]);
console.log(nestedArray);

Output :

[ 5, 10, 10, 20, 15, 30, 20, 40 ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.flatMap(word => word ? [word] : []);
console.log(newArray);

Ouput : 

[ 'Hello', 'World' ]

NOTE : flatMap() only flattens one level deep.

TypeScript: Index signature for type ‘string’ is missing in type …

The error “Index signature for type ‘string’ is missing in type” occurs in TypeScript when we are trying to access a property using a dynamic string, but the object type doesn’t define an index signature to accommodate that.

For Example, The above Error will come in the following scenario

index.ts

type Person = {
  name: string;
  age: number;
};

const person: Person = { name: "Joy", age: 20 };

const key = "email";

console.log(person[key]); // Error: Index signature is missing

In the above example, typescript throws an error because key could be any string, but the Person type only explicitly defines name and age. To fix this we can add an index signature to the type as follows.

index.ts

type Person = {
  name: string;
  age: number;
  [key: string]: string // index signature allows only string values
};

const person: Person = { name: "Joy", age: 20, email: "joy@gmail.com" };

const key= "email";

console.log(person[key]); // No Error

Javascript program to find the sum of elements in a sequence up to a given range.

const arr = [4, 7, 6, 1, 2, 8];
const range = 5;
let sum = 0;

function sumUpToRange(arr, range) {
    if(range > arr.length) {
        range = arr.length;
    }
    
    for(let i = 0; i < range; i++) {
        sum +=arr[i];
    }
    
    return sum;
}

console.log(sumUpToRange(arr, range));

Output: 

20

From the above program we need to ensure that the range should not exceed the length of the array. If it is exceeding we will assign the range to the array length.
Given range is 5. So the sum of first five elements should calculate as 4 + 7 + 6 + 1 + 2 which is equal to 20.

We can also write this program by using slice and reduce methods as follows

const arr = [4, 7, 6, 1, 2, 8];
const range = 5;

function sumUpToRange(arr, range) {
    return arr.slice(0, range).reduce((acc, num) => acc + num, 0)
}

console.log(sumUpToRange(arr, range));

Here arr.slice(0, range) extracts the elements from 0 to 5. i.e, [4, 7, 6, 1, 2];
reduce method starts with an initial value of 0 and adds each number to the accumulator and returns 20 as the output.

JavaScript code to find How many times the highest score and the lowest score record is broken

const scores = [7, 5, 2, 16, 23, 4, 16, 4, 25, 20];

let highestScore  = scores[0];
let lowestScore = scores[0];
let highScoreRecordBreakCount = 0;
let lowScoreRecordBreakCount = 0;

for(let i = 1; i < scores.length; i++) {
    if(scores[i] > highestScore ) {
        highestScore = scores[i];
        highScoreRecordBreakCount++;
    }
    if(scores[i] < lowestScore) {
        lowestScore = scores[i];
        lowScoreRecordBreakCount++;
    }
}

console.log('highScoreRecordBreakCount:', highScoreRecordBreakCount);
console.log('lowScoreRecordBreakCount:', lowScoreRecordBreakCount);

Output:

highScoreRecordBreakCount: 3
lowScoreRecordBreakCount: 2

From the given scores initial score is 7 and the next highest score Record is 16 and this record is broken by the score 23 and this record is broken by 25. So total 3 times the highest score record broken.
In the same way the initial score is 6 and the next lowest record is 5 and this record is broken by the score 2. So total 2 times the lowest score record broken.

Find the largest and smallest numbers in an array in JavaScript using Math.max() and Math.min().

const numbers = [2, 8, 82, 51, 6];
const largestNumber = Math.max(...numbers);
const smallestNumber = Math.min(...numbers);

console.log('largestNumber is', largestNumber);
console.log('smallestNumber is', smallestNumber);

Output:

largestNumber is 82
smallestNumber is 2

Here, spread operator converts an array into individual arguments.
So Math.max and Math.min expect a list of arguments, not an array directly.
For small and medium size arrays Math.max and Math.min are the simplest and most effective way.
For Large Arrays we need to use Array.reduce() for better performance.
And most importantly Math.max and Math.min works only for array of numbers.