Sometimes we want to write the codes we use in our daily lives in a simpler way. While these make our work much easier in parts, some can ruin readability. In this article, I will share a few tips about javascript.
When writing the subheadings, I will write the general names in English. In this way, I will give the keyword for those who want to research.
Conditional Key in Objects
Let's assume we have an object. In order to define an additional property for this object, we need to set a condition first. If this property is empty, we don't want to list this key. We can use the
Logical And header for this. Let's look at our example.
const name = "Berat";
const surname = "Bozkurt";
const age = 23;
const photo = null;
const title = "frontend developer"
const user = {
name,
surname,
age,
...photo && {photo},
...title && {title}
}
console.log(user); {name: "Berat", surname: "Bozkurt", age: 23, title: "frontend developer"}
In the example above, since the photos variable does not return any value, we did not add it to the user object and created a simpler structure.
I use this structure more when I do not want to send empty keys when sending to the API. This way, it creates a cleaner structure. It is also easier to control when there are many features in our object.
Nullish Coalescing Operator (??)
If the value of the variable we control is null or undefined, we can assign any value we want. We can embody this with an example. Let's say we have a component called PostCard. Let's say there is a featured image inside this component. If this featured image is not added, let's say we will load an image with a gray background here. Let's put this into code.,
var firstImage =
"https://tr.m.wikipedia.org/wiki/Dosya:Image_created_with_a_mobile_phone.png";
var secondImage = null;
var firstPostImage = firstPostImage ?? "https://via.placeholder.com/150";
var secondPostImage = secondImage ?? "https://via.placeholder.com/150";
console.log(firstPostImage); // https://tr.m.wikipedia.org/wiki/Dosya:Image_created_with_a_mobile_phone.png
console.log(secondPostImage); // https://via.placeholder.com/150
Logical And (&&)
If the value of the variable we control is not null or undefined, we can assign the desired value. I can give the following example for a concrete example. If the user has successfully logged into the system, let's say 'Welcome Berat Bozkurt'.
var user = {
name: "Berat",
surname: "Bozkurt",
isLogin: true,
};
var welcomeMessage =
user.isLogin && "Welcome " + user.name + " " + user.surname;
console.log(welcomeMessage); // Welcome Berat Bozkurt
I would like to start technical articles this way and end the article with the hope of writing more soon. Good luck!
