Can you spot the bug?

Can you spot the bug in this JavaScript code?

#shorts

[HDdeiu]

Nice one! Would love to see more of these! Reminded me I need to reread the basics of arrow functions.

[anhdunghisinh]

I found the bug but i was expect a bit different impact. If we use arrow function, "this" will point to the "this" outside of the arrow func, so we still can add property to the "this" as long as "this" is not undefined.

[alfaphoenix]

I felt so happy seeing the code and immediately knowing what was wrong :') its been a long way since i didnt even know how functions worked. Great vid :)

[Jespertheend]

I realize this is an example, but in the real world you can use class syntax. That would eliminate the issue altogether.

[soniablanche]

another thing arrow function doesn't have is access to the "arguments" object, nowadays we just spread the arguments but back then you had to use "arguments" to access them.

[jaydenmoon]

Dang this was awesome - I love looking at code and finding issues - usually its my own :P - please more of these

[hamidtahir]

This is such an awesome format for these.
Please do more!

[avi]

Alternative solution:
const Animal = function (name, type) {

[pnkifies]

The fact that many of the people who were recommended this understood this and I had no clue what I was staring at-

[christophemarois]

I didn't find the bug and that delighted me. Thanks for making me learn something!

[nilfux]

Yup, got it. My coworkers love to misuse =>. If you see the this keyword, it must be scoped with function.

[AndreGreeff]

That actually took me a bit longer to find than I thought it would (..after initially scanning the code).

I think we take for granted how much syntax is just inserted for us as we type, which is only compounded by our reliance on real-time static code and syntax analysis, which results in simple "small" things like this being overlooked all too easily... :)

Thanks for helping us keep our daily skills sharp! (your channel also just got another new sub, just BTW)

[loadingninja]

From what I know, a bug is executable code that doesn't do what it is supposed to do while code that doesn't compile/execute, like the example shown, would be a syntax error.
Still a very interesting example of the slight differences between arrow functions and regular functions

[Cansyrian]

I want more vids like this ! This is so fun!

I mean, if you’re learning about arrow functions, and the text/video doesn’t immediately mention the rule about `this`, you need to close the tab and find a better learning resource.

[himanshubanerji]

Would definately love more of these :)

[FairyRat]

One could also refactor it to be a factory function:

const createAnimal = (name, type) => {
const name = name
const type = type
let age = 0

const birthday = () => age++

return {name, type, birthday}
}

const leo = createAnimal('Leo', 'Lion')

That way you could also make name and type a closure if you don't include them in your returned object. Please correct me if I'm wrong!

[richardrapstine]

The MDN for arrow functions specifically says they’re intended for anonymous functions. Always irritates me when I see developers using them as replacements for function declarations.

[amirrezaranjbar]

First function is es6 function so the “this” keyword refers to the global object instead of the local object

[timepass]

Good one. more like this would be fun!