Tari Ibaba

In this article, we’re going to learn how to easily convert a decimal number to its hexadecimal equivalent in JavaScript. And we’ll look at some real-world scenarios where we’ll need to do this.

Number toString() method

To convert a decimal to hex in JavaScript, call the toString() method on the decimal, passing 16 as the radix argument, i.e., num.toString(16). The toString() method will return the string representation of the number in hexadecimal form.

For example:

JavaScriptCopied!

const num = 60;
const hex = num.toString(16);
console.log(hex); // 3c

// Use parentheses when calling toString() directly
const hex2 = (60).toString(16);
console.log(hex2); // 3c

The Number toString() method returns the string representation of a number. If a base is specified with the first argument, the number is represented in that base. We pass 16 to use base 16, which is the hexadecimal base.

The hexadecimal base uses 16 symbols to represent numbers:

• 0 to 9 to represent values 0 to 9
• a to f (A to F) to represent values 10 to 16. The letters are case-insensitive, so 3C2b is exactly the same value as 3c2B.

Call toString() on number literal

If you call toString() on a number literal directly, ensure you wrap it in parentheses (( )) or use two dots (..before toString():

JavaScriptCopied!

// Use parentheses
const hex2 = (60).toString(16);
console.log(hex2); // 3c

// Use double dots
const hex3 = 50..toString(16);
console.log(hex3); // 32

If you use only one dot without parentheses, the JavaScript parser treats it as part of the number literal – a decimal point – instead of a member access operator.

JavaScriptCopied!

console.log(40.); // 40
console.log(20.); // 20

So there will be an error, since there will be no member access operator before the member name.

JavaScriptCopied!

// SyntaxError
console.log(40.toString(16));

// SyntaxError
console.log(20.toString(16));

So you wrap the number in parentheses so that everything outside them are seen as separate from the number.

JavaScriptCopied!

console.log((40).toString(16)); // 28

console.log((20).toString(16)); // 14

Or you add a second dot that will be seen as the member access operator.

JavaScriptCopied!

console.log(40..toString(16)); // 28

console.log(20..toString(16)); // 14

Use Case: Convert RGB(A) to Hex

One common use for converting decimal values to hex to convert a RGB color code to its hex equivalent. Here’s how we can do it:

JavaScriptCopied!

function decToHex(dec) {
  return dec.toString(16);
}

function padToTwo(str) {
  return str.padStart(2, '0');
}

function rgbToHex(r, g, b) {
  const hexR = padToTwo(decToHex(r));
  const hexG = padToTwo(decToHex(g));
  const hexB = padToTwo(decToHex(b));

  return `#${hexR}${hexG}${hexB}`;
}

console.log(rgbToHex(255, 128, 237)); // #ff80ed

console.log(rgbToHex(195, 151, 151)); // #c39797

console.log(rgbToHex(16, 16, 16)); // #0f0f0f

We create a reusable rgbToHex() function to convert the RGB code to its hex equivalent.

We use the padToTwo() function to pad a hex code to two digits, e.g, f -> 0f.

After converting the R, G, and B decimal values to their hexadecimal representations, we join them together in a string prefixed with the # character to form the hex color code.

We could modify the function to also accept RGBA values, where the A is a percentage value (between 0 and 1) used to specify color opacity. A will be the first two characters of the hex color code, having a value between 00 (0 or 0%) and ff (255 or 100%)

JavaScriptCopied!

function decToHex(dec) {
  return dec.toString(16);
}

function padToTwo(str) {
  return str.padStart(2, '0');
}

function rgbToHex(r, g, b, a) {
  const hexR = padToTwo(decToHex(r));
  const hexG = padToTwo(decToHex(g));
  const hexB = padToTwo(decToHex(b));

  // Set "a" to 1 if not specified
  const aAbsolute = Math.round((a ?? 1) * 255);

  const hexA = padToTwo(decToHex(aAbsolute));

  return `#${hexA}${hexR}${hexG}${hexB}`;
}

console.log(rgbToHex(255, 128, 237)); // #ffff80ed

console.log(rgbToHex(195, 151, 151, 0.5)); // #80c39797

console.log(rgbToHex(16, 16, 16, 0.69)); // #b0101010

The “cannot access before initialization” reference error occurs in JavaScript when you try to access a variable before it is declared with let or const and initialized in the same scope. To fix it, initialize the variables before accessing them.

Here are some examples of the error occurring:

index.jsCopied!

// ❌ ReferenceError: Cannot access 'num' before initialization
console.log(num);
let num = 2;

// ❌ ReferenceError: Cannot access 'name' before initialization
console.log(name);
const name = 'Coding Beauty';

// ❌ ReferenceError: Cannot access 'arr' before initialization
arr = [7, 8, 9];
let arr = [3, 4, 5];


To solve the error, you need to initialize the variable before accessing it.

index.jsCopied!

// ✅ No error
let num = 2;
console.log(num); // 2

// ✅ No error
const name = 'Coding Beauty';
console.log(name); // Coding Beauty

// ✅ No error
let arr = [3, 4, 5];
arr = [7, 8, 9];

var vs let

The occurrence of this error shows an important difference between the var and let keywords. If you had declared the variable with var, the error wouldn’t have occurred.

index.jsCopied!

// No error
console.log(num); // undefined
var num = 2;

// No error
console.log(name); // undefined
var name = 'Coding Beauty';

// No error
arr = [7, 8, 9];
var arr = [3, 4, 5];

This happens because variables declared with the var keyword are hoisted – they are moved by the JavaScript interpreter to the top of the current scope (to the top of the current script or current function).

Basically, this is what happens to our variables declared with var:

index.jsCopied!

var num;
var name;
var arr;

console.log(num); // undefined
num = 2;

console.log(name); // undefined
name = 'Coding Beauty';

arr = [7, 8, 9];
arr = [3, 4, 5];

Note: The declarations are hoisted, but the initializations are not.

Because of this hoisting, even when the variable is declared in a non-function block, like an if block, the error will still not occur if you try to access the variable from outside the if statement.

index.jsCopied!

// No error!
console.log(num); // undefined

if (true) {
  var num = 2;
}

Only the global scope and function scopes are used for hoisting, so like before, the variable declaration is moved to the top of the file.

index.jsCopied!

var num;

console.log(num); // undefined

if (true) {
  num = 2;
}

To convert seconds to hours and minutes in JavaScript:

1. Divide the seconds by 60 to get the total minutes. The remainder will be the seconds in the output.
2. Divide the total minutes by 60 to get the hours. The whole number in the result will be the hours, and the remainder will be the minutes in the output.

For example:

function toHoursAndMinutes(totalSeconds) {
  const totalMinutes = Math.floor(totalSeconds / 60);

  const seconds = totalSeconds % 60;
  const hours = Math.floor(totalMinutes / 60);
  const minutes = totalMinutes % 60;

  return { h: hours, m: minutes, s: seconds };
}

// { h: 0, m: 1, s: 0 }
console.log(toHoursAndMinutes(60));

// { h: 0, m: 16, s: 40 }
console.log(toHoursAndMinutes(1000));

// { h: 1, m: 10, s: 50 }
console.log(toHoursAndMinutes(4250));

We create a reusable function that takes a total number of seconds and returns an object containing the separate hours, minutes, and seconds values.

First, we divide the total seconds by 60 to get the number of total minutes.

console.log(60 / 60); // 1

console.log(1000 / 60); // 16.666666666666668

console.log(4250 / 60); // 70.83333333333333

The division results in a decimal number, so we use the Math.floor() function to get just the whole number of the result.

Math.floor() returns the largest integer less than or equal to a specified number.

console.log(Math.floor(10.95)); // 10
console.log(Math.floor(10)); // 10
console.log(Math.floor(10.05)); // 10

After this, we use the modulo operator (%) to get the division’s remainder for the seconds in the result.

console.log(60 % 60); // 0

console.log(1000 % 60); // 40

console.log(4250 % 60); // 50

Tip: Skip this step if the seconds should not be in the result.

We all know 60 seconds make a minute, and 60 minutes make an hour. After getting the total minutes, we do something similar to what we just did to the total seconds value: we divide the total minutes by 60 to get the hours and use the module operator to get the division’s remainder, which will be the minutes in the output.

After getting all the values, we return an object with h, m, and s properties containing the hours, minutes, and seconds respectively.

return { h: hours, m: minutes, s: seconds };

Convert seconds to HH:mm:ss

Instead of an object, you might want the result to be a time string in a format like HH:mm:ss, where each value is separated by a colon and has a minimum of two digits in the string. Here’s how we can produce such a time string.

function toTimeString(totalSeconds) {
  const totalMs = totalSeconds * 1000;
  const result = new Date(totalMs).toISOString().slice(11, 19);

  return result;
}

console.log(toTimeString(60)); // 00:01:00

console.log(toTimeString(1000)); // 00:16:40

console.log(toTimeString(4250)); // 01:10:50

First, we convert the seconds to milliseconds to pass it to the Date() constructor and create a new Date object.

The Date toISOString() method returns a string representation of the date in the ISO 8601 format, i.e., YYYY-MM-DDTHH:mm:ss.sssZ

const totalMs = 60000;

// 1970-01-01T00:01:00.000Z
console.log(new Date(totalMs).toISOString());

You can see that toISOString() does the conversion for us. We just need a way to extract the HH:mm:ss from the ISO string.

The String slice() method returns the portion of a string between specified start and end indexes, passed as the first and second arguments respectively.

The HH:mm:ss starts at index 11 of the string and ends at index 18. So to extract it, the values we pass to slice() or substring() will be 11 and 19.

Tip: 19 because slice() excludes the character at the end index from the resulting substring.

// 00:01:00
console.log('1970-01-01T00:01:00.000Z'.slice(11, 19));

To exclude the seconds from the result, we just need to reduce the end index by 3 to exclude the colon and the digits of the seconds.

// 00:01
console.log('1970-01-01T00:01:00.000Z'.slice(11, 16));

To capitalize the first letter of each word in a string in JavaScript:

1. Split the string into an array of words with .split('').
2. Iterate over the words array with .map().
3. For each word, return a new word that is an uppercase form of the word’s first letter added to the rest of the word.
4. Join the words array into a string with .join(' ').

For example:

index.js

function capitalizeWords(str) {
  return str
    .toLowerCase()
    .split(' ')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}


// Welcome To Coding Beauty
console.log(capitalizeWords('WELCOME to coding beauty'));

// JavaScript And TypeScript
console.log(capitalizeWords('JAVASCRIPT AND TYPESCRIPT'));

Our capitalizeWords() function takes a string and returns a new string with all the words capitalized.

First, we use the toLowerCase() method to lowercase the entire string, ensuring that only the first letter of each word is uppercase.

// welcome to coding beauty
console.log('WELCOME to coding beauty'.toLowerCase());

Tip: If it’s not necessary for the remaining letters in each word to be lowercase, you can remove the call to the toLowerCase() method.

Then we call the String split() method on the string to split all the words into an array.

// [ 'welcome', 'to', 'coding', 'beauty' ]
console.log('welcome to coding beauty'.split(' '));

After creating the array, we call the map() method on it, with a callback function as an argument. This function will be called and return a result for each word in the array.

In the function, we get the word’s first character with charAt(), convert it to uppercase with toUpperCase(), and concatenate it with the rest of the string.

We use the String slice() method to get the remaining part of the string. Passing 1 to slice() makes it return the portion of the string from the second (index of 1) character to the end.

// [ 'Welcome', 'To', 'Coding', 'Beauty' ]
console.log(
  'welcome to coding beauty'
    .split(' ')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
);

So map() returns an array containing all the words in the string, with each word’s first letter capitalized.

Lastly, we concatenate all the words in a single string, with the Array join() method.

Passing a space (' ') to join() separates the words by a space in the resulting string.

// Welcome To Coding Beauty
console.log(['Welcome', 'To', 'Coding', 'Beauty'].join(' '));