[JavaScript] Array.from + selectedOptions 으로 선택된 요소의 값만 담은 배열반환하기

Array.from() 

해당 메서드는 유사 배열 객체(array-like object)나 반복가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다. 

• 첫번째 매개변수로는 `배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체`를 넘기고 두번째 매개변수(optional)로 배열의 모든 요소에 대해 호출할 매핑 함수를 전달한다. 세번째 매개변수(optional)는 thisArg로 매핑 함수를 실행할 때 this로 사용할 값을 넘겨주면 된다.
• 시퀀스 생성기(range)로도 사용할 수 있다.

유사 배열 객체(array-like object) : length 속성과 인덱싱된 요소를 가진 객체
순회 가능한 객체(iterable object): Map, Set 등 객체의 요소를 얻을 수 있는 객체

사용 예제

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// Expected output: Array [2, 4, 6]

// Array.from 과 화살표 함수 사용하기
// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position, 
// the value of `v` below will be `undefined` 대충 초기화되기 전에 v(value)는 undefined라는 말,
// 그래서 i(index)를 반환하여 length만큼의 요소를 갖는 배열을 반환하게 만든다.
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

 

HTMLSelectElement.selectedOptions

`HTMLSelectElement`의 읽기 전용 프로퍼티이다. <select>태그에서 선택된 <options>태그의 요소들을 포함하고 있는 리스트를 포함하고 있다. 

문법

var selectedCollection = HTMLSelectElement.selectedOptions;

값은 <선택> 요소 내에서 HTMLSelectElement의 하위 요소이거나 HTMLOptGroupElement(en-US)의 하위 요소인 현재 선택된 모든 HTMLOptionElement를 나열하는 HTMLCollection이다.

즉, <선택> 요소에 포함된 모든 옵션이 결과의 일부가 될 수 있지만 옵션 그룹은 목록에 포함되지 않는다.(즉, 선택된 옵션들만 포함되는 값을 반환한다.)

현재 선택된 옵션이 없는 경우 컬렉션은 비어 있으며 길이(en-US)는 0을 반환한다.

---

예시 코드 

const onRolesChanged = (e) => {
      //1개 이상의 옵션이 선택될 때를 허용하기 위함
      const values = Array.from(
         e.target.selectedOptions, // HTMLCollection
         (option) => option.value
      );
      setRoles(values);
   };

본문은 이 코드의 option 이 무엇을 가리키는 지 명확하게 이해가 안가 찾아보게 된 내용이다.

• 해당 코드에서 `option`인자는 HTML `select`요소의 selectedOptions` 속성에서 반환되는 `HTMLOptionsCollection`의 속성에서 반환되는 `HTMLOptionsCollections`의 요소라고 한다.
• HTMLOptionsCollection은 select요소에서 선택된 옵션 요소들의 컬렉션을 나타내며, 각각의 요소는 HTMLOptionElement 객체이다. 이 객체는 해당 옵션 요소에 대한 정보를 가지고 있으며, value 속성은 해당 옵션의 값을 나타낸다. 
• Array.from() 메서드를 통해 HTMLOptionsCollection을 배열로 변환후, 매핑 함수를 통해 각 옵션 요소의 value속성만을 가지고 있는 새로운 배열을 만들어 준 것이다.

HTML codes

select 태그의 multiple 속성은 1개 이상의 option을 선택할 수 있게 해준다.

<select
    id="roles"
    name="roles"
    className={`form__select ${validRolesClass}`}
    multiple={true}
    size="3"
    value={roles}
    onChange={onRolesChanged}>
    {options}
</select>

• 위의 코드는 정확히는 JSX로 HTML에서 JS를 쓸 수 있다. 하단은 options 변수의 코드이다.

   // Object.values(): 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다. for...in 구문과 동일한 순서를 가진다.
   const options = Object.values(ROLES).map((role) => {
      return (
         <option key={role} value={role}>
            {role}
         </option>
      );
   });
   
   // ROLES.js
   export const ROLES = {
   Employee: "Employee",
   Manager: "Manager",
   Admin: "Admin",
};

all ref: MDN