본문으로 바로가기

[ES6] 배열 메소드 : from(), of()

2020. 5. 2. 23:21
반응형

ES6에서 새롭게 Array 관련 2개의 정적 메소드(static method) from()of()가 추가되었습니다. Static method 이므로 "Array.메소드명"의 형태로 호출합니다.

 

1. Array.from()

  • Array.from() 메소드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 복사해서 새로운 배열 객체를 생성합니다.
  • from()은 정적 메소드로 배열을 생성하지 않고 바로 사용할 수 있습니다.

Array-like object의 조건은 아래와 같습니다.

  • 배열처럼 인덱스로 접근이 가능하고, length 속성이 존재한다.
  • 실제 배열의 네이티브 메소드( push, forEach ...)는 존재하지 않는다.

Array-like object의 예로는 string, arguments, HTML Collection, NodeList 등이 있습니다.

* Iterable object에 대해서는 기회가 되면 따로 다루겠습니다.

 

[문법]

Array.from(object, mapFunction, thisValue);

 

Parameter Description
object

(필수)  배열로 변환할 객체

(length property를 갖거나 iterable object이어야 함)

mapFunction (옵션) 배열의 각 element에 대해서 실행할 map function
thisValue (옵션) 함수 내부에서 사용될 this에 대한 값

[예제]

가장 간단하게 문자열에서 배열을 만드는 예제입니다. 문자열 자체가 length property를 가지고 있으므로 from()을 통해서 배열로 변환할 수 있습니다.

var arr = Array.from("ABC");

console.log(arr); // ["A","B","C"]

 

✅ mapFunction 사용 예제

From 메소드의 "mapFunction"을 이용하여 기존 map() 메소드의 동작을 구현할 수 있습니다. 그런데 이경우는 그냥 map을 쓰는게 나을것 같네요 ^^;

var arr = Array.from([1, 2, 3], x => x*x);      
console.log(arr); // [1, 4, 9]

// ES5의 map 메소드를 이용하면 동일한 동작 수행 가능
var arrMap = [1,2,3].map(x => x*x);
console.log(arrMap); // [1, 4, 9]

 

✅  length property로 sequence 배열 생성

앞에서 배열로 변환할 객체가 length property를 가지면 가능하다고 했습니다. 따라서 아래와 같이 단순히 length property를 추가한 object로부터 배열을 생성하는 것이 가능합니다. 단, value 자체는 없기 때문에 index를 사용하여 배열을 생성합니다.

// 짝수 생성기 - {length}는 ES6 객체 literal의 축약형입니다.
var evenGen = (length) => Array.from({length}, (value, index) => index*2);
console.log(evenGen(5)); // [0, 2, 4, 6, 8]
// 홀수 생성기
var oddGen = (length) => Array.from({length}, (value, index) => index*2+1);
console.log(oddGen(5)); // [1, 3, 5, 7, 9]

 

✅ arguments에서 배열 생성

함수의 arguments는 length property는 가지고 있지만 배열 메소드를 사용할수는 없습니다. 이러한 경우, Array.from()을 통해서 arguments를 배열로 변환하여 배열 메소드를 사용할 수 있습니다.

// 오류 발생 (arguments에는 array method가 없음)
function getOdds() {
  console.log(Array.isArray(arguments)); // false
  return arguments.filter((item)=> item%2 === 1);
}

console.log(getOdds(1, 2, 3, 4, 5)); // Uncaught TypeError: arguments.filter is not a function


// Array.from을 사용하여 배열로 변환
function getOddsFrom() {
  return Array.from(arguments).filter((item)=> item%2 === 1);
}

console.log(getOddsFrom(1, 2, 3, 4, 5)); // [1, 3, 5]

 

console로 확인해보면 arguments는 array method가 존재하지 않습니다.

 

✅ HTML node 또는 element 처리

HTML Collection또는 nodeList 역시 유사배열 객체입니다. HTML 관련 사항에 대해서 배열 메소드를 이용하고 싶은 경우에도 Array.from을 사용할 수 있습니다.

var nodes = document.querySelectorAll('a');
console.log(nodes); // NodeList...
Array.from(nodes).forEach(function(el) { console.log(el) });

 

2. Array.of()

  • Array.of() 메소드는 입력받는 arguments로부터 새로운 배열을 생성하여 반환합니다.
  • of()는 정적 Method 입니다.

[문법]

Array.of(element0, element1, element3, ...., elementN);

[예제]

특별히 설명할 것 없이 단순히 인자를 입력받아서 배열을 생성합니다. 인자의 유형은 상관없습니다.

var arr = Array.of(1,2,3,);
console.log(arr); // [1, 2, 3];

var arr = Array.of('철수', '영희', '바둑이');
console.log(arr); // ["철수", "영희", "바둑이");

var arr = Array.of(1, '영희', {name: '바둑이'});
console.log(arr); // [1, "영희", {name: '바둑이'}]

 

그런데... 살펴보다 보니 굳이 Array.of를 사용해야 할 필요성이 잘 떠오르지 않습니다. 일반적이라면 보통의 literal 표기법을 쓰는 게 좋을 것 같은데 말이죠. ^^

다만 literal 표기법을 사용할 수 없고 Array를 사용해야만 하는 경우에 통일성을 위해서 Array 대신 사용할 수 있습니다. Array의 경우는 입력 요소가 숫자이면서 개수가 1개일 때는 해당 인자를 배열의 길이로 생각해서 빈 배열을 생성하게 됩니다. 따라서 이러한 경우에는 통일성을 위해서 Array.of를 사용하는 것이 좋습니다.

console.log(Array(2,3)); // [2,3]
console.log(Array.of(2,3)); // [2,3]

console.log(Array(3)); // [empty x 3]
console.log(Array.of(3)); // [3]

 

반응형