> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/list/copy-list.md).

# copy-list()

리스트를 복제해 새로운 리스트로 반환하는 유틸리티 함수

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

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

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

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

> copy-list($list:**list**) → **list**

```javascript
$direction: left bottom right top;

@debug copy-list($direction); // left bottom right top (복제된 리스트) 반환
```

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

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

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

```javascript
@function copy-list($list) {
  $copyed-list: ();

  @each $item in $list {
    $copyed-list: append($copyed-list, $item);
  }

  @return $copyed-list;
}
```

1. 전달 받은 리스트를 순환하여 개별 아이템을 내보낼 새로운 리스트의 아이템으로 추가
2. 순환 처리가 끝나면 아이템을 복제한 새로운 리스트 반환

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

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

* [@function](https://sass-lang.com/documentation/at-rules/function#optional-arguments)&#x20;
* [@each](https://sass-lang.com/documentation/at-rules/control/each)
* [append()](https://sass-lang.com/documentation/modules/list#append)

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

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