# merge-list()

## 용도 <a href="#use" id="use"></a>

리스트(list)를 순환, 복제하여 새로운 리스트를 반환 받아 사용해야 할 경우 사용합니다.

## 사용법 <a href="#usage" id="usage"></a>

`merge-list()` 함수에 병합 할 리스트(list)를 전달합니다.

> merge-list($list1:**list**, $list&#x32;**:list**) → **list**

```javascript
$key-values1: top 10 right -20;
$key-values2: top 42;

@debug merge-list($key-values1, $key-values2); // top 42 right -20 반환 (병합 됨)
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|   $key-values1  |   list   |      ✔︎      |               |
|   $key-values2  |   list   |      ✔︎      |               |

## 로직 <a href="#logic" id="logic"></a>

`merge-list()` 유틸리티는 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@function merge-list($list1: (), $list2: ()) {
  $merge-list: copy-list($list1);

  @if length($list2) > 1 {
    @for $i from 1 through length($list2) {
      $merge-list: list.set-nth($merge-list, $i, nth($list2, $i));
    }
  }

  @return $merge-list;
}
```

1. 전달 받은 리스트1을 복사한 새로운 리스트를 준비
2. 전달 받은 리스트2의 아이템 개수가 1개 이상일 경우, 조건 처리
3. 리스트2의 아이템 개수만큼 반복 처리 → 개별 인덱스 마다 리스트2의 아이템을 리스트1의 아이템으로 대체
4. 순환 처리가 끝나면 복사한 리스트 반환

## 참고 <a href="#reference" id="reference"></a>

유틸리티 함수 로직에 사용된 Sass 빌트인 모듈은 다음과 같습니다.

* [@function](https://sass-lang.com/documentation/at-rules/function#optional-arguments)&#x20;
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [@for](https://sass-lang.com/documentation/at-rules/control/for)
* [set-nth()](https://sass-lang.com/documentation/modules/list#set-nth)
* [nth()](https://sass-lang.com/documentation/modules/list#nth)

유틸리티 함수 로직에 사용된 자체 제작 모듈은 다음과 같습니다.

* [copy-list()](https://yamoo9.gitbook.io/scss-mixins/utilities/list/copy-list)

{% hint style="info" %}
Sass의 List 자료형(Data Type)은 JavaScript의 Array와 유사합니다.
{% endhint %}

{% embed url="<https://sass-lang.com/documentation/modules/list>" %}