JavaScript constructor not setting correct values

Question

I have a simple ES6 class that looks like:

class NewsItem {
    constructor(title, date, content, photoURL) {
        this.title = title | '';
        this.date = date | '01-01-00';
        this.content = content | '';
        this.photoURL = photoURL | '../images/image.png';
    }
}

I'm having trouble creating instances of the class. Trying something simple like:

new NewsItem("fgfdds", "gfdgfd", "fdsfds", "fdsfds");

results in a NewsItem object, however instead of the passed strings, all of the class' attributes are set to 0.

I'm pretty sure I'm just using JavaScript wrong, but can't figure it out. What's going on here?

@AndrewLi that's it. However, I'm not completely sure of the difference. — James Parsons
– James Parsons, Commented Jun 16, 2017 at 21:47

Andrew Li · Accepted Answer · 2017-06-17 16:38:56Z

The problem is that you're using | instead of ||. The one you're using, bitwise OR, converts the left and right operands to numbers, then applies the operation to those values.

The distinguishing factor is this: bitwise operations perform operations on the bits, thus the operands are converted to numbers and the operations are performed on the bits. Logical operations perform operations logically, not on the bits themselves, but the data.

Thus:

'fgfdds' | ''

Is actually using ToInt32 internally to convert 'fgfdds' and '' to a number. Both come up to be NaN, and the method ToInt32 returns +0 if the result is NaN. Thus, you're doing this:

0 | 0

Which is 0 because both operands are 0. Using logical OR, or ||, does not convert the operands to numbers and logically evaluates the operands. If one operand or the other is defined or not falsey, then it evaluates to that operand. Thus, try this:

this.title = title || '';

This will evaluate to this.title if this.title is defined or truthy, and an empty string otherwise. See logical operators and bitwise operators at MDN.

Also, if you're using ECMAScript 2015, try using default parameters instead which is a much nicer way to do this:

constructor(title = '', date = '01-01-00', content = '', photoURL = '../images/image.png') {
  ...
}

Andrew Li · Accepted Answer · 2017-06-17 14:27:57Z

0

this.title = title || '';

Assign it like this. Go here to see the explanation on Logical OR and bitwise OR

edited Jun 17, 2017 at 14:27

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

answered Jun 16, 2017 at 21:47

razorRun

1108 bronze badges

Collectives™ on Stack Overflow

JavaScript constructor not setting correct values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related