tutorial

To get the last part of a URL in JavaScript, use .split('/') to split the URL string into an array of each part, then use .at(-1) to get the last part from the array.

For example:

JavaScriptCopied!

function getLastPart(url) {
  const parts = url.split('/');
  return parts.at(-1);
}

const url1 = 'https://codingbeautydev.com/blog/javascript-get-last-part-of-url';
console.log(getLastPart(url1)); // javascript-get-last-part-of-url

const url2 = 'https://codingbeautydev.com/blog';
console.log(getLastPart(url2)); // blog

const url3 = 'https://codingbeautydev.com';
console.log(getLastPart(url3)); // codingbeautydev.com

The Array split() method takes a character and splits a string into an array of substrings that were separated by that character in the string. A URL’s segments are separated by the / character, so we pass this character to split() to create an array with each URL segment as an element.

JavaScriptCopied!

console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ]

/*
[
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url'
]
 */
console.log(
  'https://codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/')
);

After getting this array, we use the Array at() method to get a single element from it. at() is a new ES2022 addition that accepts both positive and negative integers.

Passing negative integers to at() makes it count from the end of the array, so -1 gives the first element from the end (last element) – the last part of the URL.

JavaScriptCopied!

const urlParts = [
  'https:',
  '',
  'codingbeautydev.com',
  'blog',
  'javascript-get-last-part-of-url',
];

console.log(urlParts.at(-1)); // javascript-get-last-part-of-url

console.log(urlParts.at(-2)); // blog

console.log(urlParts.at(-3)); // codingbeautydev.com

Remove last part of URL

You might be getting the last part of the URL to remove it from the URL string. If that’s what you want, there’s no need to get the last part of the URL at all – we can remove it easily with the slice() and lastIndexOf() methods.

JavaScriptCopied!

function removeLastPart(url) {
  return url.slice(0, url.lastIndexOf('/'))
}

const url1 = 'https://codingbeautydev.com/blog/javascript-get-last-part-of-url';

// https://codingbeautydev.com/blog
console.log(removeLastPart(url1));

const url2 = 'https://codingbeautydev.com/blog';

// https://codingbeautydev.com
console.log(removeLastPart(url2));

We use the String lastIndexOf() method to get the position of the last occurrence of the / character, because this is the point just before the last part of the URL starts in the string.

String slice() returns the portion of a string between specified start and end indexes, passed as the first and second arguments respectively. We pass 0 as the first argument so the resulting substring starts from the first character, and we pass the result of lastIndexOf() as the second argument so that the substring ends at the index before the last part of the URL starts in the string.

1. Date getMonth() method

To get the number of months between two dates in JavaScript:

1. Use date1.getMonth() - date2.getMonth() to get the month difference between the two dates.
2. Use date1.getYear() - date2.getYear() to get the difference between the two dates.
3. Add the month difference to the year difference multiplied by 12, i.e, monthDiff + yearDiff * 12.

For example:

JavaScriptCopied!

function differenceInMonths(date1, date2) {
  const monthDiff = date1.getMonth() - date2.getMonth();
  const yearDiff = date1.getYear() - date2.getYear();

  return monthDiff + yearDiff * 12;
}

// June 5, 2022
const date1 = new Date('2022-06-05');

// March 17, 2021
const date2 = new Date('2021-03-17');

const difference = differenceInMonths(date1, date2);

console.log(difference); // 15

Our reusable differenceInMonths() function takes two Date objects and returns the difference in months between them. The first argument is the start date, and the second is the end date.

The Date getMonth() method returns a zero-based number that represents the month of a particular date.

Note: “Zero-based” here means that 0 is January, 1 is February, 2 is March, etc.

Apart from subtracting the months, we also need to subtract the years, because the two dates might have different years, and this would of course affect the number of months between them. We use the getFullYear() method to get the years of the dates and subtract them.

The Date getFullYear() method returns a number that represents the year of a particular date.

A year equals 12 months, so after getting the year difference, we multiple it by 12 to get the equivalent months, and add it to the month difference.

2. date-fns differenceInMonths() function

Alternative we can use the differenceInMonths() function from the date-fns NPM package to quickly get the difference in months between two dates in JavaScript. It works just like our own differenceInMonths() function, taking two Date objects and returning the difference in their months.

JavaScriptCopied!

import { differenceInMonths } from 'date-fns';

const date1 = new Date('2022-08-10');

const date2 = new Date('2020-02-24');

const difference = differenceInMonths(date1, date2);

console.log(difference); // 29

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));