Why is if/else statement executing the else part even when the condition is met

So I am running an if/else statement to check if the input value is the same with the title of the movies but for some reason, even when the title and the value are the same and the loop is supposed to stop, it still keeps running and executes the instruction on the else statement. Why is that?.

This is how my code looks at the moment

import React from 'react'
import styles from '@/styles/movies.module.css'
import Image from 'next/image';


export default function index() {
    const movies = [
        {
            title: 'Batman: the dark knight',
            releaseDate: '27 April 2007',
            rating: 9.8,
            image: "/pic11.jpg"
        },
        {
            title: 'Scrubs',
            releaseDate: '18 April 2012',
            rating: 4.7,
            image: "/pic12.jpg"
        },
        {
            title: 'Ted',
            releaseDate: '16 April 2002',
            rating: 9,
            image: "/pic13.png"
        },
        {
            title: 'Transformers',
            releaseDate: '27 April 2007',
            rating: 8,
            image: "/pic14.jpg"
        },
        {
            title: 'Batman: the dark knight rises',
            releaseDate: '27 April 2007',
            rating: 9.2,
            image: "/pic15.jpg"
        },
    ];
    const func = (arg) => {
        for(let i = 0; i < movies.length; i++){
            if(arg === movies[i].title){
                console.log(movies[i].title)
                console.log(`The movie ${movies[i].title} has been found`)
            } else {
                console.log(`The movie ${arg} has not been found!`)
            }
        }
    }


  return (
    <div className={styles.fightContainer}>
        <div className={styles.topStuff}>
            <h1>Movie Fight!</h1>
            <input 
                type="text" 
                placeholder='eg Batman....' 
                name='arg'
                className={styles.inputation} 
                onKeyUp={(e) => func(e.target.value)}
            />
        </div>
        <div className={styles.interactionContainer}>
            {movies.map(movie => (
                <div className={styles.fightCard} key={movie.rating}>
                    <div className={styles.imageContainer}>
                        <Image src={movie.image} width={130} height={100} className={styles.image} alt="img" />
                    </div>
                    <div className={styles.textContainer}>
                        <p>{movie.title}</p>
                        <p>{movie.releaseDate}</p>
                        <p>{movie.rating}</p>
                    </div>
                    <button>More info</button>
                </div>
            ))}
        </div>
        <h1>hey</h1>
    </div>
  )
}

Where could I be going wrong?.

>Solution :

You’re executing a for loop: as long as you don’t break it will continue executing.

In your example: if you write "Scrubs" it will correctly enter in the if statement inside the second loop of your function, but the for loop won’t stop unless you break it (that’s why you keep seeing all the console log of movie not found).

So you might add a break inside the if, like this:

const func = (arg) => {
    for(let i = 0; i < movies.length; i++){
        if(arg === movies[i].title){
            console.log(movies[i].title)
            console.log(`The movie ${movies[i].title} has been found`);
            break;
        } else {
            console.log(`The movie ${arg} has not been found!`)
        }
    }
}