DEV Community

Cover image for The vanilla Javascript basics to know before learning React JS

The vanilla Javascript basics to know before learning React JS

Jane Tracy 👩🏽‍💻 on September 20, 2020

REACT JS Background Story If you just finished JavaScript online courses or other self-taught resources going to your first JS framewo...
Collapse
 
maxdevjs profile image
maxdevjs • Edited

@tracycss thank you for the great article :)

This snippet

//const object properties or array values can be updated
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

const result = friends.age = 23;
console.log(result);
//output => 23
Enter fullscreen mode Exit fullscreen mode

does not update the original age (I guess the code was intended to update age from 22 to 23, right?). Instead it creates a new named property of the array object:

console.log(friends);
[
  { name: 'Bob 🥽', age: 22, hobby: 'golf🏌', music: 'rock 🎸' },
  age: 23
]
Enter fullscreen mode Exit fullscreen mode

This can be checked:

// new (named) age property
console.log(friends.age);
23
// also
console.log(friends["age"]) ;
23

// original age
console.log(friends[0].age) ;
22
Enter fullscreen mode Exit fullscreen mode

To update the original age:

friends[0].age = 23;
console.log(friends[0].age) ;
23
// also
console.log(friends[0]["age"]) ;
23
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻 • Edited

Great input Max, I might the values or properties can be changed. Let me update that part.
Thank you. 💯🌟🙂

Collapse
 
peerreynders profile image
peerreynders • Edited

We can also use the arrow functions as class methods.

Despite of what you may see in framework tutorials in terms of "Vanilla JS" that is considered bad form.

The issue is that in arrow functions this refers to the lexical scope that created the function.

As a consequence each object instance will create a new, separate function.

For a regular method a single function exists on the prototype object of all the object instances that share it - i.e. one single function is reused across all object instances. For traditional methods (including the short hand syntax) this (the function context) refers to the calling context.

So when using arrow functions for "regular methods" you are creating more functions than you need to.

Arrow functions in class declarations are justified when that function is intended to be used as a callback (e.g. event listener), i.e. it needs to be bound to (this of) that particular object instance.

Please have a look at:

Also ES6 is the legacy term for ES2015. There is no ES7. Since ES2015 TC39 has annually published updates to the spec, e.g. ES2016, ES2017, etc.

The additions (finished proposals) for each publication year are identified here.

Some people use "ES.Next" when Babel offers implementations of proposals before they reach stage 4 (finished).

var variables are globally scoped or accessible.

Inside a function they are scoped to the function - i.e. not globally accessible - that is what the "immediately invoked function expressions" IIFE are about. However var declarations are effectively hoisted to the top of the function - independent of where they appear inside the function.

A class is another type of function

There is a class declaration and class expression.

The MDN's statement:

Classes are in fact "special functions"

is a bit misleading. It's more accurate to say that classes are syntax sugar for constructor functions.

we use this keyword to refer to the current class.

"we use this keyword to refer to the current object (an instance of the class)."

And as already mentioned this has a different meaning in arrow and traditional methods:

  • arrow function - the object the function was created on
  • traditional method - the object the method is called on

The super method

super is a keyword. super([arguments]) is only valid in the constructor. super.name or super[name]can be used to access properties (and functions/methods) on the parent.

The spread operator is used for splitting up the values of an array

The spread syntax also works on object literals and can also be used to convert an iterable to arguments for a function call.

JSX supports spread attributes:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}
Enter fullscreen mode Exit fullscreen mode

This operator is used to represent an infinite amount to arguments in a function.

Some people think of the rest syntax as "gather" because it collects the remaining arguments.

The rest syntax can also be used for Array destructuring and Object destructuring.

You can use "rest in object destructuring" to omit object properties.

let {b, c, ...redacted} = {a: 4, b: 3, c: 2, d: 1};
console.log(redacted); // {a: 4, d: 1}
Enter fullscreen mode Exit fullscreen mode

Array functions

One issue is that these functions are limited to arrays rather than general iterables. While at times Array.from, Object.entries, Object.keys, and Object.values can be helpful often it's more performant to stick to using for..of.

Collapse
 
jacobmgevans profile image
Jacob Evans

ES7 => ES2016

Collapse
 
peerreynders profile image
peerreynders • Edited

ECMA-262 7ᵗʰ Edition / June 2016 => ECMAScript® 2016 Language Specification

Edit:
When the "Standard ECMA-262 6th Edition" was being drafted it was referred to as ES6.

However before it was finalized the committee decided to go with the ES2015 moniker to reflect the fact that they intended to publish yearly updates to the specification - which they have done so far.

Publications before June 2015 can be excused for using the ES6 moniker, past that ES2015 should have been used.

It's been 5 years - it's time to let go of the edition based moniker unless one is referring to ES5.1 and below.

Thread Thread
 
jacobmgevans profile image
Jacob Evans

Cool...Ill keep this in mind while writing configs that use ES5-11 but hey you do you.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

True, I agree Jacob.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Great input, I will take a look at the links.

Collapse
 
peerreynders profile image
peerreynders • Edited

Good coverage for three months 👍

Edit:
Method vs "arrow function on public class field" weirdness:

class A {
  myArrow = () => {
    console.log('A.myArrow()');
  }

  myMethod() {
    console.log('A.myMethod()');
  }
}

class B extends A {
  myArrow = () => {
    super.myArrow(); // arrow function exists on 
                     // public class field of A but
                     // but is not available on 
                     // the prototype chain via `super`
    console.log('B.myArrow()');
  }

  myMix() {
    super.myArrow(); // same problem
    console.log('B.myMix()');
  }

  myMethod() {
    super.myMethod(); // just works
    console.log('B.myMethod()');
  }
} 

let myB = new B();

myB.myMethod(); // 'A.myMethod()'
                // 'B.myMethod()'
myB.myMix();    // Uncaught TypeError: (intermediate value).myArrow is not a function at B.myMix
myB.myArrow();  // Uncaught TypeError: (intermediate value).myArrow is not a function at B.myArrow
Thread Thread
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Awesome, explanation. 🙂🌟

Collapse
 
sqlrob profile image
Robert Myers

const can neither be re-assigned nor updated, it is constant(doesn’t change).

I think that is a little misleading. The reference is constant, the object is not; fields can be reassigned and added.

const x = { y: 'x is const' };
x.y = 'y is not';
x.a = 'here is a new property';
console.log(x.y); // y is not
console.log(x.a); // here is a new property
delete x.y;
console.log(x.y);  // undefined
Enter fullscreen mode Exit fullscreen mode

Colloquially, those are all updates.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

You can not reassign an object or an array but you can still change the values or properties.
Let me change the text a little.
Thanks for pointing this out Robert, yeahhhh :)

Collapse
 
yoursunny profile image
Junxiao Shi

In Netscape era, I could read the entire JavaScript specification.
In ES5 times, the paper book for ECMA-262 standard is still reasonable thickness. I have the book from 2011 and it's 245 pages. (the book is free and they'll mail it to you if you request)
Nowadays, JavaScript is so complicated. I read all of MDN but there must be more.

P.S. I prefer chocolate to vanilla.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

I would be interested to have a look at the book. You can email me, I appreciate it :)

Collapse
 
yoursunny profile image
Junxiao Shi • Edited
Thread Thread
 
tracycss profile image
Jane Tracy 👩🏽‍💻

It's okay. My email is janetracy00@gmail.com.
I will go through it slowly taking my time. No rush :)

Collapse
 
ljcdev profile image
ljc-dev

Very useful guide 😀! A lot of people are curious about when to start learning react. Thx for sharing 🤗

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thank you. Glad you enjoyed it. 😁🙌
I hope it helps in any way, don't forget to share to help some else out there.✨

Collapse
 
ljcdev profile image
ljc-dev

I will 😁👍!!

Thread Thread
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Awesome 🙌🔥

Collapse
 
chriscampbell96 profile image
Chris Campbell

This was really helpful, thanks 👍

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Glad it was helpful in any way, Chris. ✨

Collapse
 
cwraytech profile image
Christopher Wray

Thank you for this! I especially like your description of variables (let/const) and arrow functions. I needed that.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

I am glad the information was useful. 🌟💯
Thank you for reading it, Christopher. 🙌🏽

Collapse
 
codenamecookie profile image
CodenameCookie

This is really useful. Good job. :)

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thank you so much. Hope it helped in anyway.

Collapse
 
cnease10 profile image
Cierra Nease

Hi Jane, great article. I think you really nailed some of the key JS concepts that should be learned before React! Thanks for the article!

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thank you, Cierra. Glad you found it helpful. ✔✨

Collapse
 
derva profile image
derva

Wow, really amazing post - thank you

How much time you need for one like this post, there is so much valuable information and very clearly to understand it!

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻 • Edited

I a lot of time. But I take breaks and code in between as well. I can't clearly know how much time I use continuously to write it. But if I would make a guess, it would be a min of 6 hours.

Thank you. Hope it helped in any way, Derva :)

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

good one. I appreciate it.

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thank you, I appreciate it :)

Collapse
 
dropbit profile image
Yuriy Rymarchuk

Really nice, polished and concrete article. I really enjoyed reading it 😄🤓

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thank you so much, Yuriy. I really appreciate it. ❤✨

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good article best to know javascript better before jumping into a framework like React. Too many beginners make that mistake.

Collapse
 
harshilparmar profile image
Harshil Parmar

Please add Computed Property ,if you can
ref : ui.dev/computed-property-names/
And also add shallow copy & deep copy concept, Reference type vs value type.
Thanks!!

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

Thanks, Harshil, I will do an update on the post :)

Collapse
 
tkmanga profile image
Tkmanga

thanks ! it was really helpful for me! probably next month i'm going to start with React

Collapse
 
tracycss profile image
Jane Tracy 👩🏽‍💻

I am happy the post will guide you or help you in any way. Don't forget to share with your fellow devs, they might find it useful too :)

Collapse
 
batzorige profile image
Batzorig Enkhtuvshin

Good one. I appreciate it.
Thank you. 💯