Rückgabewert und Parameter?

Ich habe in JavaScript diese Beispiele nicht ganz verstanden:

function xyz(value)

oder

function xyz({value})

Was sind die Unterschiede und könnt ihr eventuell einfach Beispiele machen, damit es anschaulicher wirkt?

3 Antworten

Sören Stabenow

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Softwareentwickler / IT-Prozessmanager

24.01.2024, 15:20

Hallo Tekeli03,

die erste Funktion nimmt eine simple Variable als Parameter, kann in diesem Fall alles sein.

Die zweite Funktion definiert als Parameter "value", welches aus einem Objekt destrukturiert wird, welches ein Attribut "value" hat.

Beispiel:

function xyz(value) {
    console.log(value);
}

function xyz2({ value }) {
    console.log(value);
}

xyz(1); // Loggt: 1
xyz({ value: 1 }); // Loggt: { value: 1 }

xyz2(1); // Loggt undefined, da kein Objekt mit dem Attribut value übergeben wird
xyz2({ value: 1 }); // Loggt 1, da in dem Objekt, welches übergeben wird, ein Attribut value mit dem Wert 1 enthalten ist

Weitere Infos siehe Destructuring assignment - JavaScript | MDN (mozilla.org)

Woher ich das weiß:Studium / Ausbildung – Fachinformatiker /Anwendungsentwicklung

Lezurex

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

JavaScript, Programmieren & Softwareentwicklung, Software & Apps

24.01.2024, 15:20

Das obige Beispiel musst du so aufrufen:

xyz("Wert");

Das untere Beispiel so:

xyz({value: "Wert"});

Oben erhält die Funktion also direkt ihre Parameter, unten bekommt sie sie über ein Objekt. Die untere Variante hat bspw. den Vorteil, dass die Argumente beliebig angeordnet werden können und sie auch stets mit ihrem Namen angesprochen werden müssen.

Woher ich das weiß:Berufserfahrung – Informatiker Applikationsentwicklung

daCypher

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache

24.01.2024, 15:18

Bei der ersten Variante nimmt die Funktion das Argument direkt so, wie es ist und bei der zweiten Variante kriegt die Funktion ein Objekt, was einen Key namens "value" enthält, der dann innerhalb der Funktion als Variable "value" angesprochen werden kann.

Ähnliche Beiträge

JavaScript Parameter in Funktionen erklären?

const add = function (n){
return n + 5 }
Wie bekomme ich in den Parameter überhaupt einen Wert?Vllt auch in Praxisbeispielen? Würde ja nur durch ein Input funktionieren oder?

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

JavaScript, wie muss ich die Arrow-Funktion in diesem Kontext lesen?

Hallo Leute, ich habe hier ein Beispiel vor mir, das mich etwas verwirrt. Ich lerne gerade JavaScript und bin ehrlich gesagt bisher überhaupt kein Freund der Arrow-Funktion, weil ich die Schreibweise hässlich und unlesbar finde, aber da einige sie scheinbar gerne verwenden, muss ich sie mir wohl mal aneignen.

Was ich aus reiner Logik nicht nachvollziehbar finde: Wieso genau kommt nach => eine geöffnete geschweifte Klammer vor if?

Folgendes Beispiel:

function init() {
    window.addEventListener("keydown", (userInteraction) => {
      if (userInteraction.key !== undefined) {
        console.log(userInteraction.key);
      }

Ich würde das ohne Arrow-Funktion so machen:

function init() {
    window.addEventListener(            
        "keydown",                      //Name des Events
        userInteraction                 
    );
    if ( userInteraction.key !== undefined) {
        console.log(userInteraction.key);
    }
}

...zum Beitrag

JS Eventlistener mit Callback Parameter?

Hi, ich mache derzeit das Odins Project und hänge rein vom Verständnis an einem Code-Beispiel fest.

btn.addEventListener('click', function (e) {
  console.log(e);
});

btn.addEventListener --> schauen ob ein Event eintritt und dann eine function ausführen

"click"--> wenn der Button angeklickt wird

function (e)--> hier ist das Problem. ich versehe, dass es eine anonyme callback Funktion ist, aber nicht wieso sich der Parameter e auf den Button bezieht und ich damit den Button ansteuern kann. Versuche es seit 2 Tagen zu verstehen und bitte um eine einfache Erklärung. Im Internet steht, dass das ein Objekt vom EventListener ist aber darunter kann ich mir auch nicht wirklich etwas vorstellen.

...zum Beitrag

addEventListener nacheinander für mehrere Elemente?

Hi,

ich versuche eine Art Notitzen-App zu coden. Es gibt also eine Seitenleiste in der die verschiedenen Notizen zu sehen sind und wenn diese angeklickt werden, soll der jeweilige Text in der großen textarea angezeigt werden. Bisher habe ich einen Zähler als Variable, der beim Hinzufügen einer neuen Notiz erhöht wird, so wird für jeden neuen Button eine eigene ID erstellt und ich speichere auch alle Notizen in einem Array und kann diese anzeigen lassen. Allerdings muss ich zu jedem Button ein onclick-Element mit der jeweiligen Notiz als Parameter hinzufügen, um sie anzeigen zu können. Das mache ich mit addEventListener. Aber wenn ich einfach document.getElementById(idNames[field]).addEventListener("click", function(){showNotice(toShow)}); verwende, funktioniert der Listener nur für die als letztes hinzugefügte Notitz, wenn ich idNames.forEach(element => document.getElementById(element).addEventListener("click", function(){showNotice(toShow);})) zeigen alle Button beim Klicken natürlich dieselbe Notiz an.

Weiß jemand, was in meinen Fall zu tun ist?

...zum Beitrag

JavaScript warten, bis sich Variable ändern?

Ich habe ein Formular mit einem Submit-Button.

<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>

Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:

socket.emit('email-submit', value)

Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:

        socket.on('badEmailORphone', function(msg) {
            setBadEmailORphone(msg)
        });

In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.

Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?

Meine erste Theorie war:

Submit onClick:

while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen

...zum Beitrag

Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

count = Number(localStorage.getItem("count"));

counter.innerText = count;

localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

zurücksetzen = localStorage.setItem("count", 0)

count = Number(localStorage.getItem("count"));

zurücksetzen.addEventListener("click", aufnull);

incrementCounter();

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

...zum Beitrag

JavaScript, wofür steht in function(e) das e?

Hallo, ich lerne aktuell JS und habefolgendes Beispiel (siehe unten). Ich frage mich, wieso Lehrbücher in anonymen Funktionen solche Buchstaben als Parameter einbauen. Das e steht hier glaube ich für "Event", aber es ändert ja nichts an der Funktionsweise, wenn ich die Klammern leer stehen lasse, korrekt? Ich würde gerne verstehen, welche Vorteile sich für den Programmierer hier bieten. Am Anfang und auch jetzt fand ich es verwirrend, weil der Buchstabe ja nur symbolische Funktion zu haben scheint. Deswegen frage ich mich auch oft "Sollte ich das genauso handhaben oder eher weglassen". Dass es um ein Event geht, sieht man ja schon daran, dass Event-Listener und das Event change eingesetzt wird.



const checkbox = document.getElementById("remember");

checkbox.addEventListener(
    "change",                               
    function(e) {                           
        console.log(checkbox.value);        
        console.log(checkbox.checked);      
    }                 
);

...zum Beitrag

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zum Beitrag

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zum Beitrag

wie kann ich in javascript eine funktion ohne button auslösen?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

...zum Beitrag

wie kann ich in javaScript eine Funktion mit einem Tastendruck aufrufen?

Hi Leute,

ich programmiere einen Taschenrechner und möchte dafür eine funktion über die Tastatur aufrufen können. Also wenn ich zum Beispiel eine 2 drück, soll die function calculate(2); aufgerufen weden. Im internet habe ich viele Ergebnisse gefunden, die mich verwirrt haben.

Vielen Dank im Voraus😉

...zum Beitrag

PHP Funktion aufrufen?

Ich habe eine PHP Funktion in einer anderen ausgelagerten Datei und möchte diese jetzt in einer JavaScript Funktion aufrufen siehe Quellcode:

was mache ich falsch und bitte mit Lösungsvorschlägen


function PersonXSenden()
{
   InhaltPersonX = document.getElementById("X").value;
   console.log(InhaltPersonX);
   document.cookie = "XCookie = " + InhaltPersonX;
   test3();

   <?php
       include "Chat2.php";
       test();
   ?>
}

...zum Beitrag

JavaScript "window is not defined"?

Ich möchte dieses Beispiel hier in meine Next.js (React) App übernehmen:

https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dazu mein Next.js (React) Code, der eine weiße Seite wiedergibt und in der console schreibt: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen