From Ruby Methods to Traditional JS Functions to ES6 JS Functions

Coming out of Ruby, the idea of defining a method outside of def …end syntax seems a bit scary. Especially because Ruby provided a lot of syntactic sugar, we almost just wrote out the English language whenever we coded.

Inside this post, I’ll share what the main differences I noticed working with the two languages.

(Image Source)

Ruby Method:

def say_hello(name)
    "Hello #{name}!"
end

say_hello("Ray") #=> "Hello Ray!"

See how simple that is? It shows you where it starts at the def keyword and ends at well… the end keyword. Adjusting to the JavaScript function syntax however, is a completely new game.

JavaScript Function:

function sayHello(name) {
   return `Hello ${name}!"
}

sayHello("Jesse") //=> "Hello Jesse!"

It doesn’t seem that bad in this example. Let’s just look at some complex codes I’ve written in both languages.

Ruby:

(Image Source)

It’s clean and readable don’t you think? Compared to…

JavaScript:

(Image Source)

(Image Source)

Yeah, not so pretty anymore right? Like what is all this let stuff? and what’s up with the curly braces? ({})? Where did my end keyword go??

Here are a few things differences I noticed between the two syntaxes:

Ruby:

• Method signatures with multiple words are snake_cased
• You can directly assign a variable to a value
• Implicitly returns the last line inside the method
• Spring interpolating requires the double quotes(“ ”) and the octothorp symbol with the curly braces (#{})
• Commenting out anything is done with an octothorp (#)

JavaScript (Traditional Function) :

• Function signatures with multiple words are camelCased
• When assigning variables to a value you need to assign it with either the let or const keyword. (You can also use var but that’s not really encouraged)
• Must explicitly return the desired value of the function
• Spring interpolating requires the back ticks (``) and the dollar sign with the curly braces (${})
• Commenting out anything is done with two forward slashes (//)

(Image Source)

And then there’s the ES6 or the ECMAScript 6 function syntax. Also known as arrow or fat arrow functions.

ES6 Function Syntax

const arrowFunction = name => `Hello ${name}!`

arrowFunction("Andy") //=> "Hello Andy!"

Here’s what it looks like in a complex code:

Here’s what I noticed with using this ES6 syntax.

JavaScript (ES6 Function) :

• No longer need to write the function keyword
• No longer need to explicitly return the value
• It looks cleaner… personal preference you could say. You can write a simple function under one line :)

The only case where you do need to explicitly return the desired value is when you have a block ({}) inside your function.

const arrowFuncBlock = name => {
    return `Hello ${name}!`
}
arrowFuncBlock("Alex") //=> "Hello Alex!"

A down side to ES6 function syntax is that they cannot be used as constructors. Meaning that the keywords this, arguments, super, or new.target will not operate accordingly if the function is declared with this compact syntax.

To find out more about the different syntaxes the resources below are a great tool.

Resources:

ECMAScript 6 — ECMAScript 2015

Syntactic sugar methods in Ruby

Arrow function expressions