javascript

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

The “__dirname is not defined in ES module scope” error happens in JavaScript when we try to access the __dirname global variable in an ES module. The __dirname and __filename global variables are defined in CommonJS modules, but not in ES modules.

We can fix the “__dirname is not defined in ES module scope” error by using certain functions to create a custom __dirname variable that works just like the global variable, containing the full path of the file’s current working directly.

index.js

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);

// C:/cb/cb-js
console.log(__dirname);

// C:\cb\cb-js\index.html
console.log(path.join(__dirname, 'index.html'));

The import.meta object contains context-specific metadata associated with a certain module, e.g., a module’s file URL.

// file:///C:/cb/cb-js/index.js
console.log(import.meta.url);

So we get the current module’s file URL and pass it to the fileURLToPath function from the url module, to convert it to a file path. fileURLToPath returns a fully-resolved, platform-specific Node.js file path.

// C:\cb\cb-js\index.js
console.log(fileURLToPath('file:///C:/cb/cb-js/index.js'));

After getting the file path, we pass it to the dirname method from the path module, to get the full directory path from the file path.

// C:\cb\cb-js
console.log(path.dirname('C:\\cb\\cb-js\\index.js'));

With this, we now have our own __dirname and __filename variables.

Here’s the output from logging them from a file on my computer.

__filename contains the absolute path of the current module file.

__dirname contains the absolute path of the current module file’s directory.

Create utility for __dirname and __filename

If we access the __dirname and __filename variables frequently, we can abstract the logic for creating them in a utility module and avoid unnecessary repetition.

file-dir-name.js

import { fileURLToPath } from 'url';
import { dirname } from 'path';

export default function fileDirName(meta) {
  const __filename = fileURLToPath(meta.url);

  const __dirname = dirname(__filename);

  return { __dirname, __filename };
}

We’ll be able to use this utility across the various other module files in our project.

index.js

import fileDirName from './file-dir-name.js';

const { __dirname, __filename } = fileDirName(import.meta);

// C:\cb\cb-js
console.log(__dirname);

// C:\cb\cb-js\index.js
console.log(__filename);

To push an object to an array in JavaScript, call the push() method on the array with the object as an argument, i.e., arr.push(obj). The push() method will add the element to the end of the array.

For example:

const arr = [];

const obj = { name: 'Jeff' };

// 👇 Push object to array
arr.push(obj);

// [{ name: 'Jeff' } ]
console.log(arr);

The push() method takes an object and adds it to the end of an array.

Push object to array during initialization

If the variable is newly created just before the object is pushed (like in the previous example), you can simply place the object in between the square brackets ([]) to include it in the array as the variable is initialized:

const obj = { name: 'Jeff' };

// 👇 Push object to array with initialization
const arr = [obj];

console.log(arr);

Push multiple objects to array

The push() method actually accepts a variable number of arguments. They are each added to the end of the array, in the order in which they are passed to push().

For example:

const arr = [];

const obj1 = { name: 'Samantha' };
const obj2 = { name: 'Chris' };
const obj3 = { name: 'Mike' };

arr.push(obj1, obj2, obj3);

// [ { name: 'Samantha' }, { name: 'Chris' }, { name: 'Mike' } ]
console.log(arr);

Push object to array without mutation

The push() method adds an object to the array in place, which means it gets modified. If you don’t want this, you can use the spread syntax (...) to create a copy of the original array, before calling push():

const arr = [{ name: 'Jerry' }];

const newArr = [...arr];

newArr.push({ name: 'Mia' });

// [ { name: 'Jerry' }, { name: 'Mia' } ]
console.log(newArr);

// 👇 Original not modified
console.log(arr); // [ { name: 'Jerry' } ]

Similar to what we did earlier, we can include the object in the square brackets, after the spread syntax, to push the object to the array’s copy as it is initialized:

const arr = [{ name: 'Jerry' }];

// 👇 Push object to array without mutation
const newArr = [...arr, { name: 'Mia' }];

// [ { name: 'Jerry' }, { name: 'Mia' } ]
console.log(newArr);

// Original not modified
console.log(arr); // [ { name: 'Jerry' } ]

While not always necessary, by avoiding mutations we can make our code more readable, predictable, and modular.