spectrum 에게 물어보세요. multiple option을 flat 하게 하고 싶어요.

질문:
쇼핑몰에서 옵션이 여러개 있는데 이걸 조합해서 보여주고 싶어요.
사이즈: s, m, l
색상: blue, red
길이: short, long
대상: girl, boy, woman, man

이라고 했을 때
s blue short woman
이런 식으로요.

답변:
reduce 를 사용하세요.
풀이 예제 << 클릭하면 coffee/js 소스랑 결과값 모두 볼 수 있어요.

Array::flatMap = (lambda) ->
  @concat.apply [], @.map lambda
v=[
 ['s','m','l']
 ['blue','red']
 ['short', 'long']
 ['girl', 'boy', 'woman', 'man']
]
console.log "result\n",
  v.reduce (x1,x2)->
    x1.map (o)->
      x2.map (p)->
        "#{o} #{p}"
    .flatMap (o)->o

분류의 갯수는 상관없어요.

두개를 순서대로 합쳐야한다! 싶을 때는 reduce로 어떻게 해봐야지!

하고 시작하는게 좋아요.

먼저 ['s', 'm', 'l'] 하고 ['blue', 'red'] 만 놓고 보자구요.

map으로 이중 루프를 돌면서 둘을 조합하면 되겠지요?

['s', 'm', 'l'].map (o)->
  ['blue', 'red'].map (p)->
    "#{o} #{p}"

근데 이렇게 하면

[["s blue","s red"],["m blue","m red"],["l blue","l red"]]

아마 이렇게 되겠지요.

['blue', 'red'].map 이 하나의 array 가 되고

그것들의 array 가 ['s', 'm', 'l'].map (o)->이니까요.

물론, 

temp=[]
  ['s', 'm', 'l'].map (o)->
    ['blue', 'red'].map (p)->
      temp.push "#{o} #{p}"
temp

이런 식으로 push 할 수도 있겠지요.

하지만, temp 변수를 할당하고 메모리를 낭비했네요.

  ['s', 'm', 'l'].map (o)->
    ['blue', 'red'].map (p)->
      "#{o} #{p}"
  .reduce (x,y)->
    [].concat x,y

혹은 concat 을 사용해서 앞뒤 어레이를 []를 벗겨주는 것도 방법이겠네요.

근데 이럴때 쓰는 좋은 게 있어요.

flatMap 이라고요. [ ] 상자에서 까주는 것이지요.

RxJS 나 lodash 같은 걸 쓰면 바로 해결할 수도 있지만 만들어 쓰는 것도 좋겠져.

Array::flatMap = (lambda) -> 

  @concat.apply [], @.map lambda

이렇게 만들면 되겠네요.

근데 나는 Map 은 안하고 Flat ([]까기)만 하겠다 싶으면

flatMap (o)->o 라고 쓰는 것 조차 귀찮을 거여요.

Array::flatMap = (lambda) -> 

  @concat.apply [], @.map if lambda? then lambda else (o)->o

이렇게 lambda 가 없을 경우엔 (o)->o 해서 flatMap() 로도 쓸 수 있게 하면 편리하겠죠?

자 flat 한 array 를 만들었으면 이걸 reduce 로 눈덩이 처럼 불려봅니다.

다음 reduce 가 돌때엔 앞서 조합한 모든 array 와 합치겠죠?

string 이 아니라 object를 사용할 땐 [].concat o,p 한다던가 재주를 부려봅시다.