Mastering the Fundamentals: 7 Essential JavaScript Tips
Master the Fundamentals and Become a More Efficient Javascript Coder
Ready to score some touchdowns with your JavaScript skills? Just like a football team, having a solid foundation of fundamental techniques is crucial to your success. In this article, we’ll provide you 7essential tips to help you to success in your javascript projects. So put on your helmet and get ready to rumble — it’s time to take your JavaScript game to the next level!
1. “==” or “===” operator
In Javascript, the double equals operator “==” is used to compare the value of 2 variables without care about the type. Whereas the triple equals operator “===” compare the value and the type of two variables
const dogName1 = 'Cooper';
const dogAge1 = 1;
const dogName2 = 'Rocky';
const dogAge2 = '1';
const dogName3 = 'Ruby';
const dogAge3 = [1];
console.log(dogAge1 === dogAge2)
// Output: false
console.log(dogAge1 == dogAge2)
// Output: true
console.log(dogAge1 === dogAge3)
// Output: false
console.log(dogAge1 == dogAge3)
// Output: true
console.log(dogAge2 === dogAge3)
// Output: false
console.log(dogAge2 == dogAge3)
// Output: true
// != and !== operators
console.log(dogAge2 !== dogAge3)
// Output: true
console.log(dogAge2 != dogAge3)
// Output: falseAs a result, the triple equals operator may be more reliable for making comparisons, particularly when you want to ensure that the values being compared are of the same type. However, there may be certain cases where the double equals operator is more appropriate, such as when you want to perform a comparison that includes values of different types.
Moreover, I add, at the end of the code above “!=” and “!==” operators, they work the same way than “==” and “===” operators, but they check if two values are different or not.
So, unless you’re feeling adventurous (or just really lazy), it’s probably best to stick with the triple equals operator “!==” and “===”.
2. Destructuring element
In javascript, destructuring can be a very convenient way to extract values from data structures and assign them to variables.
Example 1: an array completly assign
const dogList = ['Cooper', 'Rocky', 'Ruby'];
const [dog1, dog2, dog3] = dogs;
console.log(dog1); // Output: "Cooper"
console.log(dog2); // Output: "Rocky"
console.log(dog3); // Output: "Ruby"Example 2: an array partially assign
const dogList = ['Cooper', 'Rocky', 'Ruby'];
const [dog1, , dog3] = dogList;
console.log(dog1); // Output: "Cooper"
console.log(dog3); // Output: "Ruby"Example 3: an object with same variable names
const dog = {
name: 'Cooper',
race: 'Dalmatian',
age: 3
};
const {name, race, age} = dog;
console.log(name); // Output: "Cooper"
console.log(race); // Output: "Dalmatian"
console.log(age); // Output: 3Example 4: an object with new variable names
const dog = {
name: 'Cooper',
race: 'Dalmatian',
age: 3
};
const {name: nameOfDog, race: raceOfDog, age: ageOfDog} = dog;
console.log(nameOfDog); // Output: "Cooper"
console.log(raceOfDog); // Output: "Dalmatian"
console.log(ageOfDog); // Output: 33. The spread operator
The spread operator is so usefull!! It can save lot of time and effort when working with arrays and objects. It can also make your code more concise and easier to read.
Example 1: you want to copy an object or an array
const dog = {
name: 'Cooper',
race: 'Dalmatian',
age: 3
};
const dogList = ['Cooper', 'Rocky', 'Ruby'];
const dogCopy = {...dog}
console.log(dogCopy)
// Output: {name: "Cooper", race: "Dalmatian", age: 3}
const dogListCopy = [...dogList]
console.log(dogListCopy)
// Output: ["Cooper", "Rocky", "Ruby"]Example 2: you want to merge 2 arrays
const dogList1 = ['Cooper', 'Rocky', 'Ruby'];
const dogList2 = ['Rudy', 'Rex', 'Murphy'];
const dogCompleteList = [...dogList1, ...dogList2]
console.log(dogsCopy)
// Output: ["Cooper", "Rocky", "Ruby", "Rudy", "Rex", "Murphy"]Example 3: you want to update and/or expand an existing object
const dog = {
name: 'Cooper',
race: 'Dalmatian',
age: 3
};
const updatedDog = {...dog, age: 4, gender: 'male'};
console.log(updatedDog);
// Output: {name: "Cooper", race: "Dalmatian", age: 4, gender: "male"}4. Ternary operator
The ternary operator is a convenient way to write a simple conditional statement in a single line of code, making it more concise and easier to read. It works in that way:
const dog1 = {
name: 'Cooper',
race: 'Dalmatian',
age: 3
};
const dog2 = {
name: 'Rocky',
race: 'Doberman',
age: 1
};
const olderDog = (dog1.age > dog2.name) ? dog1 : dog2;
// condition ? value1 : value2
console.log(olderDog);
// Output: {name: "Cooper", race: "Dalmatian", age: 3}- The condition is evaluated first. If it is true, the expression returns value1. If it is false, the expression returns value2.
- The value1 and value2 can be any valid expression, including another ternary operator.
5. Optional chaining operator
The optional chaining operator is useful for avoiding errors when working with deeply nested objects or objects with optional properties. It can also be used to safely invoke methods on an object, even if the object or one of its ancestors is null or undefined.
const dog1 = {
name: 'Cooper',
race: 'Dalmatian',
age: 3,
master: {
fistname: 'Sébastien',
lastname: 'Le Bosser',
gender: 'male'
}
};
// Without optional chaining
let masterGender;
if (dog1.master) {
masterGender = dog1.master.gender;
}
// With optional chaining
const masterGender = dog1.master?.gender;In the example above, the optional chaining operator “?.” is used to access the gender property of the master object. If the master object is null or undefined, the expression on the right side of the optional chaining operator will not be evaluated and masterGender will be undefined.
6. Nullish, Falsey values and nullish coalescing operator
In JavaScript, a nullish value is a value that is either null or undefined. whereas falsey value is 0, an empty string or false. There is a big difference between both, a nullish value represent the absence of value and a falsey value represent the presence of value but considered as falsey.
const name = null; // nullish
const race = undefined; // nullish
const age = 0; // falsey
const defaultName = name ?? 'Cooper'; // 'Cooper'
const defaultRace = race ?? 'Dalmatian'; // 'Dalmatian'
const defaultAge = age ?? 2; // 0In the example above, I use the nullish coalescing operator “??” to distinguish nullish and falsey value. That is why defaultName is Cooper and defaultRace is Dalmatian but defaultAge is 0 because 0 is a falsey value and the nullish coalescing operator keep falsey value
7. Logical operators
There are 3 logical operators
- Logical AND “&&”: This operator returns true if both operands are true, and false otherwise. For example:
const name = "Cooper";
const isCat = false;
const isFish = false;
const isDog = true;
if(isDog && name){
console.log(1)
}
if(isDog && isCat){
console.log(2)
}
if(isCat && isFish){
console.log(3)
}
// Output:
// 1- The logical OR operator “||”: it returns true if at least one of the operands is true. Note that the logical OR operator has a strictless comparison than nullish coalescing operator
const name = "Cooper";
const race = undefined;
const age = 0;
const isCat = false;
const isFish = false;
const isDog = true;
if(isDog || name){
console.log(1)
}
if(isDog || isCat){
console.log(2)
}
if(isCat || isFish){
console.log(3)
}
// Output:
// 1
// 2
const defaultAge = age || 1; // 1- Logical NOT “!”: This operator negates a boolean value
const name = 'Rex';
const isCat = false;
console.log(!isCat)
// Output: true
console.log(!!name)
// Output: trueAs you can see above, I also use “!!” operator that is allow me to transform a value to boolean.
Thank you for reading my article! I hope these tips have helped you get a better understanding of the basics of JavaScript and provided you with some useful techniques to improve your coding skills. Remember, mastering the fundamentals is the key to building a strong foundation as a JavaScript developer. Keep practicing and learning, and you’ll be well on your way to becoming a pro! I have a lot of other tips to share so follow me to keep in touch!
