Dealing with a Typescript challenge of iterating over a tuple array to extract particular values

Question

Dealing with a Typescript challenge of iterating over a tuple array to extract particular values

I am struggling with writing a function that extracts names from an array of tuples, where each tuple includes a name and an age. My current attempt looks like this:

type someTuple = [string, number]

function names(namesAndAges: someTuple[]) {
  let allNames: string[]
  allNames.push(namesAndAges.forEach( nameAndAge => nameAndAge[0]))
  
  return allNames
}

However, when I test it with the following input:

names([['Amir', 34], ['Betty', 17]]);

I encounter the error message:

type error: type error: Variable 'allNames' is used before being assigned.

I'm unsure what's causing this issue. Any insights on what might be wrong?

typescript

Answer 1

Answer №1

You forgot to specify that allNames is an array, so make sure to define it like this:

let allNames: string[] = []

If you want to store all names in an array, your function should look something like this:

type PersonTuple = [string, number]

function getNames(personData: PersonTuple[]) {
  let allNames: string[] = []
  personData.forEach( item => 
    allNames.push(item[0])
  )
  return allNames
}

getNames([['John', 30], ['Emily', 25]]);

Playground

Answer 2

You forgot to specify that allNames is an array, so make sure to define it like this:

let allNames: string[] = []

If you want to store all names in an array, your function should look something like this:

type PersonTuple = [string, number]

function getNames(personData: PersonTuple[]) {
  let allNames: string[] = []
  personData.forEach( item => 
    allNames.push(item[0])
  )
  return allNames
}

getNames([['John', 30], ['Emily', 25]]);

Playground

Answer 3

Answer №2

You could enhance the readability of your code by utilizing the .map function in this scenario

function extractNames(namesAndAges: [string, number][]): string[] {
  return namesAndAges.map(nameAndAge => nameAndAge[0]);
}

extractNames([['Amir', 34], ['Betty', 17]]);

Check out TS Playground for a live demonstration

Answer 4

You could enhance the readability of your code by utilizing the .map function in this scenario

function extractNames(namesAndAges: [string, number][]): string[] {
  return namesAndAges.map(nameAndAge => nameAndAge[0]);
}

extractNames([['Amir', 34], ['Betty', 17]]);

Check out TS Playground for a live demonstration

Dealing with a Typescript challenge of iterating over a tuple array to extract particular values

Answer №1

Answer №2

Similar questions

I'm feeling lost when it comes to rendering these components using styled-components in reactjs

Developing a Typescript npm package

Filtering an RXJS BehaviorSubject: A step-by-step guide

There has been no answer provided. Could this be due to being utilized in an asynchronous function that was not returned as a promise?

Guide to implement editable columns in Angular 4 with a click functionality

Ways to retrieve a variable from a separate TypeScript document

Analyzing arrays and object key/value pairs based on a specific value in javascript

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

Modify the BehaviorSubject upon clicking or focusing on the input

Attempting to incorporate alert feedback into an Angular application

Can Autocomplete in Angular4+ support multiple selection options?

Is it possible to utilize an InterleavedBufferAttribute for index values?

Uniform retrieval function for interaction with API

The attribute 'map' is not found on the object of type 'List'

Oops! The last loader did not provide a Buffer or String as expected

In Vue3, when using the `script setup` with the `withDefaults` option for a nested object, its attributes are marked as required. How can this issue

Determine the reference type being passed from a third-party component to a consumer-side component

Automating the scrolling function in Angular 2 to automatically navigate to the bottom of the page whenever a message is sent or opened

Exploring Angular: Understanding Events and Addressing the Error Message "subscribe is not a function"

A guide on capturing the response in the POST method within Angular 7