JavaScript wyswietla undefined po dodaniu \n do kodu

Dobry wieczor!

Musze stworzyc obiekt w javascript, ktory bedzie sie wysiwetlal w formacie:

tekst tekst tekst 
tekst tekst tekst 
tekst tekst tekst. 

Napisalam caly kod i natknelam sie na problem. kiedy nie uzywam \n to tekst pojawia sie w formacie:

tekst tekst tekst tekst tekst tekst tekst 

a jak dodalam \n do kodu to tekst pojawia sie w formacie

tekst tekst tekst undefined undefined 
tekst tekst tekst undefined undefined 

Nie mam zielonego pojecia skad nagle pojawilo sie undefined? Dopiero zaczynam z JavaSriptem wiec prosze o wyrozumialosc.

Zalaczam caly kod, moze ktos zobaczy w czym lezy problem.

function movies(title, genre, playtime) {
    this.title = title;
    this.genre = genre;
    this.playtime = playtime;

    return this.title + this.genre + this.playtime;
};

let movie1 = new movies(`'Top Gun. Maverick', 'Action/Drama', '130 minuter'`);
let movie2 = new movies(`\n'Nope', 'Thriller/ Sci-Fi', '131 minuter'`);
let movie3 = new movies(`\n'Elvis', 'Biografi/Drama/Musik', '159 minuter'`);
let movie4 = new movies(`\n'Bullet Train', 'Action/Thriller', '129 minuter'`);


document.getElementById('output').innerHTML = (movie1.title + ' ' + movie1.genre + ' ' + movie1.playtime);

document.getElementById('output').innerHTML += (movie2.title + ' ' + movie2.genre + ' ' + movie2.playtime);


document.getElementById('output').innerHTML += (movie3.title + ' ' + movie3.genre + ' ' + movie3.playtime);


document.getElementById('output').innerHTML += (movie4.title + ' ' + movie4.genre + ' ' + movie4.playtime);

Z gory dziekuje za pomoc.

\n'Nope'

to ci się nie powinno uruchomić w ogóle. w JS jak chcesz napisać nową linię, to robisz tak: '\nNope'.
natomiast nie wiem, czy faktycznie masz coś takiego w kodzie, czy się rozjechało, jak wrzuciłaś.

kod powinnaś wrzucać w ten sposób na forum:

```js
TUTAJ KOD
```

teraz widzę, że @Riddle już wrzucił to w te znaczniki.

let movie1 = new movies(`'Top Gun. Maverick', 'Action/Drama', '130 minuter'`);

Jeśli tak masz w kodzie, to przekazujesz tylko jeden argument:

`'Top Gun. Maverick', 'Action/Drama', '130 minuter'`

więc pozostałe argumenty są undefined.

Tak mi sie wyswietla kod. Wszystko jest jak powinno oprocz tego, ze nie mam pojecia skad wzielo sie undefined.

dkdKamila napisał(a):

ze nie mam pojecia skad wzielo sie undefined.

To sprawdź, ile argumentów rzeczywiście przekazujesz, dopisz console.log i sprawdź w konsoli w narzędziach developerskich przeglądarki:

function movies(title, genre, playtime) {
    
    console.log("title", title);
    console.log("genre", genre); 
    console.log("playtime", playtime); 
    
    this.title = title;
    this.genre = genre;
    this.playtime = playtime;
    // EDIT:
    // tego return w ogóle tu nie powinno być, zgodnie z tym, co @lhp napisał niżej
    // return this.title + this.genre + this.playtime;
};

Bo z tego co wrzuciłaś, to przekazujesz tylko jeden argument.

Ale możesz wywalić przez pomyłkę wrzucone(?) backticki:

let movie1 = new movies('Top Gun. Maverick', 'Action/Drama', '130 minuter');

Tutaj jest jeszcze jedna ciekawostka. Funkcja zwraca wartość. Zajrzałem do doc i okazuje się, że jeśli funkcja wywołana z operatorem new, zwraca wartość non-primitive to właśnie ta wartość zostanie zwrócona, w przeciwnym przypadku zostanie zwrócona nowa instancja obiektu.

Tak, to zawsze tak działało.

Chociaż dziwne, że mi to umknęło. Może dlatego, że zobaczyłem linijki typu this.title = title i już nie patrzyłem nawet na return (no bo zwykle się stosuje albo jeden albo drugi pattern).

czyli ta funkcja, żeby miała sens jako konstruktor, to powinna tak wyglądać (bez tego return)

function movies(title, genre, playtime) {   
    this.title = title;
    this.genre = genre;
    this.playtime = playtime;
};

a jeśli używać return, to już this nie trzeba:

function movies(title, genre, playtime) {
   return { 
     title: title,
     genre: genre,
     playtime: playtime 
   };
}

albo skrótowo:

function movies(title, genre, playtime) {
   return { 
     title,
     genre,
     playtime,
   };
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions

natomiast to działa tylko jak zwracasz obiekt, jak zwracasz np. stringa return this.title + this.genre + this.playtime, to zostanie to zignorowane.

niekoniecznie, wtedy można dać w tym przypadku new movies i też zwróci obiekt, jak sam napisałeś zresztą.

Tylko this będzie wskazywał na ten zwracany obiekt, a nie na instancję tworzoną przez operator new.

function movies(title, genre, playtime) {
    this.foo = 123;
    return { 
        title: title,
        genre: genre,
        playtime: playtime,
        t: this
    };
}

let mm = new movies(1,2,3); //{title:1, genre:2, playtime:3, t: { foo: 123 }}
​

mm === mm.t; //false
mm.foo; //undefined
mm.t.foo //123