Contrast in output between for and for..of loops demonstrated in an example

Question

Contrast in output between for and for..of loops demonstrated in an example

Here are two code snippets, one using a traditional for loop and the other using a for...of loop.

export function reverseWordsWithTraditionalForLoop(words: string): string {
  const singleWords: string[] = words.split(' ');
  for (let i = 0; i < singleWords.length; i++) {
    if (singleWords[i].length >= 5) {
    singleWords[i] = singleWords[i].split('').reverse().join('');
    }
  }
  return singleWords.join(' ');
}


export function reverseWordsWithForOfLoop(words: string): string {
   const singleWords: string[] = words.split(' ');
   for (let word of singleWords) {
     if (word.length >= 5)  {
       word = word.split('').reverse().join('');
     }
   }
   return singleWords.join(' ');
}

I'm curious about something - in the first snippet, my function

reverseWordsWithTraditionalForLoop

successfully reversed any word with a length greater than or equal to 5. However, in the second snippet, even though I modified the word elements directly, the array singleWords remained unchanged. Why is that?

typescript for-loop reverse for-of-loop

Answer 1

Answer №1

When utilizing the for loop, you are directly manipulating the entry in the array. Conversely, with the for of loop, you create a new variable word that is correctly reversed, but it only affects the variable itself and not the array. To achieve the same result as the for loop, you can do:

export function spinWords(words: string): string {
   const singleWords: string[] = words.split(' ');
   for (let word of singleWords) {
     if (word.length >= 5)  {
       const idx = singleWords.indexOf(word);  
       singleWords[idx] = word.split('').reverse().join('');
     }
   }
   return singleWords.join(' ');
}

While this code will work fine, it is generally recommended to use a for loop or the built-in forEach method (which also provides access to the index) for this particular scenario.

Try it out on Playground

Answer 2

When utilizing the for loop, you are directly manipulating the entry in the array. Conversely, with the for of loop, you create a new variable word that is correctly reversed, but it only affects the variable itself and not the array. To achieve the same result as the for loop, you can do:

export function spinWords(words: string): string {
   const singleWords: string[] = words.split(' ');
   for (let word of singleWords) {
     if (word.length >= 5)  {
       const idx = singleWords.indexOf(word);  
       singleWords[idx] = word.split('').reverse().join('');
     }
   }
   return singleWords.join(' ');
}

While this code will work fine, it is generally recommended to use a for loop or the built-in forEach method (which also provides access to the index) for this particular scenario.

Try it out on Playground

Contrast in output between for and for..of loops demonstrated in an example

Answer №1

Similar questions

I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

Sign up for the completion event within the datetime picker feature in Ionic 2

Mongodb Dynamic Variable Matching

The TypeScript error "Uncaught ReferenceError: require is not defined" occurs when the

What is the process for waiting on RxJS data and how should it be retrieved?

Launch another modal and then deactivate the initial modal

RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

Exporting an angular component as a module

The discord.js TypeScript is throwing an error stating that the 'index.ts' file is missing when trying to run 'ts-node index.ts'

What is the reason behind eslint not permitting the rule option @typescript-eslint/consistent-type-imports?

CdkVirtualFor does not display any content

Exploring JSONPath in Cypress

Is there a way for me to retrieve the header values of a table when I click on a cell?

Learning to implement the latest language features in JavaScript on older runtimes using TypeScript

SvgIcon is not a recognized element within the JSX syntax

Incorporating a Symbol into a Function

Generic type array does not display property

Error TS2394: Function implementation does not match overload signature in Typescript

Determine the type of sibling parameter

Modify the data type of an object member based on its original type