javascript – Page 3 – Learners Store

Explain JavaScript Call() method with Examples.

The Call method is a predefined javaScript method.
In JavaScript, the call method is used to invoke(call) a function with a specified this context and arguments provided individually.

Example 1 : (Using Call() method to invoke a function and specifying the this value )

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}

const obj2 = {
    greet: 'Hello'
}

greeting.call(obj1);
greeting.call(obj2);

Output : 

Hi learnersstore.com
Hello learnersstore.com

Example 2 : (Using Call() method to invoke a function without first argument)

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}


greeting.call();

Output :

undefined learnersstore.com

Note: If we are omitting the first parameter, then it returns undefined.

Example 3 : (Using Call() method to invoke a function without first argument But with globalThis)

globalThis.greet = "Hello";

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}

greeting.call();

Output: 

Hello learnersstore.com

Example 4 : (Using Call() method to invoke a function with multiple arguments)

function display(name, age) {
    console.log(`Name : ${name}, Age: ${age}, Location: ${this.location}`);
}

const obj1 = {
    location: 'India',
}

display.call(obj1, "Smith", 26);

Output :

Name : Smith, Age: 26, Location: India

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.