Use of if-else in JavaScript ES6

Question

I am learning ES6 and following is my ES5 code which is running fine -

var myArr = [34,45,67,34,2,67,1,5,90];
var evenArr = [];
var oddArr = [];

myArr.map(function(x){
  if(x%2==0) evenArr.push(x);
  else oddArr.push(x);
});

Now if I am converting this to ES6 I am getting errors of Unexpected token near if, let me know what I am doing wrong here -

My ES6 code -

var myArr = [34,45,67,34,2,67,1,5,90];
var evenArr = [];
var oddArr = [];
myArr.map( x => if(x%2==0) evenArr.push(x) else oddArr.push(x) )

Arrow function bodies must be in {} if more than one statement. Seems you should be using forEach anyway, map creates a new array that you are throwing away. — RobG
– RobG, Commented Apr 4, 2016 at 6:51

zerkms · Accepted Answer · 2016-04-04 06:53:10Z

10

That's because the arrow functions accept expressions while you're passing a statement.

Your code is misleading: Array.prototype.map implies you would use the result somehow, while you are not.

If you wanted to improve the semantics of your code you would use Array.prototype.forEach that is designed specifically to iterate over an array and not return anything:

var myArr = [34,45,67,34,2,67,1,5,90];
var evenArr = [];
var oddArr = [];
myArr.forEach(x => {
    if (x % 2 === 0) {
        evenArr.push(x);
    } else {
        oddArr.push(x);
    }
});

References:

answered Apr 4, 2016 at 6:53

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

Comments

Lewis · Accepted Answer · 2016-04-04 06:51:23Z

9

You should use ternary operator for inline conditions.

myArr.map( x => x%2==0 ? evenArr.push(x) : oddArr.push(x) )

answered Apr 4, 2016 at 6:51

Lewis

15k14 gold badges70 silver badges88 bronze badges

Comments

thefourtheye · Accepted Answer · 2016-04-04 07:04:18Z

4

If you don't use brackets to define the body of Arrow functions, the body should be an expression. In your case, it is not expression, but an if statement.

You need to define it with the compound body, like this

myArr.map(x => {
    if (x % 2 === 0)
        evenArr.push(x);
    else
        oddArr.push(x);
})

Or you should define it to return an expression, like this

myArr.map(x => x%2==0 ? evenArr.push(x) : oddArr.push(x))

Note: You should not use map to do this. map should be used only when you need to create a new array from the values of another array. You should use forEach, when you are dealing with functions which have side-effects. In your case, you are modifying objects which are outside the scope of your function. So forEach would be the best fit here.

edited Apr 4, 2016 at 7:04

answered Apr 4, 2016 at 6:52

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

1 Comment

RobG Over a year ago

Code golf: myArr.forEach(x => (x%2? oddArr : evenArr).push(x)). ;-)

RobG · Accepted Answer · 2016-04-04 09:23:58Z

4

If an arrow function body contains more than one statement, it must be contained in a block. Also, you can't omit semicolons like that.

forEach is more semantic (since your function just returns undefined and you don't keep the new array anyway) and you can use the value of x%2 directly:

myArr.forEach( x => {if(x%2) oddArr.push(x); else evenArr.push(x)} )

and there's also:

myArr.forEach(x => [evenArr,oddArr][x%2].push(x));

edited Apr 4, 2016 at 9:23

answered Apr 4, 2016 at 6:58

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Ashish Panzade · Accepted Answer · 2016-04-04 06:52:03Z

2

var myArr = [34,45,67,34,2,67,1,5,90];
var evenArr = [];
var oddArr = [];
myArr.map( x => (x%2==0)? evenArr.push(x) : oddArr.push(x) )

Try the code above. It seems to work.

I have just replaced if..else with ternary operator(? :).

answered Apr 4, 2016 at 6:52

Ashish Panzade

212 bronze badges

Collectives™ on Stack Overflow

Use of if-else in JavaScript ES6

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related