Arrow functions are a new type of function in JavaScript that were introduced in ES6. They have a shorter, more compact syntax compared to regular functions. The 'arrow' comes from the use of the '=>' symbol, which looks like an arrow.

The basic syntax of an arrow function

An arrow function is written with parentheses that contain its parameters, followed by an arrow (=>) and then the function body. If the function body is just a single line of code, you can omit the curly braces {}. Also, if the function only takes one argument, you can omit the parentheses around the argument.

let square = (num) => num * num;

How arrow functions handle 'this'

In regular functions, 'this' refers to the object that called the function. This can be a bit confusing and sometimes lead to bugs. In arrow functions, 'this' has a simpler behavior - it refers to the object where the function was defined. This can make it easier to predict what 'this' will be.

Returning object literals

Arrow functions makes it easier to return object literals. While in standard functions we have to wrap the object literal in parenthesis, in arrow functions we can return it directly using parenthesis

const getObj = () => ({ name: 'John', age: 30 });

Arrow functions are a different way to make functions in JavaScript. They do the same stuff as regular functions but with a simpler look. It's like choosing between two kinds of bicycles, both take you from point A to point B, but one may look cooler or be easier to ride, based on what you prefer.

How do Arrow functions look like?

Normal functions in JavaScript start with the keyword 'function', followed by a name (if you want), and then a pair of parentheses that can contain some inputs you want to give to your function. Then there are a pair of curly brackets that wrap the tasks you want your function to do. Arrow functions look simpler: instead of starting with 'function', they start directly with the inputs, then there is a sign like a straight face (=>), and then the tasks you want your function to perform inside curly brackets.

// Normal Function
function hello(name) {
  console.log('Hello, ' + name + '!');
}

// Arrow Function
let hello = (name) => {
  console.log('Hello, ' + name + '!');
}

What make Arrow functions special?

Aside from having a cooler look, Arrow functions handle 'this' differently from regular functions. Imagine you are at a big party with lots of people. If someone says 'I need this!', 'this' could mean different things to different people - it could be a slice of cake to you, a balloon to someone else but a red ball to the person who said it. In JavaScript, 'this' could mean different things depending on where it's located. But Arrow functions always remember the original 'this', like always remembering that 'this' was a 'red ball' even when you're at different parts of the party.