DEV Community: Jeje ✨ (Джиджи)

What is Ternary Operator in JavaScript?

Jeje ✨ (Джиджи) — Sat, 14 Jun 2025 06:30:23 +0000

If you're learning JavaScript and came across something like this:

let message = age > 18 ? "Welcome!" : "Sorry, you're too young.";

...and thought, "What is that question mark doing in the middle of the code?"
You're not alone!

That is called a ternary operator.It might look strange at first, but it's actually a simple and powerful way to write decisions in code.

Let's break it down step by step.

What is the Ternary Operator?

The ternary operator is a conditional operator that evaluates a condition and returns one of two values depending on whether the condition is true or false.

It has this structure

condition ? expressionIfTrue : expressionIfFalse;

In other words, the ternary operator is a shortcut for writing a simple if-else statements in one line.
It's called ternary because it uses three parts:

A condition (something that is either true or false)
A result if the condition is true
A result if the condition is false

Example

Let's say you're writing a program to check someone's age:

let age = 20;
let message = age >= 18 ? "You can vote." : "You are too young to vote.";
console.log(message); // Output: "You can vote."

Here's what this code does:

It checks: is age 18 or more?
If yes, it gives the message: "You can vote."
If no, it gives: "You're too young to vote."

It's the same as writing:

let message;
if (age >= 18) {
  message = "You can vote.";
} else {
  message = "You're too young to vote.";
}

But shorter and cleaner!

When is it a good idea?

Ternary Operator is not meant to replace if-else statement. Use it when:

You want to choose between two values
You are assigning a value (like a message or label)
The decision is simple (easy to understand)
You want to write it all in one line

Example:

let isMember = true;
let price = isMember ? "$20" : "$35";

When should you avoid it?

Sometimes using the ternary operator can make your code harder to read, especially when:

The condition is too long or complex
You're stacking multiple ternaries on top of each other
You're not just returning values, but doing actions (like showing messages, logging in, etc.)

Example of what NOT to do:

let result = score > 90 ? "A" : score > 80 ? "B" : score > 70 ? "C" : "F";

In this case, it's better to use regular if-else blocks for things like this.

Final Verdict

The ternary operator is like a mini decision-making machine in JavaScript. Once you get the hang of it, you'll find it super useful for simple yes or no style logic.

Just remember these best practices:

use ternary for simple value decisions
keep it short and readable
Don't let it become a puzzle others have to solve
Don't use it to replace full blocks of logic ** Avoid nested ternaries unless absolutely necessary

If you can read it easily a day later, you're probably using it right. 😊

Understanding Type Coercion in JavaScript

Jeje ✨ (Джиджи) — Mon, 09 Jun 2025 05:49:19 +0000

In JavaScript, type coercion is the automatic or implicit conversion of one data type to another. It happens when JavaScript tries to make sense of different types being used together, or like when a number is added to a string, or when values are compared using loose equality (==).

For example:

console.log("5" + 1); // "51"
console.log("5" - 1); // 4

Did you notice the first one becomes a string and the second one becomes a number?
This is type coercion. JavaScript tries to be helpful by guessing what you want. Sometimes it gets it right, other times it causes bugs if you're not careful.

Two types of coercion

Implicit Coercion
JavaScript automatically converts the type for you.

"2" * 3    // 6 → string "2" is turned into number
true + 1   // 2 → true becomes 1

Explicit Coercion
You manually convert the type using functions.

Number("5");   // 5
String(123);   // "123"
Boolean(0);    // false

JavaScript uses internal rules called Abstract Operations in the spec to coerce values based on the operator or context. This happens because JavaScript tries to make a comparison or calculation work.

Types of value coercion

Let's look at how coercion works for each value type: string, number, and boolean.

String coercion

When JavaScript sees a + operator with one operand being a string, it converts the other operand to a string, and then concatenates. The + operator is the only arithmetic operator that triggers string coercion if either operand is a string.

"Hello" + 42    // "Hello 42"
true + " days"  // "true days"

Number coercion

Occurs in math operations like -,/, or with comparisons like <,>, and sometimes in loose equality (==). In this case, operands are converted to numbers unless + is involved with strings.

"10" - 3       // 7 → string becomes number
true * 2       // 2 → true becomes 1
null + 1       // 1 → null becomes 0

Boolean coercion

Used in logical expressions (if, while, for, etc).

Boolean("")     // false
Boolean("0")    // true
Boolean([])     // true

These values are falsy in JavaScript: false, 0, "", null, undefined, NaN
Everything else is truthy (even [], {}, "false", "0")

Loose equality (==) and coercion rules

The == operator allows type coercion during comparison.
Examples:

1 == "1"       // true
false == 0     // true
null == undefined  // true
[] == false    // true 😬

But be careful! These comparisons can be confusing, especially with arrays and objects.
Instead, use === (strict equality) which doesn't do coercion.

1 === "1"      // false

Why type coercion matters?

For one, it can be very useful for flexibility, but it can also become unpredictable.

Pros:

Less code to write
Can be useful in simple logic

Cons:

Can lead to bugs or weird behaviour
Harder to debug for beginners

Understanding when coercion happens helps you write cleaner code and avoid mistakes.

Best practices to avoid bugs

Here are some tips to stay safe when dealing with type coercion:

1. Use === instead of ==

Always prefer strict equality to avoid surprise conversions.

if (value === 0) { ... } // safer

2. Convert values explicitly

Don't rely on JavaScript to guess your intent.
Use Number(), String(), Boolean()instead.

const input = "5";
const num = Number(input); // good

3. Watch out for falsy values

Be mindful that "", 0, null, and undefined all count as false in conditionals.
Use === null or === undefined] when needed.if (value) { ... } // may skip valid values like 0`

4. Don't compare complex types (Like arrays or objects)

Even if they look the same, objects are compared by reference, not value.
{} == {} // false [] == [] // false

Final thoughts

Type coercion is one of those things that can make or break your JavaScript skills. It's okay to feel confused at first.

Just remember:

Know when JavaScript values
Use === and explicit conversions to avoid surprises
Test edge cases like empty strings, null, and undefined

How to Iterate Over a Plain Object in Javascript

Jeje ✨ (Джиджи) — Fri, 02 Sep 2022 10:08:51 +0000

Before continue on reading and follow the tutorials, ensure you satisfy the following prerequisite:

Working knowledge of Javascript data structure

Though not common, but sometimes you might find yourself in situations where you need to loop through a Javascript object. Unlike strings and arrays, objects, literal objects with curly brackets and key: value pair are not considered to be iterable.

So, if you go with the for... of method to iterate the following objects like so:

const fruitsQty = {
melon: 10, 
apple: 15, 
grape: 7, 
pineapple: 10, 
jackfruit: 22, 
strawberry: 14, 
orange: 30}

for (let exm of fruitsQty) {
console.log(exm)
}

You'll get an error.

However, if you present that object key:value pairs as an array, you'll be able to use the for...of method.

In order to do that, you need to use special methods:

Object.keys() to return an actual array containing the keys out of the object as an array
Object.values() to return an actual array made up of the values out of that object
Object.entries() which will return a literal nested arrays of the key:value pair of that object.

Object.keys(fruitsQty) // (7) ["melon", "apple", "grape", "pineapple", "jackfruit", "strawberry", "orange"]

Object.values(fruitsQty) // (7) [10, 15, 7, 10, 22, 14, 30]

Object.entries(fruitsQty) // ["melon" 10, "apple" 15, "grape" 7, "pineapple" 10, "jackfruit" 22, "strawberry" 14, "orange" 30

Now that we have those presented as an array (technically they are not turned into an array, we just sort of make array out of an object, ok apologies if this is confusing lol), we can use the previous for...of method to iterate that object because that does work with an array.

Here's an example of iterating over the quantity of the fruit

for (let quantity of Object.values(fruitsQty) {
console.log(quantity) 
}

//
10
15
7
10
22
14
30

Basically, using those three methods will allow you iterate over objects using the for..of method as if they are an array. You can also loop through them to get the total quantity of the fruits.

let sum = 0;

for (let quantity of Object.values(fruitsQty) {
sum += quantity;
}

// Each time it loops, the sum adds each fruit quantity
// 108

Since those keys and values are behaving like an array with those methods, you can also find out the length of the fruits quantity, like so:

// first, create a variable that stores the fruit quantity information as an array

let quantity = Object.values(fruitsQty);

console.log(quantity.length) // 7

Photography Portfolio with CSS Only

Jeje ✨ (Джиджи) — Wed, 03 Aug 2022 17:12:00 +0000

You can create a beautiful photography portfolio website with just a HTML and CSS. And yes, you can achieve that zoom photos effect without javascript.

Important CSS to apply

img {
width: 30%;
border-radius: 10px;
margin: calc(10%/6);
transition: all 0.5s ease;
}

The transition property makes sure when the zoom takes effect, it'll happen smoothly.

img:hover {
box-shadow: #f9fbe7 0px 13px 27px -5px, #fff59d 0px 8px 16px -8px;
margin: calc(10%/6);
cursor: pointer;
z-index: 9999;
transform: scale(1.5);
}

Now, Using the transform property, I define the scale() method, where the image width will increase on hover by 1.5 but of course it can be bigger than that, depends on your liking. The z-index is there so as to ensure when zoomed in, it will always be stacked on top of everything else.

Lastly, here's where it gets interesting. I want to make sure all images on the most left and right side of the screen to NOT overflow when they are zoomed in. To do this, I need to make sure the images on the most left and right move slightly to the center of the screen when on hover. So, there are two problems I need to solve:

How to move the images on the most right side to the left and images on the most left to the right?
How do I make CSS choose only those images positioned on the most left and right side of the screen?

I achieve the first objective by using the transform: translateX(); method applied on the img:hover. So images will move horizontally along the X axis.

/* for images on the most left, use a positive value */
transform: translateX(40%);

/* for images on the most right, use a negative value as it moves to the opposite direction */
transform: translateX(-40%);

Now, the second question can be answered using the nth:child() property. Basically, to select every pic on the most left of the screen, I need to select the 1st, 4th, and 7th children. In other words, increase the number by 3.

To achieve that, I use img:nth-child(3n+1):hover as this ensures the style will ONLY be applied to the first child and every subsequent 3rd child of the siblings. Meanwhile, to select every pic on the most right of the screen, I use the following formula: img:nth-child(3n+3):hover. Because it starts from the 3rd child and also selects every subsequent 3rd child after it.

/* ensures all images on the most left moves slightly to the right so the pictures won't overflowed when zoomed in*/
img:nth-child(3n+1):hover {
  transform: translateX(40%) scale(1.5);
}

/* ensures all images on the most right moves slightly to the left so the pictures won't overflowed when zoomed in*/
img:nth-child(3n+3):hover {
  transform: translateX(-40%) scale(1.5);
}

Stop Using IDs and Classes in Every HTML Element!

Jeje ✨ (Джиджи) — Sun, 24 Jul 2022 17:15:00 +0000

Ola! So, this is something I've just come to a realisation recently and if you're a newbie in the world of web development then it's easy for you to forget all the variations of CSS attribute selectors and just opt for creating a specific class or ID to style a particular element in your page.

Case in point? Suppose you have a flex container containing 10 flex items that looks like this:

<div class="flex-container-column">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
<div class="item">flex item 4</div>
<div class="item">flex item 5</div>
<div class="item">flex item 6</div>
<div class="item">flex item 7</div>
<div class="item">flex item 8</div>
<div class="item">flex item 9</div>
<div class="item">flex item 10</div>
</div>

You want the first flex item to have a different background-color. You're probably thinking of creating an ID for this since this style is only unique for this item, right?

Well, what if we have the same flex container with 10 flex items in every page on our website? and we want the first item to have the same style? well just add another class to it, duh!.

Technically, that can be done but this is not the best practice! We should make use of the CSS attribute selectors, more specifically the :pseudo-classes.

CSS :pseudo-classes helps you single out an HTML element by its particular state, such as:

:hover When you hover a cursor over a button
:active When a link or a button is being clicked
:checked When radio buttons are checked
:first-child and :last-child Apply the style to the first and last element that appears immediately and lastly under its parent element, respectively
:nth-child Applies the style to a children element with a particular position in a group of sibling elements, e.g., the third 'p' in every div.

With the dummy HTML code above, we can make up a few scenarios with a background-color use case:

Let's start from top to bottom there. There are two displays: a column and a row.

Column

I want the boxes in odd positions (boxes number 1, 3, 5, 7, and 9) to be in an orange-ish color so I target them using the following :pseudo-class, specifying in the bracket that I want to target ODD numbers.

.item:nth-child(odd) {
  background-color: #FEC8A7;
}

Same thing with the boxes with even number positions, I just replaced the word odd inside the bracket with (even).

.item:nth-child(even) {
  background-color: #FCECA5;
}

Row

On my Row display, I wanted to target only the first and last boxes. So this is where the :first-child and last-child come into play:

/* targets the first flex item */
.item2:first-child {
 background-color: #A16AE8; 
}

/* targets the last flex item */
.item2:last-child {
  background-color: #4120A9;
}

Fun fact, alternatively you can replace the :first-child with :first-of-type or :nth-child(1), along with :last-child being replaceable with :last-of-type in this use case and they'd still deliver the same result! The difference is that, :first-of-type will seek ONLY the first occurrence of the said element in the container/parent element, even if it's not the first child of the container/parent element. So, if I slightly change the code for the Row display above by adding an h1 like this:

<div class="flex-container-row">
<h1>header</h1>
<div class="item2">flex item 1</div>
<div class="item2">flex item 2</div>
<div class="item2">flex item 3</div>
<div class="item2">flex item 4</div>
<div class="item2">flex item 5</div>
<div class="item2">flex item 6</div>
<div class="item2">flex item 7</div>
<div class="item2">flex item 8</div>
<div class="item2">flex item 9</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
</div>

Using :first-child or :nth-child(1) will not work! Because the first child of the container is the h1. But it will still work with :first-of-type, because it will look for the first occurrence .item2 class in the container. In other words, :first-child and :nth-child are more specific in this case and are recommended to be used in practice if you want to target a really specific element position.

Zoom Images on Mouse Hover Using CSS Only

Jeje ✨ (Джиджи) — Wed, 13 Jul 2022 10:10:07 +0000

I love it when I visit a site and every time I click on an image, it enlarges automatically. It's one of the essential web designs to make websites more alive. It's especially important if there are crucial information in that image that you want the readers to read, so they can easily zoom in on the texts. I've googled tricks to do it and most, if not all, involve a little bit of javascript in action.

I'll show you that it's possible to make an interactive image using CSS only. So, if you're just starting out your web development journey and you have yet to dip your foot into the Javascript pool, you can definitely follow my method with ease.

Here's an example, go hover on the image :D.

That thing can be achieved by just a few lines in your CSS file.
Let's dissect the code one by one

The HTML
I wrap the image in a flex container, just because it's flexbox and flexbox makes life easy. Everyone says thank you Flexbox! :)

<div class="container">
<img id="Family-Guy" 
src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/2019-08/Untitled%20design%20-%202019-08-23T235151.866.webp" alt="Family Guy">
</div>

The CSS
Now, we want the zoom to take effect when we hover our cursor on the image. So, make sure you define the :hover pseudo class on the img tag.

And here's where it gets interesting, add animation attribute to your :hover pseudo class. Yep! The CSS animation takes css to the next level as it lets you animate literal static properties and transition them from one CSS style to another, gradually and smoothly.

Here's what you need to do first with the CSS.

body {
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

#Family-Guy {
  border-radius: 10px;
  cursor: pointer;  
  width: 300px;
}

#Family-Guy:hover {
  animation-name: on-hover;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

@keyframes on-hover {
  0% {
    height: auto;
    opacity: 0.7;
  }
 100% {
    width: 600px;
    height: auto;
  }
}

First, define the animation-name as it will later be called by the keyframes. Then, define how long the zoom in will take effect in seconds.

Lastly, specify how you want the animation style to apply. The animation-fill-mode property determines what happens before the animation begins and after the animation ends. If you leave this out, the value is set to none by default.

Of course, we use forwards for this case. Because we want the image to stay zoomed in UNTIL the cursor no longer hovers on it. With forwards, the last animation style (defined in the keyframes property) will be retained afterwards. Here are other possible values for the animation-fill-mode property:

none This is the default value and no animation style will be applied.

backwards The animation will go back to its initial style set in the keyframe after the whole styles have been applied. So, if we apply this value in the CSS above, the image will go back to its initial width after being zoomed, even when the cursor is still hovering on it.

both This will apply the animation styles before and after the animation starts.

The real magic actually happens because of the keyframes property here. This is where we define what CSS styles will be applied, how and when the styles should transition.

The code to specify can be in percent, as used above or with keywords from and to, which is similar to percent. Using percent is recommended for the best browser compatibility though!

In the example above, the 0% represents the initial state of the image, where nothing happens except I decrease the opacity. Nothing fancy...

Then, at 100%, I define the width to be 600px, which is twice the size of the initial image size. There's no limit on how many keyframes property you use in one animation. But this is a simple example in the hopes you can understand it easily.

So, there you go folk! Simple but powerful enough to make your website slightly interactive. Hope this helps. Ciao kakao!

[Sphinx] Inserting Media in Restructured Text (ReST) Files

Jeje ✨ (Джиджи) — Wed, 13 Jul 2022 07:34:40 +0000

If you are building documentation using Sphinx (python static site generator), you'll have to learn a plain markup language called ReStructured Text (ReST). ReST has a pretty unique syntax all around, so if you're wondering how many ways we can insert media in this file, keep on reading!

So, in order to follow this tutorial you must at least have a basic understanding of the reST syntax. Knowing what a directive is is enough to get you started.

To insert media such as images or gifs, use directives like so:

.. image::

.. figure::

.. thumbnail::

● If you want to insert an image or GIF with a caption, use the figure directive.
● If you want to insert an image or GIF that can be enlarged when you click on it (also known as Lightbox), use the thumbnail directive. In practice, it’s better to always use this directive for images
● Use image directive to insert small icons or buttons. Since this directive can be used for substitution definition.

Thumbnail

Personally, you should use Thumbnail in most of your images as this is the most customisable directive for media. Unfortunately, this is not a built-in feature in Sphinx so it comes as an extension. To use this directive, you must install it first and then configure your conf.py file by adding the lightbox extension.

Installing Lightbox

Run the following command pip install sphinxcontrib-images.
After the package has been successfully installed, open your conf.py file and add the following extension:

 extensions = [
          …
          'sphinxcontrib.images',
          …
          ]

Additionally, you can further customise image behavior, i.e., width, height, download or title in the conf.py by adding this parameter:

 images_config = {
    …
 }

For example:

 #lightbox behavior
 images_config = dict(backend='LightBox2',
 default_image_width='100%',
 default_show_title='True',
 default_group='default', )

Now, you can start using the .. thumbnail:: directive in your ReST file. Here's an example:

 .. thumbnail:: path/to/image.png
  :alt: some image
  :align: center
  :title: some image title

The title attribute here is a caption that appears when the lightbox takes effect, that is when you zoom in on the image. You can use the similar wording for both the title and alt texts.

Other attributes you can use for the Thumbnail directive are:

:download: True This lets you to download remote images.
:width: and :height: These are pretty self-explanatory. If you define this as in your image attribute, it will override the default backend configuration you defined in your conf.py.
:group: This will tell the backend to group different images together.

Figure

You can enlarge images on click using this directive, but the zoom in effect is not as smooth as the Thumbnail one. This is a built-in feature in Sphinx though so you don't need to install any extensions first.

Example of using the Figure directive:

.. figure:: path/to/image.png
  :width: 200px
  :height: auto
  :alt: some alt text

 _insert image caption here_

If you see above, you can directly insert image captions with figure as long as it's still indented right under the .. figure:: directive (remember, ReST is very sensitive to indentation!).

Image

This can be your last resort if, for some reason, those two directives do not work. However, in practice you can use this for when you need to reuse the same image in different pages of your documentation. This means, you can insert the image by simply using a pre-defined keyword.

For example, you want to insert an inline icon in the same sentence.

click the Exit button |button-icon| to close the application

in the same file, preferably at the bottom of the file you can define the image substitution as follows:

.. |button-icon| image:: path/to/image.png
  :width: 30

and voila! you'll have an inline icon in your output. :)

That's all! Enjoy working with Sphinx. Ciao Kakao.