I spent some gray cells today while working on a capitalize function in JavaScript. The function simply takes a word as an input and capitalizes it.

I thought that since a string is an iterable, I could slice it with the indexes. So, I can get index 0, convert it to upper case, and then add [1:] as the remainder of the word.

Unfortunately that trick from Python did not work in JavaScript; Python’s [start_index:end_index] does not work. JavaScript only allows to access one index, not a range.

Therefore, the JavaScript method that we need to use is the slice(start_index, end_index). But since JavaScript does not figure out the end_index automatically, we need to get it by the string.length method.

function capitalize(word){
return word[0].toUpperCase() + word.slice(1, word.length);
}

As a refresher,

• do is an entry loop, which is the condition is evaluated and the loop is started if the condition is true.
• do-while is an exit loop; the loop is executed at least once, even if the condition never evaluates to true. Until the exit condition is met, the loop runs.

Note here that Python does not have an explicit do-while construct. Therefore we “trick” Python by starting while true, which always evaluates to true and then specify the exit condition.

for (start_condition, end_condition, step):
    statements

for (start_condition; end_condition; step)
{statements;} 

for item in array:
    statements

for (let item of array):
{statements;} 

 for index, element in enumerate(array):
    statements

 for (let index in array)
{statements array[index];} 

for (let index of object)
{statements object[index];} 

start_condition
while end_condition:
    statements
    iteration

let start_condition;
while(end_condition){
statements;
iteration;}

while True:
  statements
  iteration
  if (end_condtion):
    break

let start_condition;
do{
statements;
iteration;}
while (end_condition)

This post is my notes on function declarations, function expressions and arrow functions and when to use each one.

The Core Difference

• Function Declaration: You’re telling JavaScript “here’s a function that exists”
• Function Expression: You’re creating a function and storing it somewhere (usually in a variable)

Basic Syntax Comparison

Simple Examples

// Function Declaration
function sayHelloDeclaration() {
    return "Hello from declaration!";
}

// Function Expression
const sayHelloExpression = function() {
    return "Hello from expression!";
};

// Both work the same way when called
console.log(sayHelloDeclaration()); // "Hello from declaration!"
console.log(sayHelloExpression());  // "Hello from expression!"

The Key Behavioral Difference: Hoisting

This is where they behave completely differently:

// This works - you can call it BEFORE it's defined
console.log(callMeEarly()); // "I was called early!"

function callMeEarly() {
    return "I was called early!";
}

// This breaks - you CANNOT call it before it's defined
console.log(callMeLate()); // ERROR: Cannot access 'callMeLate' before initialization

const callMeLate = function() {
    return "I was called late!";
};

Why this happens: JavaScript hoists function declarations to the top of their scope, but function expressions are not hoisted.

When to Use Each One

Practical Examples

Use Function Declaration When:

// Main functions that other code depends on
function calculateTax(amount, rate) {
    return amount * rate;
}

function formatCurrency(amount) {
    return `$${amount.toFixed(2)}`;
}

// These can be called from anywhere in this scope
const total = calculateTax(100, 0.08);
const formatted = formatCurrency(total);

Use Function Expression When:

// Conditional function creation
let mathOperation;

if (userWantsAddition) {
    mathOperation = function(a, b) {
        return a + b;
    };
} else {
    mathOperation = function(a, b) {
        return a * b;
    };
}

// Callback functions
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
    return number * 2;
});

// Functions as object properties
const calculator = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    }
};

Arrow Functions (A Special Type of Function Expression)

Arrow functions are always function expressions:

// Traditional function expression
const addTraditional = function(a, b) {
    return a + b;
};

// Arrow function expression
const addArrow = (a, b) => {
    return a + b;
};

// Short arrow function (implicit return)
const addShort = (a, b) => a + b;

Complete Comparison Table

When Each Is Required

Must use Function Expression for:

• Object methods (modern way)
• Array callbacks
• Conditional function creation
• IIFE (Immediately Invoked Function Expressions)

Must use Function Declaration for:

• When you need hoisting behavior
• Recursive functions that reference themselves by name
• When creating constructors (though classes are preferred now)

The simple rule of thumb: Use function declarations for your main, standalone functions. Use function expressions for functions that are values, callbacks, or conditionally created.

I have an Excel workbook where I am trying to get the values in a range to an array. The range is 98 columns with varying number of rows, and contains duplicate values accross the cells. The range contains 2248 values, and I need to reduce them to unique values to further use in the code.

The steps are:

1. Get all the values in the range to an array,
2. Make sure the array contains only the unique values.

Step 1

The most efficient way to get the values in this range would be using the getValues() function on the range:

// First row contains values, hence the offset range:
dataRange = dataSheet.getUsedRange().getOffsetRange(1,0)
allValuesArr = dataRange.getValues()

The problem that I had with this piece of code was, whatever the number of rows and columns are present in the range, the array length was always 101. Checking the daataRange with dataRange.getAddress() always returned the correct address. In my case the range is A2:BF102.

The interesting this was, when I ran a for loop in the dataRange, I got the values correctly:

for (let colCount = 1; colCount <= dataSheetColumnCount; colCount++) {
    for (let rowCount = 1; rowCount < dataSheetRowCount; rowCount++) {
        let cellValue = dataRange.getCell(rowCount, colCount).getValue()?.toString();
        allValuesArr.push(cellValue)

I digged in and out of many debugging scenarios, trying to understand the discrepancy between the built-in getValues() function. Once I had run out of ideas, I hit Stack Overflow and picked Taller’s brains (he was so kind, helpful and patient - see Stack Overflow post.)

Nothing seemed to work, except one morning I realized that there could be an issue with the worksheet that the user provided, and which we are working on.

Boom! It was exactly what I thought. The user had inconsistent formatting in the cells, had some disjointed cells throughout the worksheet and various cell background fills. This was getting the script confused and it was only getting the first 101 values in the A44:E44 range. Once I cleared all the formatting and ran the dataRange.getValues() I got all the values on the sheet without any hiccups.

Step 2

The next step is to get the unique values. There are a lot of options/algorithms to achieve that, but for arrays my preference is to use the Set data type where I can. I find this to be way efficient than other methods, as the Set data type is a built-in data type in the languages that I use (Python, VBA, JavaScript, Office Scripts) and therefore already optimized.

The line below creates a new set from the allValuesArr, effectively removing all duplicates, and then converts it back to an array with the function Array.from.

// Following the variable names from above
uniqueValuesArr = Array.from(new Set(allValuesArr))

The conversions are almost done on the fly, does not need any algorithms/code changes and simple enough to write/understand.

I looked around on how to best go with Github Pages - Jekyll setup and saw that there were many references to setting Jekyll up on Linux, but I was thinking why wouldn’t I go with WSL2 on my Windows box?

I managed to do that and got Jekyll working. Here are the steps that I took:

1. Clone your website repository

mkdir website
cd website
git clone <your-github-page-username.github.io>

1. Update your .bashrc with the gem install locations. You should never run gems as root. Following is from the official Jekyll documentation

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc

1. Install prerequisites and Ruby (See note below)

sudo apt update && sudo apt upgrade -y
sudo apt install make gcc gpp build-essential zlib1g zlib1g-dev ruby-full 

1. Install bundler and Jekyll

sudo gem install bundler
sudo gem install jekyll 
jekyll -v # to check if Jekyll installed successfully.

If Jekyll is installed successfully, you should get the version number, e.g. jekyll 4.4.1.

If you run gem install jekyll (or gem install jekyll bundler) and without sudo, you will get the following error:

ERROR:  While executing gem ... (Gem::FilePermissionError)
 You don't have write permissions for the /var/lib/gems/3.0.0 directory.

1. Switch to your local repository (per Step 1) - note the dot (.) at the end of the bundle exec command

cd website/your-github-page-username.github.io
bundle exec jekyll new --force --skip-bundle .
bundle init
bundle add jekyll
bundle install
bundle info jekyll # to check if Jekyll installed successfully in our local repository

Again, if Jekyll website is built successfully, the output would be:

 * jekyll (4.4.1)
 Summary: A simple, blog aware, static site generator.
 Homepage: https://jekyllrb.com
 Source Code: https://github.com/jekyll/jekyll
 Changelog: https://github.com/jekyll/jekyll/releases
 Bug Tracker: https://github.com/jekyll/jekyll/issues
 Path: /var/lib/gems/3.0.0/gems/jekyll-4.4.1
 Reverse Dependencies:
jekyll-feed (0.17.0) depends on jekyll (>= 3.7, < 5.0)
jekyll-seo-tag (2.8.0) depends on jekyll (>= 3.8, < 5.0)
minima (2.5.2) depends on jekyll (>= 3.5, < 5.0)

1. Add theme per its documentation

See supported themes: https://pages.github.com/themes/ Play it safe now, and go with one of the themes in the link.

1. Copy theme files under your local repository directory. Per Step 2, they are installed under ~/gems directory.

cd website/your-github-page-username.github.io
bundle show <your theme name>
> /home/your-user-name/gems/gems/theme-name
cp -r /home/your-user-name/gems/gems/theme-name/* .

1. I’d suggest to run jekyll new --force . at this point so that Jekyll installer generates tha necessary configuration files.

jekyll new --force .

In this step, if you get an error like the following, delete one of the files. For example, delete about.markdown and index.markdown considering the following error:

Jekyll Feed: Generating feed for posts
 Conflict: The following destination is shared by multiple files.
  The written file may end up with unexpected contents.
/mnt/c/Users/tolga/repos/websites/tbalci-github-io/_site/about/index.html
 - about.markdown
 - about.md

  Conflict: The following destination is shared by multiple files.
The written file may end up with unexpected contents.
/mnt/c/Users/tolga/repos/websites/tbalci-github-io/_site/index.html
 - index.markdown
 - index.md

Credits:

1. Stephen Whitaker on his post on StackOverflow
2. Sean Killeen