Javascript: forEach method within a function?

Question

I'm new to JavaScript (I've used python for ~3yrs, and I'm currently trying to pick up the basics of JS syntax.) I am using codewars to facilitate learning.https://www.codewars.com/kata/5bb904724c47249b10000131/train/javascript

This problem gives the prompt

function points(games) {
  // your code here
}

The rules are:

if x>y -> 3 points
if x<y -> 0 point
if x=y -> 1 point

My naive approach is to create a function which receives an array as an input and apply a forEach method to every element therein. However, I'm triggering the following error: Uncaught SyntaxError: Unexpected token 'else'

games = ["0:3","1:2","3:2"]

function points(games){
  let p = 0;
  games.forEach(
    function(game){
    let x = game.split(':')[0];
    let y = game.split(':')[1];
    if(x>y){
      p = p + 3};
    else if(x=y){
      p = p + 1};
    else {
      p = p + 0;
    };
  });
};

I'd like to better understand (A) why this error is beginning triggered and (B) what is the right way to accomplish this effect.

Edit: I likely need to cast x and y as a numeric type, however this isn't triggering the current error.

}; <-- that is not how you do if statements. Look at the syntax on MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and you are doing assignment, not comparison. — epascarello
– epascarello, Commented Apr 18, 2020 at 18:34
@epascarello not sure what your comment tried to point out: a ; is certainly not needed here, but it's also not "wrong": it simply does nothing. Sure, it's silly to put one in, but if (x) { ... } ;;;;;;;;;; does exactly the same as if (x) { ... }: a semi-colon in isolation is simply a noop. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Apr 18, 2020 at 18:54
@Mike'Pomax'Kamermans It is going to produce "Uncaught SyntaxError: Unexpected token 'else'" so yes, it does produce an error. — epascarello
– epascarello, Commented Apr 18, 2020 at 19:04
ah, in that case it would have been a good idea to mention which of the various }; you were commenting on (given that there are three). — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Apr 18, 2020 at 19:07

Mike 'Pomax' Kamermans · Accepted Answer · 2020-04-18 19:24:00Z

2

Some things to know about JS when you're coming from Python: the modern Array type has a lot of utility functions, so the code you've written can be done with just a few calls, and a ternary (which I really wish Python supported, like every other modern language)

function score(games = []) {
  // we could manually sum values, or we can use reduce() to do that for us.
  return games.reduce( (tally, game) => tally + calculateScore(game), 0);
}

/**
 * fun fact about JS: functions are "hoisted" i.e. they all get "moved"
 * during initial read-in to the top of the file, with their ordering
 * made entirely irrelevant: any function can have a function body that
 * calls any other function, because they're all at the same declaration level.
 */
function calculateScore(game = "0:0") {
  let [x, y] = game.split(":").map(parseFloat);
  return x > y ? 3 : x < y ? 0 : 1;
}

This uses some elementary modern JS:

default parameters, basically the same as you'd use in Python,
arrow functions, which are kind of like lambdas but also nothing like them. They're pretty important to know about though, if you want to write modern JS.
array.reduce, which can make summing values much easier, or much harder, depending on how complicated your code gets,
parseFloat which turns strings into floats (fun fact: every number in JS is a float, which is why you integers only go up to 2^53: past that (n+1) - n === 1 no longer holds)
the ternary operator, which Python is sorely lacking.

Also quite importantly: note that where you see parseFloat, what really happens is that array.map calls parseFloat with two arguments: the element, and its index in the array. For parseFloat, this is fine, because it only takes one argument. However, if you were to naively use parseInt, things would go horribly wrong: it takes two arguments, namely a string, and a radix.

edited Apr 18, 2020 at 19:24

answered Apr 18, 2020 at 18:40

Mike 'Pomax' Kamermans

54.3k17 gold badges134 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

Good answer, but does not actually answer the user's problems in their code.

Mike 'Pomax' Kamermans Over a year ago

It does, by teaching them how to write modern JS, which is clearly their intention coming to JS from Python. Especially when it comes to JS, not every code answer is "fixing the code problem by preserving as much of the post's code as possible", sometimes (heck, oftentimes) it's "teaching them how to write modern code instead".

jbuddy_13 Over a year ago

@Mike'Pomax'Kamermans - thank you! The brackets thing is new for me and threw me for a loop. Thanks for pointing out some best practices :)

lhoro · Accepted Answer · 2020-04-18 18:53:40Z

1

forEach is not the best approach for this question. This question can be done with reduce function, which can be used to calculate the accumulated sum for an array.

const games = ["10:3","1:2","3:2", "3:3"]

//forEach approach
function points(games){
  let p = 0;
  games.forEach(game => {
    const [x, y] = game.split(':').map(parseFloat);
    x>y? p+=3 : x===y ? p+=1 : p+=0
  })
  return p
}


//reduce approach
//second parameter in reduce function is the initial value, which is 0 here
function pointsReduce(games){
  const sum = games.reduce((accumulate, game) => {
    const [x, y] = game.split(':').map(parseFloat);
    return accumulate+= x>y? 3 : x===y ? 1 : 0
  },0)
  return sum
}


console.log(points(games))
console.log(pointsReduce(games))

edited Apr 18, 2020 at 18:53

answered Apr 18, 2020 at 18:40

lhoro

4382 silver badges5 bronze badges

1 Comment

Mike 'Pomax' Kamermans Over a year ago

Remember: splitting strings yields strings, which means 10 would be considered less than 2.

Danil Sabirov · Accepted Answer · 2020-04-18 18:35:00Z

0

Seems you messed the curly brackets positions. They has to be right before else:

 if(x>y){
      p = p + 3;
    } else if(x=y){
      p = p + 1;
    } else {
      p = p + 0;
    };

answered Apr 18, 2020 at 18:35

Danil Sabirov

3532 silver badges11 bronze badges

2 Comments

epascarello Over a year ago

Still not going to work right. You copied over another error

Danil Sabirov Over a year ago

hmm, it doesn't count?

Vlad Jerca · Accepted Answer · 2020-04-18 19:25:22Z

The error you're getting is caused by the semicolon (;) that you put at the end if scopes:

if { ... }; else // unexpected token

LE: also, you have a bug in the second check, you're assigning the value of y to x. In Javascript comparisons are done with == or ===.

To expand a bit on equality comparisons:

== will attempt to cast the values before performing the comparison (eg: 1 == '1' => true)
=== is a strict comparison operator that will only return true if both operands are of the same type and value (eg: 1 === 1 => true, 1 === '1' => false)

Here's a working example of your code:

function points(games) {
  let p = 0;

  games.forEach((game) => {
    let x = game.split(':')[0];
    let y = game.split(':')[1];
    if(x > y) {
      p = p + 3;
    } else if(x === y) {
      p = p + 1;
    } else {
      p = p + 0;
    }
  });
};

Below you'll find some other examples.

Using array spreads and dropping the branch which adds 0 to the sum

function points(coordinates) {
  let p = 0;

  coordinates.forEach((coordinate) => {
    const [x, y] = coordinate.split(':');
    if(x > y) {
      p = p + 3;
    } else if(x === y) {
      p = p + 1;
    }
  });

  return p;
};

My favorite approach when it comes to readability:

const points = (coordinates) =>  coordinates
  .map(coordinate => coordinate.split(':'))
  .reduce((points, [x, y]) => {
    if (x > y) { return points + 3; }
    if (x === y) { return points + 1; }
    return points;
  }, 0);

epascarello · Accepted Answer · 2020-04-18 19:08:14Z

Your code has a bunch of syntax errors. You are using too many semicolons. You do not add them on every line. You are working with strings and not numbers. You are not going a comparison in your else if, and you do not return anything form the method.

function points(games) {
  let p = 0;
  games.forEach(
    function(game) {
      // no reason to do work twice, split once
      const parts = game.split(':')
      const x = +parts[0]; // convert to a number
      const y = +parts[1]; // convert to a number
      if (x > y) {
        p = p + 3
      } else if (x === y) { // comparison is == or === and no semicolon
        p = p + 1;
      } else { // <-- we do not add semicolons to the blocks on if/else
        p = p + 0;
      } // <-- we do not add semicolons to the blocks on if/else
    });
  // your function did not return the calculation total
  return p
};

const games = ["0:3", "1:2", "3:2"];
const result = points(games);
console.log(result);

Collectives™ on Stack Overflow

Javascript: forEach method within a function?

5 Answers 5

3 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related