Kevin Powell - Community•16mo ago

How to select certain Index in Array?

Hello, Let’s say for example I have an array such as: let sample = [“5”,”+”,”6”]; How would I be able to add these together based on the operator? (Could be -, +, /, *) I’m assuming I’ll have to loop through Array, find the first operator, then go back an index and add to the index after the operator?

159 Replies

Joao•16mo ago

Assuming the array is always going to be a simple binomial expression, then you already know the operation is at index 1. But as this is still a string, you need to have a switch statement or some other mechanism to convert it into an valid JavaScript expression:

const sample = ["5", "+", "6"];

switch (sample[1]) {
  case "+":
    return Number(sample[0]) + Number(sample[2]);

  case "-":
    return Number(sample[0]) * Number(sample[2]);

  case "*":
    return Number(sample[0]) * Number(sample[2]);

  case "/":
    return Number(sample[0]) / Number(sample[2]);
}

const sample = ["5", "+", "6"];

switch (sample[1]) {
  case "+":
    return Number(sample[0]) + Number(sample[2]);

  case "-":
    return Number(sample[0]) * Number(sample[2]);

  case "*":
    return Number(sample[0]) * Number(sample[2]);

  case "/":
    return Number(sample[0]) / Number(sample[2]);
}

If it's a bit more complicated than than, for example 5 + 6 * 2 then you have to recursively apply this same method, such that you are always evaluating a binomial expression (left and right side). The tricky part comes when you need to do some operations with higher priority.

MattOP•16mo ago

What if the array was with multiple operations? I figured I would need to set up an additional array (with all operation types, +, -, *, /), check the expression array for an operation, then do the corresponding operation based on the number before & after the operation type in the array Would I check for the operator index then do ++ to the index, grab the number, then do — and grab that number and handle the expression?

Joao•16mo ago

That's the tricky part, indeed. What you are describing sounds a whole lot like an actual code interpreter which is how things like programming languages are transformed from a simple string of text to meaningful tokens. At least that's the only way I know how to, but I'm sure there are a bunch of different clever ways. If you want to go the simple route of using nothing but arrays as you are doing right now, the difficult part is determine the operator precedence.

MattOP•16mo ago

I might be asking bad questions, but my end result is trying to make a calculator. I’m new to JS & haven’t read any solutions. Trying to do this from scratch with what I think may work

Joao•16mo ago

No, not at all. You are most definitely on the right track. But making an interpreter is something I would reserve for later on. For now, I agree trying to stick to the basics is best. To be honest, I've never tried it this route myself either.

MattOP•16mo ago

I could be over / under complicating, Idek. Just giving it a go. I have the basic infrastructure made, now it’s just about handling the expressions Is there anyway else you could recommend me going about this, maybe without an array? I don’t think I’ll be able to handle complicated equations just looking to do simple stuff for now

Joao•16mo ago

So far, this is what I have but it doesn't account for operator precedence:

function calculate(expression) {
  if (expression.length === 0) return 0;

  const [left, op, ...right] = expression;

  if (left && !op) return Number(left);

  switch (op) {
    case "+":
      return Number(left) + calculate(right);

    case "-":
      return Number(left) - calculate(right);

    case "*":
      return Number(left) * calculate(right);

    case "/":
      return Number(left) / calculate(right);
  }
}

console.log(calculate(["5", "+", "6"]));
console.log(calculate(["5", "+", "6", "*", "8"]));
console.log(calculate(["5", "+", "6", "*", "8", "*", "2"]));
console.log(calculate(["5", "+", "6", "*", "8", "+", "2"]));

function calculate(expression) {
  if (expression.length === 0) return 0;

  const [left, op, ...right] = expression;

  if (left && !op) return Number(left);

  switch (op) {
    case "+":
      return Number(left) + calculate(right);

    case "-":
      return Number(left) - calculate(right);

    case "*":
      return Number(left) * calculate(right);

    case "/":
      return Number(left) / calculate(right);
  }
}

console.log(calculate(["5", "+", "6"]));
console.log(calculate(["5", "+", "6", "*", "8"]));
console.log(calculate(["5", "+", "6", "*", "8", "*", "2"]));
console.log(calculate(["5", "+", "6", "*", "8", "+", "2"]));

MattOP•16mo ago

Just curious. Switch vs If statements. What’s the difference? Is using Switch for something like this more practical since there’s specified “cases” ie operations

Joao•16mo ago

Very little, it's basically a simpler way to write a lot of if statements.

MattOP•16mo ago

Okay makes sense

Joao•16mo ago

In this case, for example, it could be useful since there may be ways of writing the same operations. For example, multiplication could be: *, x or ^. In this case you could write it simply like:

switch (op) {
  case "+":
    return Number(left) + calculate(right);

  case "-":
    return Number(left) - calculate(right);

  case "*":
  case "x":
  case "^":
    return Number(left) * calculate(right);

  case "/":
    return Number(left) / calculate(right);
}

switch (op) {
  case "+":
    return Number(left) + calculate(right);

  case "-":
    return Number(left) - calculate(right);

  case "*":
  case "x":
  case "^":
    return Number(left) * calculate(right);

  case "/":
    return Number(left) / calculate(right);
}

MattOP•16mo ago

That would be similar to using || in an If?

Joao•16mo ago

Yes, exactly. But to me at least this is much cleaner.

MattOP•16mo ago

Okay cool thanks I appreciate the explanation. I’ll upload my code pen later tonight and show what I have for a calculator

Joao•16mo ago

Now I'm curious too...

dys 🐙•16mo ago

When I did a calculator a while back I converted from infix "3 + 4" to postfix "+ 3 4" format for which there is a standard algorithm. It handles things like order of operations and parentheses and whatnot. Postfix is much easier to solve programatically. You go right to left. If an entry is a number you push it on a stack. If an entry is an operator you pop the appropriate number of operands off the stack and push the result back on. At the end you should have one thing left on the stack: the answer.

Joao•16mo ago

Yes, definitely. I also did it once using a similar approach with an interpreter and that gives you the most flexibility so you can construct really complex expressions. With just the basic structures you can also do it but it gets complicated quickly, even without accounting for parenthesis and such. @-Matt So I was curious how to implement this and it's definitely doable, but not all that intuitive, and the more operators you want to support the more complex it becomes. Although I think it's a great exercise anyway. If you need help let me know, I've been able to come up with something that supports the basic operations and parenthesis. It's not pretty, and I'm sure there are plenty of ways to make it more efficient, but it works. For reference I wrote some test at the end of the file and these all pass:

assert.throws(
  () => calculate(["(", 2, "+", 2]),
  "Error: Malformed expression!",
);
assert.throws(
  () => calculate([")", 2, "+", 2]),
  "Error: Malformed expression!",
);
assert.throws(() => calculate([2, "+", ")"]), "Error: Malformed expression!");

assert(calculate([]), 1);
assert(calculate([23]), 23);
assert(calculate([5, "+", 6]), 11);
assert(calculate([5, "+", 6, "*", 8]), 53);
assert(calculate([5, "*", 6, "+", 8]), 38);
assert(calculate([5, "+", 6, "*", 8, "*", 2]), 101);
assert(calculate([5, "*", 6, "+", 8, "*", 2]), 46);
assert(calculate([5, "*", 6, "/", 8, "*", 2]), 7.5);
assert(calculate([5, "*", 6, "/", "(", 8, "*", 2, ")"]), 1.875);
assert(calculate([5, "*", 6, "-", 8, "/", 2]), 26);
assert(calculate([5, "^", 2]), 25);
assert(calculate(["(", 5, "+", 6, ")", "*", 8]), 88);
assert(calculate(["(", 5, "+", "(", 6, "+", 2, "^", 2, ")", ")", "*", 8]), 120);
assert(calculate(["(", 5, "*", "(", 6, "+", 2, "^", 2, ")", ")", "*", 8]), 400);

console.log("All assertions passed!");

assert.throws(
  () => calculate(["(", 2, "+", 2]),
  "Error: Malformed expression!",
);
assert.throws(
  () => calculate([")", 2, "+", 2]),
  "Error: Malformed expression!",
);
assert.throws(() => calculate([2, "+", ")"]), "Error: Malformed expression!");

assert(calculate([]), 1);
assert(calculate([23]), 23);
assert(calculate([5, "+", 6]), 11);
assert(calculate([5, "+", 6, "*", 8]), 53);
assert(calculate([5, "*", 6, "+", 8]), 38);
assert(calculate([5, "+", 6, "*", 8, "*", 2]), 101);
assert(calculate([5, "*", 6, "+", 8, "*", 2]), 46);
assert(calculate([5, "*", 6, "/", 8, "*", 2]), 7.5);
assert(calculate([5, "*", 6, "/", "(", 8, "*", 2, ")"]), 1.875);
assert(calculate([5, "*", 6, "-", 8, "/", 2]), 26);
assert(calculate([5, "^", 2]), 25);
assert(calculate(["(", 5, "+", 6, ")", "*", 8]), 88);
assert(calculate(["(", 5, "+", "(", 6, "+", 2, "^", 2, ")", ")", "*", 8]), 120);
assert(calculate(["(", 5, "*", "(", 6, "+", 2, "^", 2, ")", ")", "*", 8]), 400);

console.log("All assertions passed!");

MattOP•16mo ago

Interesting I honestly wrote something completely different. I’ll post it shortly here

Joao•16mo ago

These are just the tests to prove that it works, and how you'd use it. I'm curious to see how you did it, please share when it's done! 👍

ἔρως•16mo ago

this is a good situation to use "eval" in or, use a function

MattOP•16mo ago

https://codepen.io/Matt-CopOffMatt/pen/yLGMBvQ

Matt (CopOffMatt)

CodePen

yLGMBvQ

...

MattOP•16mo ago

I'm stuck on trying to handle larger expressions. Currently, it's able to do the math for single expression, such as 1+1, 2x2, 4/2, etc I'm still new to JavaScript and I'm trying to just tackle projects to learn. My method for doing this might not be the right way, but if you guys can please give me some constructive critism. What I was trying to do is: Get the sum after two number inputs, track the first operator input, do math, then reset and add any additional numbers and operators to the equation. @joao6246@epic2937@dysbulic

ἔρως•16mo ago

what i would do is to write a function that does the work for me, using the `new Function("return [...]") or something like that

MattOP•16mo ago

Sorry, I'm a bit confused

ἔρως•16mo ago

so, you have an array that's in the format [Number, String, Number], right?

MattOP•16mo ago

I separated the operator and numbers into separate Arrays It should be an array with strings (that I convert to number to calculate) and variable with operator

ἔρως•16mo ago

what do you actually have? all you've shown, so far, was this, which is in the format i said before

MattOP•16mo ago

Here This is the codepen with the code I wrote I wrote things differently because I couldn’t figure out a solution with my original thoughts

ἔρως•16mo ago

so, what's the problem with the code? it seems to work fine

MattOP•16mo ago

I don’t know how to handle larger expressions Such as 5+5-10 10*20-2, etc

ἔρως•16mo ago

you don't in the place of the first value, you put the result of the last expression so, instead of calculating 10*20-2, you calculate 10*20 and then 200-2 which is exactly how it's working right now

MattOP•16mo ago

I believe just the calculation function is where I’m going wrong because of checking first two index, when Adding a 3rd number leaves a missing index I should put the total as the first index Is my solution for this sort of project the wrong way to go about it?

ἔρως•16mo ago

honestly, it's a simple calculator and while you're not doing it the most optimal super mega ultimately perfectly perfect, it's working

MattOP•16mo ago

Hmm okay. I appreciate your input.

ἔρως•16mo ago

if you want a proper code review, i can give you one the use of global variables is a very bad idea you're manipulating html instead of using an input, which allows you to type a number the ui could be re-written to be entirely event-driven with a single event in a form, instead of 16 click events on the buttons

MattOP•16mo ago

instead of manipulating HTML should I do something like: expression.setAttribute('value', number); and change expression to be an input field rather div?

ἔρως•16mo ago

no, if it is an input, you can do expression.value = 'new value'

MattOP•16mo ago

is it better practice in this instance to avoid using innerHTML?

ἔρως•16mo ago

well, in this case, it doesn't matter

MattOP•16mo ago

Trying to understand when you say not to use global variables here. Do you mean variables that can be used across entire scope, or ones that are grabbing data such as innerHTML

ἔρως•16mo ago

but using innerHTML causes a redraw on the entire element, and all the ccontents are thrown away and the browser has to re-parse and re-calculate the new styles for what you're setting if you change the value of an input, there's no html re-parsing and a lot less of work needs to be done but honestly, in this case, it doesn't matter

MattOP•16mo ago

ah so, there could be an instance where there's latency due to browser having to reprocess HTML?

ἔρως•16mo ago

it's a simple calculator that does calculator stuff no, latency is network-related

MattOP•16mo ago

yeah, I'm not gonna go to crazy optimizing. I'm using this example to understand context for future problems

ἔρως•16mo ago

it's just nitpicky stuff in this case, how do you delete a number? imagine i wanted to type 69 but typed 690

MattOP•16mo ago

I added the functionality for clearing entire expression but not specific numbers

ἔρως•16mo ago

which is fine, but if you have an input, this is something you get for free

MattOP•16mo ago

thats true i guess people could delete at will and then just process whatever their entry is instead of based on each button click

ἔρως•16mo ago

that works too

MattOP•16mo ago

if you don't mind me asking what's the difference between

for (let i = 0; i < btns.length; i++) {
}

for (let i = 0; i < btns.length; i++) {
}

and

forEach(btns) {}

forEach(btns) {}

ἔρως•16mo ago

but if you think about how a calculator works, it has these features: - numbers - period - addition - subtraction - multiplication - division - equals sign - clear button - clear everything button one's a for loop, the other is a foreach, and you don't have to index anything in the buttons with the foreach also, it's a lot more readable to use the foreach, instead of the for loop

MattOP•16mo ago

ahh okay. So you can't reference a specific index with foreach? basically just loops an entire array where you can do specific checks of items without being able to re-reference them by index?

ἔρως•16mo ago

basically, yes you do get the index as the 2nd argument and the array as the 3rd argument however, im not sure if you have access to array-like objects in the 3rd argument, like a node list

MattOP•16mo ago

for (let i = 0; i < btns.length; i++) { } forEach(element, index, btns) { } I ran a test to see how forEach would output and when I put in the array as the argument, it outputted each entry in array as expected. Just curious, how does it know when to do element, index, and array arguments? What if you wanted to specify just index and array, or element and array, etc. Does it assume if an argument is defined as an array within scope that its the array argument?

ἔρως•16mo ago

i don't understand your question

MattOP•16mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

The forEach() method of Array instances executes a provided function once for each array element.

MattOP•16mo ago

I'm reading the mozille doc right now trying to understand the parameters

ἔρως•16mo ago

that's a method of the Array prototype it takes a function

MattOP•16mo ago

Ahh, so it would be

array.forEach(item, index){
}

array.forEach(item, index){
}

ἔρως•16mo ago

like this:

[1, 2, 3, 4].forEach((num, index, array) => console.log([num, index, array]))

[1, 2, 3, 4].forEach((num, index, array) => console.log([num, index, array]))

some array-like objects support this too for example, doing document.querySelectorAll() returns a NodeList which is an array-like object (has a length property and increasing elements from 0 to length - 1)

MattOP•16mo ago

that makes more sense I'm sorry for bugging you with all these questions NodeList & Arrays are treated the same, just NodeList are composed of elements from the document?

ἔρως•16mo ago

it's fine, we all learn by asking and trying not exactly but both expose a forEach method that you can use i think it also supports `for(var x of NodeList) {...}´ but i'm not sure

MattOP•16mo ago

Okay cool, im going to read more about this to fully understand the differences Thank you again for answering my questions I really appreciate it I'm gonna re-write my solution for this calculator and incorporate some of your feedback as well 👍

ἔρως•16mo ago

don't just take my input: take others' as well I've just re-implemented this, in a different way:

<form action="javascript:void(0)" id="calc">
  <fieldset>
    <input type="number" name="number" value="0">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="1">
    <input type="submit" name="op" value="2">
    <input type="submit" name="op" value="3">
    <input type="submit" name="op" value="+">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="4">
    <input type="submit" name="op" value="5">
    <input type="submit" name="op" value="6">
    <input type="submit" name="op" value="-">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="7">
    <input type="submit" name="op" value="8">
    <input type="submit" name="op" value="9">
    <input type="submit" name="op" value="*">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="/">
    <input type="submit" name="op" value="0">
    <input type="submit" name="op" value="=">
    <input type="submit" name="op" value="c">
  </fieldset>
</form>

<form action="javascript:void(0)" id="calc">
  <fieldset>
    <input type="number" name="number" value="0">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="1">
    <input type="submit" name="op" value="2">
    <input type="submit" name="op" value="3">
    <input type="submit" name="op" value="+">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="4">
    <input type="submit" name="op" value="5">
    <input type="submit" name="op" value="6">
    <input type="submit" name="op" value="-">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="7">
    <input type="submit" name="op" value="8">
    <input type="submit" name="op" value="9">
    <input type="submit" name="op" value="*">
  </fieldset>
  <fieldset>
    <input type="submit" name="op" value="/">
    <input type="submit" name="op" value="0">
    <input type="submit" name="op" value="=">
    <input type="submit" name="op" value="c">
  </fieldset>
</form>

var last = '0';
var op = '+';
var repeat = false;
var form = document.getElementById('calc');
var input = form.querySelector('input[type="number"]');

form.addEventListener('submit', function(e){
    e.preventDefault();
  
  var button = e.submitter;
  
  switch(button.value) {
      case 'c':
        if(input.value !== '0') {
            input.value = '0';
      } else {
          last = '0';
        op = '+';
      }
      
      repeat = false;
      break;
    
    case '0':
        if(input.value === '0') {
          break;
      }
      
    case '1': case '2': case '3':
    case '4': case '5': case '6':
    case '7': case '8': case '9':
        if(last === input.value || input.value === '0') {
          input.value = button.value;
      } else {
            input.value += button.value;
      }
      
      repeat = false;
      break;
    
    case '+': case '-':
    case '/': case '*':
        op = button.value;
      last = input.value;
      repeat = false;
      break;
    
    case '=':
        if(repeat) {
          input.value = eval(last + ' ' + op + ' ' + input.value);
      } else {
          var value = input.value;
            input.value = eval(value + ' ' + op + ' ' + last);
        last = value;
      }
      
      repeat = true;
      break;
  }
});

var last = '0';
var op = '+';
var repeat = false;
var form = document.getElementById('calc');
var input = form.querySelector('input[type="number"]');

form.addEventListener('submit', function(e){
    e.preventDefault();
  
  var button = e.submitter;
  
  switch(button.value) {
      case 'c':
        if(input.value !== '0') {
            input.value = '0';
      } else {
          last = '0';
        op = '+';
      }
      
      repeat = false;
      break;
    
    case '0':
        if(input.value === '0') {
          break;
      }
      
    case '1': case '2': case '3':
    case '4': case '5': case '6':
    case '7': case '8': case '9':
        if(last === input.value || input.value === '0') {
          input.value = button.value;
      } else {
            input.value += button.value;
      }
      
      repeat = false;
      break;
    
    case '+': case '-':
    case '/': case '*':
        op = button.value;
      last = input.value;
      repeat = false;
      break;
    
    case '=':
        if(repeat) {
          input.value = eval(last + ' ' + op + ' ' + input.value);
      } else {
          var value = input.value;
            input.value = eval(value + ' ' + op + ' ' + last);
        last = value;
      }
      
      repeat = true;
      break;
  }
});

it allows to add, divide, multiply and subtract, plus will repeat the last operation if you keep pressing = it's ugly, but this is just a concept in this case, if you do 5+10, and then you keep pressing =, it does 15+10, 25+10, 35+10... oh, and if you click c more than once, it clears everything, like a real calculator

MattOP•16mo ago

Cool! Thank you. I actually was curious how to implement a switch vs if Just wondering, is considered good practice to use var over let?

ἔρως•16mo ago

depends on what you want to do

MattOP•16mo ago

I've read something somewhere where var is suppose to be retired

ἔρως•16mo ago

why would they do that?

MattOP•16mo ago

isnt var = let?

ἔρως•16mo ago

var, let and const are slightly different var is available in all the scopes inside the current scope and it does get outside scope blocks

MattOP•16mo ago

in your example button can be used outside of the event listener? because it's declared as var rather than let?

ἔρως•16mo ago

ἔρως•16mo ago

here's a big difference all x = 4 are inside a scope block

MattOP•16mo ago

Hmm okay that makes sense is it bad practice to use let in global scope?

ἔρως•16mo ago

honestly, i wouldn't put anything in a global scope

MattOP•16mo ago

maybe just const?

ἔρως•16mo ago

nothing everything in the global scope will be assigned to the window object, in a browser meaning, it's a global variable now since you're handling elements, you can add the important functionality inside the onload event or on the onready event

MattOP•16mo ago

this, for example, has variables in global scope would you restructure to have inside of the submit listener or like youre saying now, have an additional function outside to run script when document is loaded?

ἔρως•16mo ago

in this case, it's lazyness from me, since i was just churning out the concept inside a jsfiddle everything wrapped in an onload or onready event it depends on what you want, but any is fine

MattOP•16mo ago

Okay, that's good to note. Thanks for letting me know just trying to make sense of everything 👍 really appreciate your feedback

ἔρως•16mo ago

you're welcome by the way, don't take my version as gospel it's just a re-implementation of what you wrote, in a different way

MattOP•16mo ago

I'm in the middle of rewriting, but taking some of your comments & suggestions into account. It's awesome to be able to see another solution to see how things could be done differently

Joao•16mo ago

What's the fun in that? The whole point of writing a calculator is that you come up with that logic yourself 🙂

ἔρως•16mo ago

that's the fun way of doing it, not the easy way

Joao•16mo ago

Exactly, that's the point! The world doesn't need more calculators, we do it for fun and learning 🤓

ἔρως•16mo ago

i did it mostly to show that you can write it in a simplified way, without touching arrays and stuff i mean, with my implementation, it would be just another switch block that does nothing new

MattOP•16mo ago

Yeah. Thanks again for feedback I really do appreciate it. Honestly, I’ve been trying to learn JS on and off for 10+ years now… lol

ἔρως•16mo ago

well, the best way to learn is by doing it

MattOP•16mo ago

On and off of course, could never really stick to it. I remember being like 8 doing stuff with Jquery lol

ἔρως•16mo ago

jquery is still pretty useful browsers are a huge mess yeah, you can do a lot of stuff with just typescript, but it's still a messy mess

MattOP•16mo ago

Typescript is just a spin off of JS right

Joao•16mo ago

Well, mmhhh I disagree with that

MattOP•16mo ago

Microsofts JS?

ἔρως•16mo ago

no, it's a superset imagine typescript as being a buffed up javascript

Joao•16mo ago

yeah, you can do a lot of stuff with just typescript, but it's still a messy mess

JavaScript alone is standardized and all browser support most features. Only a few things are move verbose, which you can hide away with a few functions.

MattOP•16mo ago

It’s basically an extension to JS?

ἔρως•16mo ago

no, it's a superset it's something on top of javascript all javascript is valid typescript, but not all typescript is valid javascript

Joao•16mo ago

Is this your final version or did you improve it since you wrote it?

MattOP•16mo ago

Hmm good to know for future. Def won’t be touching it anytime soon I’m working on another version now outside of codepen, I’ll upload it in about a half hour or so

ἔρως•16mo ago

you kinda should, if you can

MattOP•16mo ago

I need to learn about these different types of functions tbh Asyn and some of the other stuff are quiet confusing to me

Joao•16mo ago

Yes, don't worry about TypeScript.

ἔρως•16mo ago

async? oh boy...

MattOP•16mo ago

Lol

MattOP•16mo ago

ἔρως•16mo ago

async/await is just promises in a coat an async function returns a promise, but the await forces the code to wait until the promise is resolved

MattOP•16mo ago

So it’s a function that waits for result to proceed ?

ἔρως•16mo ago

MattOP•16mo ago

So maybe in context, if you call API with async it won’t proceed until api returns data?

ἔρως•16mo ago

or until you get an error but, it's a pain to write anything that's async and use await i just give up and use promises but then, my code looks no better than having a callback chain

MattOP•16mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

MattOP•16mo ago

https://tenor.com/view/head-spinning-my-is-overwhelmed-gif-24700382

Tenor

MattOP•16mo ago

Reading this makes my head go ^ lol

ἔρως•16mo ago

well, it's very simple a promise takes a function that you execute, to do some work that function receives 2 arguments: a function to fulfill and another function to reject the promise for example, if you do a calculation and it returns something unexpected, you can just run the 2nd argument, or throw an exception you then use the then method, which accepts a function that receives 1 parameter, which is the data that was sent from the fulfill function you can chain those, and each then will get the updated data at the end of all the thens, you can have a catch method, which acts like a catch(exception){...} block

MattOP•16mo ago

Here’s an example on Mozilla

MattOP•16mo ago

The examples Mozilla gives usually just confuse me. I kindve understand the way you’re explaining but it doesn’t make sense how they present it

ἔρως•16mo ago

they present it a bit differently

MattOP•16mo ago

If the first .then is true and promise is fulfilled, what’s suppose to happen?

ἔρως•16mo ago

that question doesn't make sense in essense, you're asking "if i arrive at my destination, how do i turn my car on at home?"

MattOP•16mo ago

If it’s the fulfilled case, what’s the output in that example? The resolve foo?

ἔρως•16mo ago

if the function resolve is called, it executes the function handleFulfilledA, passed on the first then

MattOP•16mo ago

this isnt calling it though, just declaring ? or myPromise.then is a call?

ἔρως•16mo ago

this should make more sense than any explanation i can give

MattOP•16mo ago

I'm going to read more about this, I'm still pretty confused (no offense to your explanation, just feels abstract rn)

ἔρως•16mo ago

and you can manipulate the data, which is passed to the next .then

Joao•16mo ago

Maybe it's best to open a separate thread for this?

ἔρως•16mo ago

a common pattern is fetch(...).then((response) => response.json).then((data) => ...) yes, good idea

Joao•16mo ago

It would also help @-Matt to receive an explanation when he runs into an actual issue, rather than examples without context

MattOP•16mo ago

this makes more sense Yeah sorry my bad I've been hammering a lot of questions unrelated to this thread haha

Joao•16mo ago

I only say it for your own benefit, trying to learn too much at once doesn't work very well most of the time (maybe it does for you)

MattOP•16mo ago

Honestly, it doesn't, hence the 10+ year plus of trying to learn hahaha

ἔρως•16mo ago

im the exception to that, since i learned scss, javascript es6, typescript and blade at the same time

Joao•16mo ago

Well JS has changed a lot in that time so maybe you just arrived at a bad time

ἔρως•16mo ago

but usually, small baby steps is best

MattOP•16mo ago

I don't think I've ever seen stuff like promises before

Joao•16mo ago

Yes, always baby steps and before you know it you'll be running

ἔρως•16mo ago

they are kinda recent, but not a lot

MattOP•16mo ago

🙏

Joao•16mo ago

Maybe you saw XMLHttpRequest?

MattOP•16mo ago

I tried using this when I was playing around with APIs in node

ἔρως•16mo ago

yeah, don't think that node has that i think it only uses ´fetch`

MattOP•16mo ago

ohh it looked familiar

ἔρως•16mo ago

i could be wrong

Joao•16mo ago

It's just the old way of doing things. Better use fetch, but don't worry about those things yet just make sure you nail down the basics trust me.

MattOP•16mo ago

How did you guys learn? Are there any good doc competitors to mozilla?

ἔρως•16mo ago

yeah, fetch is a lot easier to use by doing, and working with it and not really even node's documentation is awful, in my opinion

MattOP•16mo ago

I vaguely read some of it when I was writing a simple Discord bot

ἔρως•16mo ago

there's w3cschools or whatever it is called, but it isn't as complete as mdn

MattOP•16mo ago

I avoid w3 just because they use inline js*

ἔρως•16mo ago

that's a very bad take, not gonna lie

Joao•16mo ago

Try https://javascript.info/

ἔρως•16mo ago

inline javascript has an huge advantage: you shave a single network request, which can be as high as 2-3 seconds saved also, it's an easy way to have extra information available to a script that loads later

MattOP•16mo ago

That's true, I guess from a learning perspective it's just messier Can I send you a friend request?

ἔρως•16mo ago

please don't, lets keep it here nothing personal against you

MattOP•16mo ago

Np, just wanted to send you one haha

ἔρως•16mo ago

i don't mind if you @ me here, if you need help or something

Joao•16mo ago

I'll just leave this here in case it helps with some ideas. It's definitely not perfect, only the basic functions with a few obvious bugs. But I think it's good enough, let me know if it helps! https://codepen.io/D10f/pen/XWoMJZE

D10f

CodePen

XWoMJZE

...

Gaming

Programming

How to select certain Index in Array?