JavaScript Basics Before You Learn React

Nathan Sebhastian on January 14, 2019

In an ideal world, you can learn all about JavaScript and web development before you dive into React. Unfortunately, we live in a not-perfect wor... [Read Full]
 

Arrow functions, apart from their aesthetics, have this property called lexical scoping. This explains lexical scoping better than I ever will :)

In short, arrow functions follow the scope of the caller's scope, rather than having its own. function() {} functions' scope can change to whatever by calling .bind() - basically how JS prototype works.

Maybe you deliberately omitted this because in React world arrow functions are mostly used for shorter declaration. But hey, I figured the post might give a wrong impression that arrow function is only for cleaner code :P

Short test code:

class MyClass {
  constructor() {
    this.foo = 'foo';
    this.bar = 'bar';

    // `this` is defined
    this.someFunctionThatTakesACallback(() => {
      console.log(this.foo);
    });

    // In the following function's scope, `this` will be undefined
    // to mitigate this, we need to call .bind (essentially what arrow function does)
    this.someFunctionThatTakesACallback(function() {
      console.log(this.foo);
    });

    // forcing function's scope to be `this`
    this.someFunctionThatTakesACallback(function() {
      console.log(this.foo);
    }.bind(this));
  }

  someFunctionThatTakesACallback(callback) {
    callback();
  }
}

new MyClass();


`

 

Ah yes, sorry if I skip the part about this. Thanks for adding it here, Jesse :)

 

'Both declarations are local, meaning if you declare let inside a function scope, you can't call it outside of the function.'

a var declared inside a function is also not global. this is not what is different about let. the difference is that let has block scope for example:

let x = 1;

if (x === 1) {
let x = 2;

console.log(x);
// expected output: 2
}

console.log(x);
// expected output: 1

 

Oh sorry, what I actually meant is block scope not function scope. If you call x outside of the if scope it will return 2 with var. I'll fix that as soon possible. Thanks David :)

 

Great post Nathan. Easy to understand. Only thing i couldn't get my head around is the Destructuring concept coz i haven't used or heard it before. Hopefully i'll get better understanding after some use.
Thanks.

 

Thanks dan, don't worry too much about destructuring, in simple application, we used it for shortening the syntax for getting state value only. For example, if you have this state initialized

this.state ={
  email:'',
  username:''
}

Then when you want to get the value, do:

const {email, username} = this.state;

Instead of:

const email = this.state.email;
const username = this.state.username;

Now in my example tutorial, I have also included destructuring assignment into a new variable, like:

const { email:myEmail } = this.state;

But to tell you the truth, I never used this kind of assignment, so just consider it an extra knowledge that might be useful sometime 😆

 

yap...its super important to Understand JavaScript Fundamental before using any frameworks. One should learn how JavaScript works, its life cycle, What Prototypal inheritance is, Classical vs Prototypal model, What Closure is etc...

 

Great selection of features. Great article! I would add the spread operator as well. It's useful for making shallow copies of arrays and objects.

I've used {...this.props} to pass a copy of props in react without naming them all, and then using destructuring to extract them in the component. See this stackoverflow question for a good description.

 

Ah certainly Steve, spread and rest operator would be a great addition. I'm just afraid the article would be too long when I wrote this. Thanks for your comment :)

 

Thank you for this post! I am actually working on a new web project, and this time I decided to use React instead of JS vanilla. It helped me a lot :D

 

You're welcome Rospars. Glad could help you out. Good luck with your project :)

 
 

Could I translate your post into Korean? I'm working as a front-end developer but mainly maintaining the old legacy. Next version would use React. So, I'm studying React.

 
 

Hi, Sebhastian. I've translated your article in Korean and posted on my Medium story. It became the most famous article among my stories. Thanks :)
medium.com/@violetboralee/react%EB...

Hi Lee, wow that's great! Your welcome and thanks for translating the article :)

 
 

Hey, great article, I knew most of this, but the part of modules have clarified me all I didn't have end up understanding.

BTW, I think there is an error here, no?

// in util.js
export default function times(x) {
return x * x;
}
// in app.js
export k from './util.js';
console.log(k(4)); // returns 16

That second export should be an import, shouldn't be?

 

ah yes, thanks for the correction Alex :) glad could help you learn something

 

Thank you Nathan for a great and informative post

 

Good article for the beginner who want to learn reactJS.
Thanks Nathan.

 

Great post!

I'd like to also mention .forEach() and .reduce() which are not quite as commonly used as .map() and .filter() but still worth noting. :)

code of conduct - report abuse