JavaScript syntax error without notification

Question

I am new to JavaScript, and I found that there's a bug in my code as I type length as lenght . However, there is no notification for this bug or syntax error. It took me a long time to debug. I wonder how could this happens? If lenght is acceptable by JavaScript?

var totalFruit = function(tree) {
    
    let windowStart = 0;
    let dict = {};
    maxLength = 0;
    for (let windowEnd = 0; windowEnd < tree.length; windowEnd++) { 
        currentFruit = tree[windowEnd];
        if (!(currentFruit in dict)) {
            dict[currentFruit] = 0;
        }
        dict[currentFruit] += 1; 
        while (Object.keys(dict).lenght > 2) {
            leftFruit = tree[windowStart];
            dict[leftFruit] -= 1;
            if (dict[leftFruit] == 0) {
                delete dict[leftFruit]
            windowStart += 1;
            }
        }
        maxLength = Math.max(maxLength, windowEnd - windowStart + 1);     
    }
    return maxLength;
};

It's not technically a syntax error. You can assign a value to tree.lenght so it's just undefined — Moshe Sommers
– Moshe Sommers, Commented Sep 14, 2020 at 14:45

CertainPerformance · Accepted Answer · 2020-09-14 14:45:42Z

3

It's perfectly legal to access properties which do not exist on an object. For similar reasons, the following doesn't throw an error:

const obj = {
  prop1: 'val1'
};

console.log(obj.prop2);

If a property doesn't exist on an object, but the property is accessed, it will result in undefined being returned, but not a runtime error.

JavaScript can't distinguish between you trying to access a possibly-existent property, and you making a typo.

If you want to avoid these sorts of mistakes (they aren't that uncommon, after all), consider using something strongly typed like Typescript, which can turn these sorts of annoying to debug runtime errors into easy-to-fix compile-time errors. (I find TS to be essential for non-trivial projects, it saves so much debugging time.) Another option is to use an IDE with intellisense autocomplete (like VSCode) which makes making these sorts of mistakes harder.

answered Sep 14, 2020 at 14:45

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

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

3 Comments

Jaden Over a year ago

Thank you very much for your insight. Previously I though React is building on JavaScript, and Angular requires TypeScript. As such, TypeScript is out of my learning plan. Do you have any recommendation regarding TypeScript for React? Thank you.

CertainPerformance Over a year ago

Good thing about TypeScript is that it doesn't have that much of a learning curve at the beginning, IMO - most types can be inferred automatically. Worst-case, you can use the any type and/or use transpileOnly flag when you want it to run just like JS. React is very frequently used with TS, eg create-react-app my-app --template typescript. IMO, it's well worth it.

Jaden Over a year ago

I might also learn TS as well as JS. Thank you very much for your insight! Have a nice day.

Felix Kling · Accepted Answer · 2020-09-14 14:51:16Z

1

If lenght is acceptable by JavaScript?

Yes. If you are trying to access a property which doesn't exist, JavaScript will return the value undefined:

var obj = {length: 1};
console.log(obj.lenght)
console.log(obj.lenght > 2)

However, there is no notification for this bug or syntax error. It toke me longtime to debug. I wonder how could this happens?

It's not a syntax error. A syntax error is when your code is so "broken" that the parser is not able process it as a valid JavaScript program. Having a typo in a property name is not a syntax error (how should the parser know whether a word is correct or not? To it it's just a sequence of letters.)

Whether the typo results in a runtime error depends on the context. Accessing a non-existing property returns undefined but in your case that wasn't a problem because comparing undefined to a number is a valid operation.

On the other hand, if you tried to access another property on the undefined value you would have gotten an error:

var obj = {};
console.log(obj.foo.bar);

Because of these easily to miss mistakes, tools like Typescript and even eslint exist. They try to uncover issues at development time.

edited Sep 14, 2020 at 14:51

answered Sep 14, 2020 at 14:45

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

3 Comments

Jaden Over a year ago

Thank you very much for your help! Because I want to learn React instead of Angular, as such I did not choose TypeScript which can avoid this type of error. Do you have any recommendation about this?

Felix Kling Over a year ago

AFAIK you can use TypeScript with React.

Jaden Over a year ago

Oh, I see, you mean use TypeScript as superset of JavaScript , then compile to JavaScript and use React. Thank you very much for you help.

Collectives™ on Stack Overflow

JavaScript syntax error without notification

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related