Javascript basics you need to know before moving to Node.js

While JavaScript frameworks such as Node, Express, etc are gaining popularity, many incoming coders struggle to get started with them.

So I have complied all the basic topics you need to know in order to start working on frameworks. (Obviously you could spend a lot more time on many other topics but these are the bare minimum to get started with coding)

Source: https://flatlogic.com/

Before learning React, you need to have a good understanding of these JavaScript topics:

Basic Syntax

// Example
let x = 5;
console.log(x + 3);

// Variables, datatypes, loops and conditions

Understanding the basic syntax of JavaScript involves grasping the fundamental structure of the language. This includes declaring variables, using data types, and employing control flow structures such as loops and conditionals. Mastery of basic syntax is crucial for writing coherent and functional JavaScript code.

ES6+ Features:

// New way to write functions
// Example (let/const, arrow function)
const add = (a, b) => a + b;

// Old way to write functions
function add(a, b) {
    return a + b;
}

ES6+ features, introduced in ECMAScript 2015 and subsequent versions, bring modern enhancements to JavaScript. Features like let and const for variable declarations, arrow functions for concise function syntax, and template literals for more dynamic string creation improve code readability and developer efficiency. We will cover more features towards the end.

Template Literals

// Using backtick to create dynamic strings
const name = 'John';
console.log(`Hello, ${name}!`);

// Without using backticks to create dynamic strings
const name = 'John';
console.log('Hello, ' + name + '!');

Template literals, denoted by backticks, allow the creation of more dynamic and readable strings in JavaScript. They enable the easy embedding of variables and expressions within strings, enhancing code clarity and simplifying the process of building complex strings.

Array Method

// Example (map)
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);

Array methods in JavaScript, such as map, filter, and reduce, provide powerful tools for manipulating arrays. They allow developers to perform common operations like iteration, transformation, and aggregation more efficiently and with less boilerplate code.

Object Property Shorthand

// Example with Object Property shorthand
const a = 10, b = 20;
const obj = { a, b };
console.log(obj);

// Example without Object property Shorthand
const a = 10, b = 20;
const obj = { 
  a: a,
  b: b 
};
console.log(obj);

Object property shorthand is a feature that simplifies the assignment of variables to object properties. It allows developers to create objects with properties named the same as the variables being assigned, reducing redundancy and improving code conciseness.

Destructuring

// Example (object destructuring)
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age);

// Example without destructuring
const person = { name: 'Alice', age: 25 };
const name = person.name;
const age = person.age;
console.log(name, age);

Destructuring in JavaScript provides a concise syntax for extracting values from arrays or objects. This feature enhances code readability and simplifies the process of working with complex data structures by allowing developers to extract only the necessary values.

Rest Operator

// Example with rest operator
const sumWithRest = (a, b, ...rest) => {
  console.log(`a: ${a}, b: ${b}, rest: ${rest}`);
  return a + b + rest.reduce((acc, val) => acc + val, 0);
};
console.log(sumWithRest(1, 2, 3, 4, 5)); 


// Example without rest operator
const sumWithoutRest = (a, b, c, d, e) => {
  console.log(`a: ${a}, b: ${b}, c: ${c}, d: ${d}, e: ${e}`);
  return a + b + (c || 0) + (d || 0) + (e || 0);
};

console.log(sumWithoutRest(1, 2, 3, 4, 5)); 

The rest operator (...) in JavaScript is used to gather the remaining parameters of a function into an array. This feature is particularly useful when dealing with functions that accept a variable number of arguments, enabling more flexible and dynamic function definitions.

While both examples achieve the same result, the version with the rest operator is more flexible and concise, allowing the function to handle any number of additional parameters without explicitly listing them.

Spread Operator

// Example
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2);

The spread operator (...) in JavaScript allows for the expansion of elements in an array or properties in an object. It is instrumental in creating copies of arrays or objects, combining them, or simply spreading their elements in function arguments. The spread operator enhances code clarity and facilitates the manipulation of data structures.

Promises

// Example
const fetchData = () => new Promise(resolve => setTimeout(() => resolve('Data fetched!'), 2000));
fetchData().then(data => console.log(data));

Promises in JavaScript are a mechanism for handling asynchronous operations. They represent the eventual completion or failure of an asynchronous task and simplify the management of callbacks, making asynchronous code more readable and maintainable.

Async/Await Syntax

// Example
const fetchDataAsync = async () => {
  const data = await fetchData();
  console.log(data);
};
fetchDataAsync();

Async/await syntax in JavaScript simplifies asynchronous code* by allowing developers to write asynchronous functions in a more synchronous style. The async keyword is used to define functions that return promises, and the await keyword is used to pause execution until the promise is resolved, improving code readability and maintainability.

*Asynchronous code allows tasks to run independently, without blocking the main program flow. It enables non-blocking operations, where certain tasks, like fetching data or handling user input, can occur concurrently. JavaScript uses mechanisms like callbacks, promises, and async/await to handle asynchronous operations, improving program efficiency by avoiding unnecessary waits and making applications more responsive.

Import and Export Syntax

// Example (export)
// file: math.js
export const add = (a, b) => a + b;

// Example (import)
// file: main.js
import { add } from './math';
console.log(add(2, 3));

Import and export syntax in JavaScript is crucial for creating modular and maintainable code. The export keyword allows the definition of modules, making specific functionalities or variables accessible to other parts of the codebase. The import statement is then used to bring these functionalities into other modules, promoting code organization and reusability.

After understanding these topics, you are very well equipped to start with React.js

Keep coding!

Okay bbye!

Source: imgflip.com