Javascript Concept You Should Know

There are many things to learn when it comes to mastering JavaScript, and it can take years to fully grasp the language. However, there are key concepts that serve as essential stepping stones in your journey to mastering JavaScript—at least enough to build your first digital application.

Based on my experience as a Full Stack Engineer for nearly three years, here are the fundamental concepts I believe are the most important to learn first.

Basic Javascript is always an entrypoint

Fundamental concepts such as variables, data types, operators, conditionals, arrays, functions, objects, events, and others are quite important. It's not necessary to dive into details, but just understanding the basic concepts is enough. There's no need to, and I wouldn't recommend, memorizing each method individually. Not only is it unnecessary, but it's also inefficient because documentation will become one of our best friends. So, don't do it.

For this step, it's a good idea to check out some free courses or the freeCodeCamp JavaScript curriculum as a learning resource. Documentation sites like MDN and JavaScript.info can also serve as useful references.

Equality comparison

The concept of Equality Comparison refers to comparing two operands using the operators (==) or (===), which will return a Boolean result. In JavaScript, this concept can be tricky to implement.

JavaScript recognizes two ways to perform this comparison:

equality (==)

This method will always convert and compare operands that have different types.

console.log(1 == 1);
// Expected output: true

console.log('hello' == 'hello');
// Expected output: true

console.log('1' == 1);
// Expected output: true

console.log(0 == false);
// Expected output: true

In statements 1 and 2, we can understand why these operations return true. However, in statement 3, the value '1' will first be converted to a number because '1' is a valid numeric string, so the comparison becomes (1 == 1), which results in true.

Similarly, in statement 4, the value false will first be converted to the number 0, so the comparison becomes (0 == 0), which also results in true.

strict equality (===)

Unlike equality, this method will not perform any conversion before making the comparison.

console.log(1 === 1);
// Expected output: true

console.log('hello' === 'hello');
// Expected output: true

console.log('1' === 1);
// Expected output: false

console.log(0 === false);
// Expected output: false

Statement 3 compares the string value '1' with the number 1. Since the data types are different, the result is false. Similarly, statement 4 compares the number 0 with the boolean value false, which also results in false.

Comparisons like this are commonly used in logical statements and will frequently appear in our code. Understanding the difference between these concepts will make it easier to apply logic correctly and accurately.

Asynchronous Operations

By default, JavaScript is synchronous, which means code will be executed line by line in order, and it will wait for one line of code to finish executing before moving on to the next one.

/ synchronous operations
console.log('First')
console.log('Second')
console.log('Third')

# Output
First
Second
Third

However, JavaScript also supports asynchronous programming, which allows some operations (I/O tasks, network requests, or timeouts) to run in the background without blocking the execution of the main code. When asynchronous code is used, JavaScript doesn't need to wait for the operation to finish and will move on to the next line of code immediately.

// asynchronous operations
console.log('First')
setTimeout(() => {
  console.log("Second");
}, 2000); // Delayed by 2 seconds
console.log('Third')

# Output
First
Third
Second # Printed because the operation delayed

To handle asynchronous operations, JavaScript provides two methods: Promises and Async/Await.

A Promise represents a value that might not be available yet, but will be in the future (e.g., after an operation completes). The then() and catch() methods are used to handle the result of asynchronous operations.

const promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Operasi berhasil !");
  } else {
    reject("Terjadi kesalahan!");
  }
});

promise
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

On the other hand, Async/Await is a simpler and, in my opinion, cleaner way to handle asynchronous operations. We declare a function as asynchronous by adding the async prefix, and then use await to wait for a Promise to resolve inside the async function. This makes the code look more like synchronous code.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

Error Handling

One of the weaknesses of JavaScript is that there's no guarantee that the code we write will be free of errors before we execute it. This might not be an issue during the development phase, but when it happens in the production phase, it becomes a critical problem, especially when it affects business operations.

For me, it's important to adopt a mindset where, when working with JavaScript for application development, we should always consider potential failure cases that might occur in our code. We should strive to write defensive code. Always check if the variables we assign are valid both in terms of data type and value. Make sure the value isn't null or undefined unless we explicitly want it to be. This is crucial because, when an error occurs, JavaScript will shut down the entire code if we don't handle it correctly.

// Function that will return first two letter from given string
function printFristTwoLetter(str) {
  const result = str.substring(0,2)
  console.log(result)
}

printFristTwoLetter(5)
// Expected throw error str.substring is not a function
// because str is not a string

The example above shows how a function can fail, because in JavaScript, we don't have any guarantees that the parameters used in a function will be what we expect. Therefore, we need to make the code safer.

// do checking for parameter
function printFristTwoLetter(str) {
  if(typeof str !== 'string') return console.log('Parameter is not string')
  const result = str.substring(0,2)
  console.log(result)
}

printFristTwoLetter(10)
// Expected console a string 'Parameter is not string' instead throw an error


// or handle with try catch block
function printFristTwoLetter(str) {
  const result = str.substring(0,2)
  console.log(result)
}

try {
  printFristTwoLetter(10)
} catch(error) {
  console.log(error.message)
}

// expected to throw an error but will catch on catch block, resulting a console with string of error message

Another alternative that I think better protects our code is using TypeScript for type-checking, which aims to achieve the same goal as described earlier.

Array Methods

Array methods in JavaScript are likely some of the most commonly used methods when working with medium to large-scale applications. I often use these methods when manipulating data from APIs. Methods like map(), filter(), sort(), and reduce() are some of the key ones to master first. There are other array methods that may be less commonly used depending on the specific use case, but what matters most is understanding the core concepts behind them so that when the need arises, you can quickly implement them.

/ using map() method
const numbers1 = [1, 2, 3, 4, 5];
const squaredNumbers = numbers1.map((num) => num * num);

console.log(squaredNumbers); 
// Output: [1, 4, 9, 16, 25]

// using filter() method
const numbers2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers2.filter((num) => num % 2 === 0);

console.log(evenNumbers);
// Output: [2, 4, 6, 8, 10]

ES Modules and Syntax

Modules were introduced in JavaScript with the ES6 version (ECMAScript 2015), allowing us to split code into separate modules. Before this, JavaScript used a single-file system, making it difficult to organize code, especially in large applications.

The ES6 update also brought several new features that made JavaScript more modern and efficient, such as destructuring (for easier extraction of values from arrays or objects), the spread operator (for merging arrays or objects), and template literals (for writing strings more flexibly, including variable interpolation using backticks). These new features have made application development easier and more structured.

// De-structuring object
const object = {
  field1: 'Hello',
  field2: 'World'
}
const { field1, field2 } = object
console.log(field1); 
// Output: Hello
console.log(field2); 
// Output: World


// Spread Operator
const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [6, 7, 8, 9, 10]
const combined = [...numbers1, ...numbers2]
console.log(combined)
// Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


// String Literals
const str1 = 'Hello'
const str2 = 'World'
const text = `${str1} ${str2}`

console.log(text)
// Output: Hello World

Understanding these concepts allows us to develop JavaScript applications that are always up-to-date and leverage the latest technologies.

Conclusions

To master JavaScript, it's essential to first understand the fundamental concepts such as variables, data types, operators, functions, objects, and more. While mastering these concepts deeply will take time, a solid understanding of these basics is enough to start our journey in building digital applications. Additionally, concepts like equality comparison, asynchronous operations with Promises and Async/Await, error handling, and array methods are all crucial to master in order to improve the quality and efficiency of application development.