Introduction
This article is intended for developers who have little or no knowledge about JavaScript but would like to transition into ReactJs. JavaScript is a widely-used programming language which plays an important role in modern web development. It is used for building functional and interactive user interfaces. ReactJs on the other hand is a popular JavaScript library for building web applications. In this article we’ll guide you through important JavaScript concepts to learn before taking ReactJs.
Article Objective
At the end of this article, the reader will learn about the important concept required for a solid background in JavaScript before transitioning into ReactJs. Also the reader would learn by seeing coding examples of some concept and get resources to further understand each concept listed below.
Variables and Data types
In JavaScript, variables are “named storage” for data. Variables can be used to store data such as strings, arrays and numbers e.t.c. Variables can be declared by using the “var” keyword, followed by the name of the variable and the assigned value which could be (strings, numbers or arrays).
var name = "David"; // strings
var radius = 2.77; // number
var user = {
name: "John Doe",
age: 30
} // object
var isDark = false; // boolean
Learn more about JavaScript variables click here
Data types in JavaScript describe the kind of data that can be stored in variables. It includes;
- Strings
- Numbers
- Symbol
- Boolean
- Object
- Null
- Undefined
- Bigint
You can learn more about them here
Operators and Expression
Operators are used to perform mathematical or logical operations between operands. Some common operators includes;
. Arithmetic operators
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Modulus (%)
. Logical operators
- AND ( && )
- OR ( || )
- NOT ( ! )
. Comparison operators
- Greater than (>)
- Less than (<)
- Equals to ( ==)
- Not equals to ( !=)
Expressions are combinations of variables, values and operators that produce results. For example;
var x = 20;
var y = 15;
var score = x + y; // 35
Functions
Functions are reusable blocks of code that performs a specific task, and can be called anywhere in your program. This eliminates the need of rewriting the same code again. Functions takes input (arguments) and returns output (return values) and its declared using the “function” keyword. For example
function addNumbers(a, b) {
return a + b;
}
The above example creates a function “addNumbers” that takes two parameters ( “a” and “b” ) and returns their sum when called. Lets see a real example;
function addNumbers(a, b) {
return a + b;
}
addNumber(3,2); // output = 5;
The above example calls the functions with two parameters ( 3 , 2) and the returned value after execution is 5.
Learn more about functions here
Conditional Statement
A conditional statement allows you to execute code only if a certain condition is met. There are several types of conditional statements in JavaScript, the most common of which is the if-else statement. It allows you to execute code if a program is true and another block of code if the statement is false. For example;
var score = 20;
if (score >= 20) {
console.log("you passed")
}else{
console.log("try again")
}
The first condition ran successfully, because the score was equal to 20. Learn more about conditional statements here
Loops
Loops allows you to write a block of code over and over again or until a condition is met. The two most commonly used loops are “For” and “While” loops.
For loops creates a statement with 3 optional expressions;
for (expression 1; expression 2; expression 3) {
statement
}
- Expression 1 is executed (one time) before the execution of the code block.
- Expression 2 defines the condition for executing the code block.
- Expression 3 is executed (every time) after the code block has been executed.
for ( i = 0; i < 10; i++){
console.log(i) // 0,1,2,3,4,5,6,7,8,9
}
While loop repeats a block of code as long as the condition is true. For example;
var i = 0;
while (i < 10) {
console.log(i);
i++;
} // 0,1,2,3,4,5,6,7,8,9
Learn more about loops here
Arrays and array methods
Arrays are ordered lists of values and each value is an element specified with an index.
Arrays are declared using the square bracket ‘ *[ ] *“ and its elements are separated by commas. For example;
const myArray = [“baby”, "two", 1, true];
The above example creates an array “myArray” which contains 2 strings ( “baby” and “two”), a number (1) and a boolean (true).
Array methods are built-in functions that allows you to manipulate the content of an array, it includes;
- push(): Adds one or more elements to the end of the array.
- pop(): Removes the last element from the array and returns it.
- shift(): Removes the first element from the array and returns it.
- unshift(): Adds one or more elements to the beginning of the array.
- slice(): Returns a new array that contains a subset of the original array.
- splice(): Removes or replaces elements in the array and returns the removed elements.
Learn more about Array and its methods here
Destructing
In ES6, we are able to extract data from arrays and objects into distinct variables using destructive assignment.
The process of destructuring an array involves creating variables to correspond to the elements of the array. For example
const myArray = [1, 2, 3, 4, 5];
const [a, b, c, d, e] = myArray;
console.log(a, b, c, d, e); // Output: 1 2 3 4 5
In the above example, the variables “a, b, c, d, e” are created and assigned to the variables in “myArray”
You can learn more about Destructing in JavaScript here
Template literals
Template literals are ECMAScript 6 (ES6) features that allow you to embed expressions and variables in strings. Template literals are enclosed in backticks (`) and can include placeholders for expressions, using the dollar sign ( $ ) syntax. For example
const name = "David";Hello, ${name}!
const greeting = ;
console.log(greeting); // Output: Hello, David!
In the above example, the variable name is embedded inside the string using the ${} syntax, allowing you to create a dynamic string that incorporates the value of the name variable.
Learn more about Template literals here
Ternary operators
Ternary operator is a shorthand way of writing an if statement. It is a way of expressing if statement in a single line of code. The syntax is written below;
condition ? expression1 : expression2
Example of a ternary operator is found below;
var score = 25;
var result = score >= 20 ? "You passed : "Try again.";
console.log(result); // You passed.
In the above example, the ternary operator checks to see if the value of score is greater than or equals to 20. If true, the text “You passed” is assigned to the variable result. If not, the variable “Try again” is assigned to the variable result.
Learn more about Ternary operators here
Modules Import / Export
Import and Export are new features in JavaScript introduced to allow the reusability of codes. Its keywords “Import” and “Export” help to utilize the code of one file to another, divide the code into smaller, reusable parts and also makes it very easy to maintain.
Export: You can export values, functions, or objects from a module using the export statement. For example;
// module.js
export const myFunction = () => {
console.log("Hello, David");
};
import : you can also import values or functions from a module using the import statement. For example;
// main.js
import { myFunction } from "./module";
myFunction(); // Output: Hello, David!
In the above example, we exported the “myFunction” from the “module.js” file and imported it into the “main.js” file. This process can allow us use the “module.js” in multiple file by just exporting and importing it when needed.
You can learn more about Import and Export here
Conclusion
The above-mentioned topics are important and relevant topics in JavaScript every developer is expected to know before transitioning to ReactJS.
Top comments (1)
this is a nice post for someone like me who has just started learning react!