At work, I have observed different ways of creating functions in the codebase — and that lead me to search for answers on when to use which (declaration versus expression). This articles aims to share why using function expressions is generally preferred over using function declarations.

Macbook opened showing code on IDE
Macbook opened showing code on IDE
Just some random code-related image to add a splash of colour haha (image from Unsplash)

JavaScript has two different ways of creating functions. Function declarations have been used for a long time, but the usage of function expressions have been gradually taking over.

Declarationfunction functionDeclaration() {
return 'I am a function declaration';
}
const functionExpression = function() {
return 'I am a function expression';
}
________________
ExpressionES5…


In my current project, we’re using TypeScript (rather than pure Javascript) for a large-scale application with Node.JS on the server side. And I think it’s really awesome🌹 There’s abit of a learning curve at the start but eventually you come to really appreciate the benefits that it offers❤️️
So here’s a brief introduction of what it is and why you may want to consider using it.

What is TypeScript?

  • TypeScript is an open source programming language that is developed and maintained by Microsoft in 2012
  • TypeScript is designed for large-scale JavaScript application development
  • TypeScript brings ‘types’ (or datatypes) to JavaScript.
  • TypeScript is a…


To handle asynchronous Javascript, callbacks were first used but it had major cons like callback hell. Then came about promises to try to improve things. However, .then chains can also get nested and confusing.
So now, we have async/await, which was introduced in NodeJS 7.6 and is currently supported in all modern browsers.

The async/await syntax allows you to work with promises in a cleaner fashion. It makes asynchronous code easier to read and understand. However, it is important to note that async/await is actually just syntax sugar built on top of promises. …


ES6 introduced a number of significant improvements to the language, including de-structuring of Objects and Arrays.

Array Destructuring

Traditionally, to access elements in an Array, you would do so with their index number like so:

const array = [1, 2, 3];console.log(array[0])
// 1

Javascript ES6 allows you to assign the array to another array that contains variables in the same index as the element you need.

You can do this:

const array = [1, 2, 3];const [first, second, third] = array;console.log(first, second, third); 
// 1 2 3

This works well for simple arrays. However, if you only want to…


Promises are widely used instead of callbacks. Promises are a great feature in Javascript that enable you to avoid callback hell, especially when you need to wait on a response from multiple API requests that are asynchronous.

A Promise is a special Javascript object that represents the eventual result of an asynchronous action. A promise is kind of a proxy for a value that we don’t have yet.

A promise object has 2 internal properties:
1. PromiseStatus
2. PromiseValue

A promise can be in 1 of 3 states:
1. Pending
2. Fulfilled — action fulfilled successfully
3. …


We will use a simple function called calculateSquare to demonstrate how to handle errors in asynchronous Javascript code.

In order to simulate an asynchronous function, we will use setTimeout:

function calculateSquare(number, callback) {  
setTimeout(() => {
const result = number * number;
callback(result);
}, 1000);
}
let callback = (result) => {
console.log('Result from calculateSquare: ' + result)
}
calculateSquare(2, callback);

Run the code above and everything works.

But what happens when this function gets a String instead of a Number type? We would get NaN (not a number) for the result. This needs to be handled.

function calculateSquare(number, callback)…


If you use Node.js for your applications, you may want to use different versions of Node. Fortunately, there is a tool to manage them all using Node Version Manager.

Node.js


For a work project, I needed to include a wizard form with 2 questions on each page. To get the total page count, I divided the total number of questions by 2 and then rounded it off to the nearest integer. There were however some problems with that implementation and a more efficient solution was required.

My tech lead pointed out the usage of Array chunking. So this is how it works:

In the above, we define a function named Chunk which takes in 2 parameters: an original array and the chunk size.

Then, we define a temporary array…


Javascript Templating

Javascript templating is a fast and efficient technique to render client-side view templates with Javascript by using a JSON data source. The template is HTML markup, with added templating tags that will either insert variables or run programming logic.

The template engine then replaces variables and instances declared in a template file with actual values at runtime, and convert the template into an HTML file sent to the client.

Mustache


Because Redux aka Re(ducks). Lol. Bad joke, sorry not sorry.

My work projects rely heavily on the use of Redux Form (paired with React). A problem I struggled with was trying to figure out how to pre-populate my form with initial values. It wasn’t so straightforward as the form was nested in a customized dialogue component and I could not use the initialValues prop like so: <Form initialValues={} />

If you are in a similar position or just want to figure out various ways to utilize initial values in your Redux form, keep reading on!

Let’s use a simple form as an example:

Simple Redux Form with a single “Name”…

Sherlynn Tan

Software Developer at @thoughtworks | Marathon Runner | Ex-Pharmacist Writing on Coding, Technology and Running

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store