A cool way to do reflection in javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ธ.ค. 2024
  • I of course made a mistake, and it should be [name]: instead of name:
    Whoops

ความคิดเห็น • 30

  • @XCanG
    @XCanG หลายเดือนก่อน +15

    Also you have error in your opt function, it should return {[name]: value.value} in your case.

    • @wilkesreid
      @wilkesreid หลายเดือนก่อน

      You are correct

  • @JimmayVV
    @JimmayVV 17 วันที่ผ่านมา +2

    I feel like a simpler way to solve this problem is to make a function that takes an object, and returns a new object with only the keys on it that are truthy.
    But I like the creativity!

  • @EmanueleSerini78
    @EmanueleSerini78 หลายเดือนก่อน +5

    Nice tip, though this makes me wonder how many people have read a book about javascript

  • @rafaelbitencourt6021
    @rafaelbitencourt6021 9 วันที่ผ่านมา +2

    ...opt('favoriteColor', favoriteColor)
    function opt(key, ref) { return ref.value ? { [key]: ref.value } : {} }

  • @philadams9254
    @philadams9254 2 วันที่ผ่านมา

    Just send everything and let the backend logic for favourite colour deal with the empty value - it has to check the value anyway.

  • @sandervspl
    @sandervspl 8 วันที่ผ่านมา +3

    Its called “spread operator” not “rest operator” 😄 sorry it started to annoy me a bit after you said it multiple times haha

  • @Cdaprod
    @Cdaprod วันที่ผ่านมา

    Nice [[]]

  • @BehruzbekOtayev
    @BehruzbekOtayev หลายเดือนก่อน +4

    Nice exploration. But over time you come to a realization that simpler is better, especially when you're working in teams. The abstraction you just made is not easily understandable and that might come to bite you in the future. Happens to me sometimes. That doesn't mean you stop doing that. Do it, you're mastering the language.

  • @Lk77ful
    @Lk77ful หลายเดือนก่อน +4

    i would always submit all values even when null/undefined

    • @GeneraluStelaru
      @GeneraluStelaru 21 วันที่ผ่านมา +1

      Careful with sending non-nullable values to a PHP backend.

    • @Lk77ful
      @Lk77ful 21 วันที่ผ่านมา

      @GeneraluStelaru if it's not nullable, the validation will fail on the php side

  • @wanderingzanzey2126
    @wanderingzanzey2126 หลายเดือนก่อน +1

    Love that you're learning and having fun :)
    this video made my brain hurt though ... this is a tutorial on what _not_ to do. Especially using reflection for something that can be solved with a standard. Clever code != Good Code. Bad habits all over the place.

  • @asagiai4965
    @asagiai4965 25 วันที่ผ่านมา

    It's a good thing to learn something new.

  • @aminnairidev
    @aminnairidev 27 วันที่ผ่านมา

    I feel like undefined value should be returned and checked by the API (if the API your are dealing with is correctly setup) not by the client because you are doing work that should be done anyway by the server, so either you are doing twice the work, or the server can be corrupted by a malicious user. Anyway cool to see you are exploring the langage and you had fun!

  • @zeenuexe8362
    @zeenuexe8362 วันที่ผ่านมา

    Huh, I thought this was just normal js object manipulation....

  • @joonas175
    @joonas175 22 วันที่ผ่านมา

    It's one way of doing this and it's not completely wrong. However, I think you should utilize the undefined value as is instead of this additional logic. JSON.stringify removes undefined values from an object, so just run every object through JSON.stringify before sending to the server. This is the way axios handles for it, for example, and in my opinion it's the correct use case for undefined values. And you kind of need to stringify the request data anyways, since there is no concept of data types in the HTTP layer, it's just bytes being parsed on both ends. In fact, JSON doesn't even contain undefined value, and null should be used to represent an "empty" value. So tl;dr: prefer to use undefined to omit properties, null to represent empty values.

  • @Efim141
    @Efim141 หลายเดือนก่อน +1

    Just [r]: r.value wouldn’t work? [r] takes the name of the r variable and it can be used as an object key here

    • @lukasmolcic5143
      @lukasmolcic5143 หลายเดือนก่อน +2

      [r] wouldn't be the name of the variable, it would try to take the whole value of r, and use it as the key for the new object

  • @alifrahman7099
    @alifrahman7099 หลายเดือนก่อน

    cool

  • @ZSpecZA
    @ZSpecZA หลายเดือนก่อน

    You can do it more simply with
    function submit() {
    const payload = Object.fromEntries(
    Object.entries({ name, email, favoriteColor })
    .filter(([_, ref]) => ref?.value != null)
    .map(([key, ref]) => [key, ref.value])
    );
    post(payload);
    }
    Some of the utility libraries like Lodash/Underscore.js also give you access to a `mapValues` type utility function that does the same as above, but more efficiently and less code on your part. `zip`/`unzip` are also functions in these utility libraries that help a lot with this kind of object transformation and go tegether well with `fromEntries` / `toEntries`.

    • @AkioJunichiro
      @AkioJunichiro หลายเดือนก่อน +1

      4 loops under the hood tho
      - fromEntries
      - entries
      - filter
      -map
      his the solution 2 loops
      -entries
      -spread operator

    • @ZSpecZA
      @ZSpecZA หลายเดือนก่อน

      @@AkioJunichiro Which is why I mentioned utility libraries. In this example however, the number of loops doesn't matter. If it were a bigger object, then sure, but for something with

  • @DaxSudo
    @DaxSudo 9 วันที่ผ่านมา

    Like 100

  • @royz_1
    @royz_1 วันที่ผ่านมา

    I was so invested in this video only to discover the most basic and commonly used pattern for creating objects.
    No hate though, I liked the way you explained. It would help out beginners I guess.
    If you watch any beginner level tutorial about javascript objects, you will find this pattern being explained.