JavaScript for React

This blog will show you all the JavaScript syntax you'll deal with when you start learning and coding with React. If you haven't made the switch to latest JavaScript syntax yet, now would be a good time to get started.

---

1. Declaring Variables

Prior to ES2015, the only way to declare a variable was with var keyword. Now we have :

• The const Keyword

  A constant is a variable that cannot be overwritten. e.g. const what = "learn";

• The let Keyword

  With the let keyword, we can scope a variable to any code block. Using let protects the value of the global variable. e.g. let topic = "react";

• Template Strings

  Template strings provide us with an alternative to string concatenation and allow us to insert variables into a string. Click here to learn more.

---

2. Creating Functions

• Function Declaration

  A function declaration or function definition starts with the function keyword, which is followed by the name of the function.

  function logMessage( ) { console.log(' Hello World ! '); }
logMessage( );

• Function Expressions

  Another option is to use a function expression or in other words creating the function as a variable :

  const logMessage = function( ) { console.log(' Hello World ! '); }

  One thing to be aware of when deciding between a function declaration and a function expression is the function declaration are hoisted and function expressions are not. Click here to learn more.

  If we want to provide dynamic variables to the function, we can pass named parameters to a function simply by adding them to the parentheses. We can also use a return statement to specify the values returned by the function.

  const createMessage = function( firstName , message ) {
    return  `${firstName} : ${message}` ;
  };
  console.log( createMessage( "Nick" , "You're so cool !" ) )
  // Nick : You're so cool
  

• Default Parameters

  In the event that a value is not provided for the argument when calling a function, the default value will be used.

  function logActivity( name = "Nick" , activity = " Singing " ) { .... }

• Arrow Functions

  With arrow functions, you can create functions without the function keyword. You also often do not have to use the return keyword.

  logActivity = (name = "Nick , activity = "singing" ) => { .... }

• Returning objects

  When you return an object, you'll see the error :

  Uncaught SyntaxError: Unexpected token .

  To fix this, just wrap the object you're returning with parentheses.

  const person = ( firstName , lastName ) => ({
    first : firstName,
    last : lastName
  });
  console.log( person("Nick" , "Jonas") );
  

---

3. Objects and Arrays

• Destructuring Objects and Arrays

  Destructuring assignment allows you to locally scope fields within an object and tend to declare which values will be used. Click here to learn more.

  e.g. const { bread , meat } = sandwich; , const [, , third] = [1 , 2, 3];

• Object Literal Enhancement

  It's the process of restructuring or putting the object back together. With object literal enhancement, we can grab variables from the global scope and add them to an object.

  const bread = "modern";
  const meat = "tuna";
  const sandwich = { bread , meat }
  

• Spread Operator

  The spread operator is three dots ( ... ) that perform several different tasks. First, the spread operator allows as to combine the contents of arrays.

  e.g. const combinedArray = [ ...firstArray, ...secondArray ]

  The spread operator can also be used to get the remaining items in the array.

  e.g. const [ first, ...exceptFirst ] = myArray;

  exceptFirst array will contain all the elements of myArray except the first element. myArray[0] will be assigned to first .

  We can also use the three-dot syntax to collect function arguments as an array. When used in a function, these are called rest parameters.

  function directions(...args) {
  let [start, ...remaining] = args;
  let [finish, ...stops] = remaining.reverse();
  }
  

  The spread operator can also be used for objects.

---

4. Classes

JavaScript uses something called prototypical inheritance. This technique can be wielded to create structures that feel object-oriented. ES2015 introduced class declaration, but JavaScript still works the same way. Functions are objects and inheritance is handled through the prototype.

When you are creating a class, the name of the class is typically capitalized. once you have created a class, you can create a new instance of the class using the new keyword. Classes can also be extended. When a class is extended, the subclass inherits all the properties and methods of the super class.

class Vacation {
  constructor (destination, length) {
    this.destination = destination;
    this.length = length;
  }
print( ) {
    console.log(`${ this.destination } will take ${ this.length } days.`);
  }
}
class Expedition extends Vacation {
  constructor ( destination, length, gear) {
    super( destination, length );
    this.gear = gear;
  }
print( ) {
    super.print( );
    console.log( `Bring your ${ this.gear.join( " and your " ) }` );
  }
}

const trip = new Expedition( "Mt. Everest", 10, [
  "sunglasses",
  "ropes",
  "camera"
] );

trip.print( );
// Mt. Everest will take 10 days.
// Bring your sunglasses and your ropes and your camera

---

5. Modules

A JavaScript module is a piece of reusable code that can easily be incorporated into other JavaScript files without causing variable collision. JavaScript modules are stored in separate files, one file per module. Click here to learn more.

e.g. export default new Expedition( "India", 1 , [ "water" , "snack" ] )

---

6. Asynchronous JavaScript

With the modern web, we need to perform asynchronous tasks. These tasks often have to wait for some time to finish before they can be completed. Like streaming a video or accessing a database. With JavaScript asynchronous tasks do not block the main thread.

Watch the video below to get an overview of asynchronous programming.

Click here for a full tutorial series on asynchronous JavaScript.

Watch the video below to understand how browsers handle asynchronous code.

---

7. Functional Programming with JavaScript

When you start to explore React, you'll likely notice that the topic of functional programming comes up a lot. Functional techniques are being used more and more in JavaScript code, particularly React projects.

• What it Means to be Functional

  JavaScript supports functional programming because JavaScript functions are first-class citizens. This means that functions can do the same things that variables can do. In JavaScript functions can represent data in your application, functions can be sent to other functions as arguments and can also be returned from other functions.

  Watch the video below to learn about all functional concepts.

  https://youtu.be/e-5obm1G_FY

• Imperative Versus Declarative

  Functional programming is a part of a larger programming paradigm: declarative programming. Click here to learn more.

• Array Methods

  Click here to learn how to use map , filter and reduce in JavaScript.

---

Moving On

Now that you've been introduced to core concepts of JavaScript you need to learn before starting React you could put everything you've learned together and start building some small projects.

Click here for some cool projects that you can work on.

Kudos to you for reading through the blog and good luck for your future endeavors on react and web development.

---