DEV Community

ES6 with Javascript Concepts for React JS

Shubham Tiwari on December 17, 2022

Hello Everyone today i will discuss few concepts which you should know before moving onto React JS. Let's get started... ES6 Arrow Funct...

Read full post

Mike Talbot ⭐ • Dec 18 '22 • Edited

function regularFunction(num){
  return num
}

const arrowFunction = (num) => num

These two things are not the same, in some cases the differences may not matter, but:

arrow functions have the this of the enclosing scope in which they are defined meaning they can't be used in prototypes or classes.
arrow functions are not hoisted meaning they must exist in the source code before their use, this can cause weird ordering issues for self referencing pairs of functions and means the purpose of your code will come after all of the utility functions it uses.

Arrow functions are incredibly useful, but they are also not actually shorter to declare if they are multiline and you are declaring the function as a variable to be called. However, you could define a map or a filter function with the whole function style shenanigans, if fact you used to have to, now that's nasty and arrow functions really shine in this area.

Shubham Tiwari • Dec 18 '22

Actually I wrote they are doing the same thing , not they are same thing, what i meant is they are returning the number in the parameters
That's why i attached a link for the complete reference of the topic

Jon Randy 🎖️ • Dec 18 '22

A lot of stuff here is not related to ES6 at all

Shubham Tiwari • Dec 18 '22

Which one's?

Rense Bakker • Dec 18 '22

map, filter, reduce is ES5. Ternary operator has been there from the start.

Shubham Tiwari • Dec 18 '22

Yeah but we can use these with ES6 features for more shorted code

Jon Randy 🎖️ • Dec 18 '22 • Edited

Well, if we want shorter code using ES6 features, we could rewrite your debounce:

const debounce = (fn, delay) => {
  let timer
  return () => {
    clearTimeout(timer)
    timer = setTimeout(fn, delay)
  }
}

I'm not entirely sure why you wrapped fn in another function in the original?

Shubham Tiwari • Dec 18 '22

Yeah The title should be ES6 combined with Javascript

Jon Randy 🎖️ • Dec 18 '22 • Edited

Higher order functions are just a programming concept made possible in languages where functions are treated as values, as JS does and always has.

Shubham Tiwari • Dec 18 '22

But we can combine higher order function with ES6 features to make it more shorter that's i put it there

Shubham Tiwari • Dec 18 '22

I think I should say ES6 with javascript combine

codingjlu • Dec 19 '22

You might want to clarify on the React part. I think you should add relevant React snippets if you want to name your posts as so.