5 Key Concepts to Level Up Your JavaScript Skills
The goal of this article is to give a brief introduction to some essential concepts for aspiring JavaScript developers. It is always a good idea to learn about the core concepts of a language or a framework to write code effectively and efficiently. However, if you want to learn something quickly, reading lengthy descriptions would be a hassle. Therefore, this article will explain some core concepts as simply as possible with the following.
- A short description of the concept
- Why it is relevant
- A practical application (Code example)
Grab a coffee and sit tight! These concepts will change the way you code and help you become an efficient developer with quality code.
The concepts that we will explore
- Destructuring
- Spread Syntax
- Rest Syntax
- Array methods
- Value vs. Reference Variable Assignment
The above concepts were picked based on popularity in the community. Let’s dive into each of these in detail.
1. Destructuring
There are a few ways to extract properties from an object. Destructuring is one of them. It helps to cleanly extract the properties of an object, assign values from an array or assign properties from an object to variables. But why is it better than other methods? It allows extracting multiple properties in a single statement, can access properties from nested objects, and also assign default values to properties if it does not exist.
Consider the following object.
const profile = {
name: "Harry",
age: 15,
country: "UK"
};With the use of destructuring, you can extract one or more properties of this object in a single statement.
const { name, age } = profile; console.log(name, age);
// Harry 15
Assigning a default value to a property is another use of destructuring. A non-existent property will return the assigned default value.
const { name, age, school = "Hogwarts" } = profile;console.log(school);
// Hogwarts
Moreover, array destructuring is also very popular to assign default values to variables, swap values among variables, etc. Before ES6 was introduced, there was no mechanism to extract all data at once. Therefore, destructuring is an instrumental concept for cleaner code.
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
2. Spread Syntax
In simple terms, the spread operator is used on an iterable (e.g.: arrays, strings) and it helps to expand an iterable into individual elements. The syntax of the spread operator is three dots ( ... ).
For example, let’s consider a function which expects three arguments and we have an array of three elements. With the use of the spread syntax, we could pass the array to this function, where it would iterate the array and assign the elements to the relevant arguments of the function.
function sum (a, b, c) {
return a + b + c;
}const numbers = [1, 2, 3];console.log(sum(...numbers));
// 6
Before the spread operator was introduced in ES6, passing the arguments to a function using an array was much more complicated.
Another use of the spread syntax is concatenating arrays. Let’s say we have two arrays such as follows.
const vegetables = ["carrot", "pumpkin"];
const fruits = ["apple", "pear"];Before the spread syntax was introduced, we had to use the array.concat method to combine these arrays. However, with the spread syntax array combining has been made very easy.
const newArray = [ ...vegetables, ...fruits ];console.log(newArray);
// ["carrot", "pumpkin", "apple", "pear"]
Further, you could also use the spread operator to create copies of objects with the exact same content, but with a different reference. We will speak about this in more detail under the Value vs. Reference Variable Assignment topic later in this article.
3. Rest Syntax
The rest syntax uses the same convention as the spread syntax. The difference between the rest and spread syntax is that while spread copies everything, rest is used when we want to retrieve all remaining elements.
const numbers = [1, 3, 2, 6, 8];const [1, 3, ...rest] = numbers;console.log(rest);
// [2, 6, 8]
4. Array Methods
JavaScript array methods provide an elegant, clean solution for data transformation in arrays. Out of the many array methods available, we will speak about 4 most important methods, map, filter, reduce and some .
Map
This method returns an array where each element in the array is transformed according to the specified function.
For example, if you need to multiply each element of an array by 2, we could use the map method to get the job done in a single statement, without any complex loops. Further, the map method does not mutate the original data.
const array = [1, 2, 3];
const mapped = array.map(element => element * 2);console.log(mapped);
// [2, 4, 6]
Filter
This method returns an array of elements where the function returns true .
For example, if you need to retrieve the even numbers from an array, you could filter the array as follows.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(element => element % 2 === 0);console.log(evenNumbers);
// [2, 4, 6]
Reduce
This method accumulates values as specified by a function.
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);console.log(reduced);
// 21
These three methods are powerful data transformation methods in arrays and result in a very clean, readable code. You can write simpler, shorter code with these without having to worry about loops or branching.
These array methods are very important for a JavaScript developer as it allows less code, less manual work, and improved readability.
Some
This method returns true if some element in the array passes the test specified by the given function. If none of the elements corresponds to the function, this method returns false
const array = [1, 2, 3, 4, 5];const isEven = (element) => element % 2 === 0;console.log(array.some(isEven));
// true
This method is highly useful in finding elements in an array that conforms to specific conditions as opposed to the traditional way of iterating through the array to find the result.
5. Value vs. Reference Variable Assignment
How JavaScript assigns values to variables is one of the most crucial concepts any JavaScript developer should know. If you do not know this, you might assign values to variables and accidentally change it, which will lead to unexpected bugs in the code.
JavaScript ALWAYS assigns variables by its value. However, there are two major categories. If the assigned value is of a JavaScript primitive type (boolean, null, undefined, string, number , bigint and symbol), the actual value is assigned to the variable. But, if the assigned value is an Array, Function, or Object , a reference to the object in memory is assigned instead of the actual value.
Let’s have a look at some examples to understand this concept better.
Consider the variables name1 and name2 .
let name1 = "John";
let name2 = name1;The variable name2 has been assigned the variable name1 . Since these variables are of the primitive type, the actual value (“John”) gets assigned to both variables. Therefore, these two variables can be considered as two separate variables with the same value. Due to this reason, re-assigning the second variable makes no impact on the first variable.
name2 = "Peter";console.log(name1, name2);
// "John", "Peter"
This is called assigning a variable by value.
The next method is assigning a variable by reference. If the variable type is either array, object, or a function, the variable is allocated a reference in memory instead of the actual value.
Let’s consider the following object assignment.
let obj1 = { name: "Lucy" }
let obj2 = obj1;The variable obj2 gets the same memory reference as obj1 with this assignment. Therefore, mutating obj2 will also impact obj1 as they are not considered as separate variables anymore. Both of these variables have the same reference in memory.
obj2.name = "Mary";console.log(obj1);
// { name: "Mary" }console.log(obj2);
// { name: "Mary" }
If you need to create a copy of the same object with a different reference in memory, you can use the spread operator. Mutating the newly created object in this manner would not affect the first object as they have different references in the memory.
let object1 = { name: "Lucy" };
let object3 = {...object1}object3.name = "Anne";console.log(object1);
// { name: "Lucy" }console.log(object3);
// { name: "Anne" }
Conclusion
Mastering these concepts will help you write better and clean code. I hope you gained some knowledge about the concepts discussed and how important they are. Stay tuned for more articles about important JavaScript concepts and how to use them in the future. Let us know in the comments section if you need to learn about any specific concept or technique that would improve your coding and engineering skills.
