Arrow function: enclosing single-line method block with curly braces


#1

Hello,

Are we supposed not to enclose a block of an arrow function with curly braces if the block is single-line method?

I was working on https://www.codecademy.com/paths/web-development/tracks/web-dev-js-arrays-loops-objects/modules/web-dev-intermediate-javascript-practice/lessons/intermediate-javascript-coding-challenge/exercises/find-my-keys .

When I wrote the code below, I got “unidentified”. But when I removed the curly braces enclosing arr.findindex(), it worked fine.

const findMyKeys = arr =>{ arr.findIndex(item => {
return item === ‘keys’;
});
}

const randomStuff = [‘credit card’, ‘screwdriver’, ‘receipt’, ‘gum’, ‘keys’, ‘used gum’, ‘plastic spoon’]

console.log(findMyKeys(randomStuff));

My understanding was that we don’t need curly braces for a single-line block but we can put them if we like. But it appears I cannot in the case of a single-line method block.

Could anyone teach me what instructions the curly braces gives to the function if they enclose a single-line method block.

Thanks.


#2

“unidentified” => “undefined”


#3

Every function definition needs to be within curly brackets.

The problem in your code is that you forgot to return the fndIndex function call inside your findKeys function ;). It then returns an undefined, add return before arr.findIndex and it should work.


#4

Let’s add some whitespace and break it down…

const findMyKeys = arr => { 
  arr.findIndex(item => {
    return item === ‘keys’;
  });
}

@janneslohmeijer67310 is correct about the missing return.

findIndex() returns a number, the index of the search value, if found, else -1. That outcome needs to be returned to the caller of findMyKeys().

As for curly braces, they are conventional blocks so follow normal syntax. Arrow functions ease some of the syntax requirements, but with a rule or two of their own.

    // ES5 function expression

    var foo = function (bar) {
      return bar;
    }; 

The syntax described…

var       -> declaration keyword
foo       -> variable name
=         -> assignment
function  -> function keyword
(bar)     -> formal parameter list in parens
{         -> LBRACE
return    -> return keyword
bar       -> return value
;         -> end-of-statement token
}         -> RBRACE
;         -> end-of-statement token

Semi-colons have been such a moot topic that later JavaScript implementations began automatically inserting them where and when the author leaves them out, as needed. I’ve included them above only for the sake of completeness, not obligation. The last statement before an RBRACE does not need a semi-colon as no statement follows. The block has been closed.

As for the the one after the RBRACE that completes the assignment statement but would not be needed either assuming there is a linebreak following. Habit has me always inserting it. Anyway, enough fuss about the semi-colon.

What’s changed with ES6?

const foo = bar => bar;

Above is a single line statement, some might call it, inline. For this circumstance the syntax rules of old are greatly relaxed.

const  -> declaration keyword
foo    -> variable name
=      -> assignment
bar    -> no parens around single parameter
=>     -> function keyword alias token
bar    -> implicitly returned value
;      -> end of statement

Call me sentimental, but I’m still fond of the completeness.

Let’s see what each will look like in the setting of a higher order function…

// ES5
var  array = [‘credit card’, ‘screwdriver’, ‘receipt’, ‘gum’, ‘keys’, ‘used gum’, ‘plastic spoon’]
var bar = "keys";
array.findIndex(function (foo) {
    return foo === bar;
});
// ES6
const  array = [‘credit card’, ‘screwdriver’, ‘receipt’, ‘gum’, ‘keys’, ‘used gum’, ‘plastic spoon’]
let bar = "keys";
array.findIndex(foo => foo === bar);

Obviously the newer relaxed syntax has rendered these expressions more readable and concise.

If we’re to use the conventional block syntax, then the rules apply…

const  array = [‘credit card’, ‘screwdriver’, ‘receipt’, ‘gum’, ‘keys’, ‘used gum’, ‘plastic spoon’]
let bar = "keys";
array.findIndex(foo => {
  return foo === bar
});

More can be said on this topic as pertains to multiple formal parameters and multiple statement code blocks which must follow ES5 syntax, but that can be garnered later.


#5

janneslohmeijer67310 & mtf,
Thank you so much for the very clear and detailed explanation!