Struggling with a simple need to add an item to an Array

[jiggneshhgohel]

Hello,

I am struggling with a simple need to add an item, normally and conditionally, to an Array.
I am having a hard-time probably because I am new to functional programming paradigm! I have tried following so far.

component TestComponent {
  property size : Number = 2

  get myFunc1 : String {
    let str =
      if ( size >= 8 && size <= 10 ) {
        "large"
      } else if ( size >= 5 && size <= 7 ) {
        "medium"
      } else {
        "small"
      }

    str
  }

  get myFunc2 : Array(String) {
    let arr = [ "room" ]

    let result1 = myFunc1

    Debug.log("result1: #{result1}")

    Array.push(arr, myFunc1)

    Debug.log(arr)

    arr

    // Debug Output (Unexpected)
    /*
      result1: small
      Array: [ "room" ]
    */
    /* Output Expected: 
      result1: small
      Array: [ "room", "small" ]
    */
  }

  get myFunc3 : Array(String) {
    let arr = [ "room" ]
      |> Array.push(myFunc1)

    Debug.log(arr)

    arr

    // Debug Output (Expected)
    /*
      Array [ "room", "small" ]
    */
  }

  get myFunc4 : Array(String) {
    let arr = [ "room" ]

    let result1 = myFunc1

    Debug.log("result1: #{result1}")

    if result1 == "small" {
      Array.push(arr, "mini")
    }

    arr

    // Debug Output (Unexpected)
    /*
      result1: small
      Array [ "room" ]
    */
    /* Output Expected: 
      result1: small
      Array: [ "room", "mini" ]
    */
  }

  fun render : Html {
    <div>
      {myFunc2}
      {myFunc3}
      {myFunc4}
    </div>
  }

}

component Main {

  fun render : Html {
      <TestComponent size={4}/>
  }
}

In Javascript adding item to an array is quite intuitive.

arr = []
arr.push(1, 2)
// arr contains 1, 2
arr.push(3)
// arr contains 1, 2, 3

In Ruby also it is quite straightforward

def my_method(condition_1: false
  arr = []
  arr << 1
  arr << 2
  
  if conditon_1
    arr << 3
  end
  
  arr
end

Thanks.

[gdotdesign]

Hello 👋

I am having a hard-time probably because I am new to functional programming paradigm!

Yes, it's a bit difficult switching to functional programming mindset! What helped me at the time was to think about it as transformation instead of mutation.

Most values in Mint are immutable, which means that they can't be mutated.

In OO, variables are mutated in a functional language it's transformed - a new version of the data is returned, not the old one mutated.

// This "transforms" `arr` and returns a new version of it where the new value is added at the end.
// The original `arr` is not modified.
Array.push(arr, myFunc1)

You can use shadowing to achieve the same thing as you would in OO:

let arr = ["A"]
dbg arr

let arr = Array.push(arr, "B")
dbg arr

I hope this helps 🙂

---

Mint does support mutation using state, but it's asynchronous:

component Main {
  state arr : Array(String) = ["A"]
  
  fun componentDidMount {
  	next { arr: Array.push(arr, "B") }
  }
  
  fun render {
    <>arr</>
  }
}

[jiggneshhgohel]

@gdotdesign Thanks for your prompt reply in #791 (comment).

Regarding following

// This "transforms" `arr` and returns a new version of it where the new value is added at the end.
// The original `arr` is not modified.
Array.push(arr, myFunc1)

But then to get hold of the transformed array we will need to use a new assignment like following

arr = Array.push(arr, myFunc)

But doing that raises error like following:

ERROR (GET_EXPECTED_CLOSING_BRACKET)

I was expecting the closing bracket of a get but I found "=" instead:

Also that makes me ask following additional questions:

1. How do I achieve the use-case with myFunc4 (shown below for quick view) wherein I need to conditionally push to an Array and if pushed into it need that updated Array.

  get myFunc4 : Array(String) {
    let arr = [ "room" ]

    let result1 = myFunc1

    Debug.log("result1: #{result1}")

    if result1 == "small" {
      Array.push(arr, "mini")
    }

    arr

    // Debug Output (Unexpected)
    /*
      result1: small
      Array [ "room" ]
    */
    /* Output Expected:
      result1: small
      Array: [ "room", "mini" ]
    */
  }

2. How do I gather results returned from multiple functions in an collector arr? For e.g following

arr = []
arr = Array.push(arr, myFunc1)
arr = Array.push(arr, myFunc2)
arr = Array.push(arr, myFunc3)
arr

3. How do I return early while computing something. For e.g. how do I achieve following?

arr = []

result1 = myFunc1

if result1 == <something_unwanted>
  return arr
end

arr = Array.push(arr, result1)
arr

Regarding following

You can use shadowing to achieve the same thing as you would in OO:

OK. But wouldn't employing that approach defeat the philosophy of the language?

Regarding following

Mint does support mutation using state, but it's asynchronous:

Yes. I read about that at https://mint-lang.com/reference/state-management but the example use-case I have asked about in my TestComponent doesn't looks like a candidate for a state. I mean my component have few computed properties (ref: https://mint-lang.com/reference/components/computed-properties) and I need to consolidate result of all of them.

Please share your thoughts.

Thanks.

[gdotdesign]

But doing that raises error like following:

It needs to be the same let arr = as before, there is no naked assignment in Mint.

1. You return the original array in the elsebranch:

let arr = 
  if result1 == "small" {
    Array.push(arr, "mini")
  } else {
    arr
  }

2. You can use pipes to make that nicer:

let arr =
  []
  |> Array.push(myFunc1)
  |> Array.push(myFunc2)
  |> Array.push(myFunc3)

which is the same as:

Array.push(Array.push(Array.push([], myFunc1), myFunc2), myFunc3)

3. There is no early return like that, you need to handle the else branch correctly:

let arr = []
let result1 = myFunc1

if result1 == <something_unwanted> {
  arr
} else {
  Array.push(arr, result1)
}

OK. But wouldn't employing that approach defeat the philosophy of the language?

Not necessarily, that still functional and immutable it's just displayed differently.

Mint does support mutation using state, but it's asynchronous:

state is mainly for application state, not computation state, but it's your discretion what you put where.