> 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/get-value-after-key.md).

# get-value-after-key()

리스트(\`키 값\` 형식)에서 값을 추출해 반환하는 유틸리티 함수

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

`키1 값1 키2 값2 ...` 형식의 리스트(list)에서 키 뒤에 나오는 값을 추출해야 할 경우 사용합니다.

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

`get-value-after-key()` 함수에 키 값 형식의 리스트(list)와 키(key)를 전달합니다.

> get-value-after-key($list:**list**, $key:**string**) → **any**

```javascript
$key-value-list: z-index 10 right -34px bottom 0;

@debug get-value-after-key($key-value-list, right); // -34px 반환
```

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

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

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

```javascript
@function get-value-after-key($key-value-list, $key) {
  $key-index: index($key-value-list, $key);
  @return if($key-index, nth($key-value-list, $key-index + 1), null);
}
```

1. 전달 받은 키의 인덱스가 전달 받은 리스트의 몇 번째인지 검토
2. 리스트 안에 키가 포함되어 있다면? 키의 다음 인덱스(+1) 값을 추출해 반환&#x20;
3. 리스트 안에 키가 포함되어 있지 않다면? `null`을 반환

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

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

* [@function](https://sass-lang.com/documentation/at-rules/function#optional-arguments)
* [if()](https://sass-lang.com/documentation/modules#if)
* [index()](https://sass-lang.com/documentation/modules/list#index)
* [nth()](https://sass-lang.com/documentation/modules/list#nth)

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

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