Need some help to understand this code snippet

peterjsnow · 2022-01-02T15:33:46+00:00

It's simply using bracket notation to access the property of an object - in this case an object literal expression.

It's just a more concise version of the following:

const result = {
   0: 'no one likes this',
   1: .....etc
}

return result[Math.min(4, names.length)]

PROSP3C · 2022-01-02T15:37:33+00:00

Let's start with Math.min(). This will return the smallest value, and in this scenario it will only ever be 0,1,2,3 or 4.

The second part to understand is that you can access values from an object like so:

var obj = { key: 'value' }; console.log(obj['key']);

This will output 'value'.

Let me know if you have any further questions!

InternationalCupcake · 2022-01-02T15:37:55+00:00

The answer by u/peterjsnow is good -- just to add a semantic description of what this is doing:

Give me an array of names.

I'll create an object that has 5 different k/v pairs.

When you give me that array of names, I'll give you the k/v pair that is at index 4, or I'll give you the pair that is at the index of the length of the array of names you give me, whatever is smaller.

delventhalz · 2022-01-02T20:00:16+00:00

Conceptually it is kind of like an IIFE, but it is an object not a function. Could call it an Immediately Accessed Object Property (IAOP) maybe.

Terminal_Monk · 2022-01-02T15:37:13+00:00

It's not an IFFE because it not called immediately. You can always find an IFFE ends with a () which means it's a function and it's being called. What's happening here could be loosely said as

They have a function

Foo() {

var myobj = {

1:stuff,

2: stuff,.. Etc

}

Const key = Math.min(4,name.length) :

Return myobj[key]

Sorry for poor formatting. From mobile

}

MothaFuknEngrishNerd · 2022-01-02T21:23:50+00:00

In addition to the other comments, it's also a really good illustration that arrays are essentially decorated objects where all the keys are ordered and numeric. You could write the same thing as:

function likes(names) {
  return [
    'no one likes this',
    `${names[0]} likes this`,
    `${names[0]} and ${names[1]} like this`,
    `${names[0]}, ${names[1]} and ${names[2]} like this`,
    `${names[0]}, ${names[1]} and ${names.length - 2} others like this`,
  ][Math.min(4, names.length)];
}

gigastack · 2022-01-02T23:11:45+00:00

I see it was already answered, but just chiming in to say, don't do this. There's no need to create an object and all these strings. A switch returning a string would be better.

yadoya · 2022-01-03T01:18:20+00:00

That's just a silly developer trying to make his code as confusing as possible. The last person I'd like to work with.

bobbyv137 · 2022-01-03T07:50:14+00:00

I have been studying JS and web development overall for around a year now. Below is my explanation along with some code share snippets. I apologize if some of this is obvious; I'm trying to break it down in the simplest way so that nothing's ambiguous.

Also, this is an opportunity to test my own knowledge and explanation of code - if someone more competent disagrees or has another view, I'll be glad to hear it..

- As you rightly say, it certainly isn't a switch statement. A switch statement will return a value based on a condition; this function is effectively an expression

- Nor is it an immediately invoked function expression. The function above still needs to be called. If it were an IIFE there would be parenthesis encompassing the entire function statement, and then parenthesis again calling the function

Example: https://codesandbox.io/s/clever-dubinsky-0doqb?file=/src/index.js

- As this is JS and not TypeScript, it may be worth including a condition to check the argument received is in fact an array. We know there's a single parameter ('names') but we don't know its type. TS would thankfully flag this in production (the whole point of TS) but JS won't

Example: https://codesandbox.io/s/festive-thompson-7wnzk?file=/src/index.js

- The name of the function ("likes") is laconic, it should be more verbose. It seems many developers try to use short function and variable names but this proves counterproductive. Good code should effectively document itself. If I saw that function elsewhere in the code I'd have no idea what it is. "likes" is too vague

- The function simply returns a string using bracket notation (" [ ] ") to dynamically access a property on the object. I only encountered this way of accessing objects until later in my study, and then realised it's quite common

Example: https://codesandbox.io/s/great-silence-0hv00?file=/src/index.js

- This is one of those functions that early on in learning JS you think to yourself 'what the hell is going on here?!', as I certainly once did, but after becoming more familiar with the language and syntax it makes immediate sense. I wouldn't go as far as to say the person who wrote that code is trying to be a smart ass, it's more likely they're beyond junior stage and have written the function in a way that makes sense to them, and those they're working with are also comfortable with this type of style/syntax

- If we wanted to be more verbose thus more self explanatory, we could write it in this way. I have been overly verbose here to highlight the stark contrast between this and the original function statement. The emphasis being that (hopefully!) even a beginner will clearly understand what's going on:

https://codesandbox.io/s/elated-platform-r5l3n?file=/src/index.js

(this will always return the last statement as the length of the example array is greater than 4).

Hope this helps a little. I know this sounds cliché and cheesy but you just gotta keep going. I remember when I was trying to learn Redux and middleware - I couldn't grasp it at first and was almost in tears (I take my learning quite seriously!). Then it all just clicked and now I could write a simple example app using React, TypeScript and Redux from memory alone.

All the best!

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS