7 JavaScript Features You Need to Know Before Learning React

Learn the basics that you need before starting with React

Mehdi Aoussiad
Nov 18, 2020 · 7 min read
Developer coding at the office.
Photo by Anthony Riera on Unsplash

Introduction

React.
React.
Image Created with ❤️️ By Mehdi Aoussiad.

1. Let and Const

{
let x = 2; //Block scope.
}
// x can NOT be used here
var x = 10;
// Here x is 10
{
let x = 2; // Block scope.
var y = 5;
// Here x is 2
// Here y is 5
}
// Here x is 10
// Here y is 5
// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";
// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // ERROR

2. Arrow Functions

// regular function
const testFunction = function() {
// content..
}

// arrow function
const testFunction = () => {
// content..
}
const testFunction = (firstName, lastName) => {
return firstName+' '+lastName;
}

const singleParam = firstName => {
return firstName;
}
const testFunction = () => 'hello there.';
testFunction(); //hello there.

3. Destructuring Assignment for arrays and objects

// ES5.
const user = { name: 'John Doe', age: 34 };

const name = user.name; // name = 'John Doe'
const age = user.age; // age = 34
// Here's an equivalent assignment statement using the ES6 destructuring syntax:const { name, age } = user;
// name = 'John Doe', age = 34
const { name: userName, age: userAge } = user;
// userName = 'John Doe', userAge = 34
const numbers = [1,2,3,4,5];
const [one, two] = numbers; // one = 1, two = 2

4. Higher-Order Functions

const numbers = [1, 2, 3];
const doubles = numbers.map(num => num * 2) //[2, 4, 6]
const numbers = [1, 2, 3];
const isGreaterThanOne = numbers.filter(num => num > 1) //[2, 3]
const numbers = [1, 2, 3];
const mySum = numbers.reduce((accumulator, num) => accumulator + num) // returns: 6.

5. ES6 Classes

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
let myCar = new Car("Ferrari", 2020);
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}

class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}

let myCar = new Model("Ford", "Mustang");

6. ES6 Modules

<script type="module" src="filename.js"></script>
export const add = (x, y) => {
return x + y;
}
// OR.
const add = (x, y) => {
return x + y;
}

export { add };
import { add } from './math_functions.js';

7. The Spread Operator

let employee = { name:'Jhon',lastname:'Doe'};
const salary = { grade: 'A', basic: '$3000' };
const summary = {...employee, ...salary};
console.log(summary);
// Prints: {name: "Jhon", lastname: "Doe", grade: "A", basic: "$3000"}

Conclusion

More Reading

The Startup

Get smarter at building your thing. Join The Startup’s +793K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mehdi Aoussiad

Written by

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact:https://twitter.com/AoussiadMehdi Subscribe: https://mehdiouss.ck.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Mehdi Aoussiad

Written by

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact:https://twitter.com/AoussiadMehdi Subscribe: https://mehdiouss.ck.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store