Arrays
ES6 에서는 전역 Array 객체에 새로운 프로퍼티와 많은 인스턴스들을 추가 하여 배열을 이용한 작업을 더 수월하게끔 지원한다. 기존의 자바스크립트는 타 언어에 비하여 배열을 이용한 작업에 있어서 특징이나 능률이 떨어졌는데, ES6는 이를 보완한다.
Array.from(iterable, mapFunc, this)
Array.from() 메서드는 이터러블한 객체로부터 새로운 배열을 생성한다. 첫번째 인자로 이터러블한 객체의 참조값을 받는다. 두 번째 인자로는 선택적이며, 이는 Map function을 받는다. 이는 이터러블한 객체의 모든 요소에 적용된다. 세 번째 인자 역시 선택적이며, Map function 함수의 this에 바인딩 된다. 다음 예시를 보자.
let str = "0123";
let obj = {number: 1};
let arr = Array.from(str, function(value){
return parseInt(value) + this.number;
}, obj);
console.log(arr);
// 1,2,3,4Array.of(values...)
Array.of() 메서드는 배열을 생성하는 Array constructor 대신 사용할 수 있다. 기존의 Array constructor를 사용하여 배열을 생성하는 경우, 인자로 숫자 하나를 넣을 경우, 숫자를 요소로 갖는 배열이 아닌 해당 숫자의 길이를 갖는 배열을 생성하는 이슈를 해결한다. 다음 예시를 보자.
let arr1 = new Array(2);
let arr2 = new Array.of(2);
console.log(arr1[0], arr1.length);
console.log(arr2[0], arr2.length);
// Output
undefined 2
2 1Array.of() 메서드는 주로, 새로운 배열 인스턴스를 동적으로 생성할 때, constructor에 들어갈 값의 타입이나 요소의 갯수를 모를 때 사용한다.
Array.fill(value, startIndex, endIndex)
Array.fill() 메서드는 첫 번째 인자로 값을 받으며, 2,3 번째 인자는 선택적이며 시작하는 인덱스와 끝나는 인덱스를 인자로 받는다. default로는 0 ~ array.length - 1이다. startIndex 의 인덱스부터 endIndex 까지의 요소들을 value로 치환한다. endIndex는 포함되지않으며, endIndex-1의 인덱스까지 치환된다. 다음 예시를 보자. 음의 값을 받으면, 배열 길이 + (negativeNumber) 의 형태로 계산된다.
let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
let arr3 = [1, 2, 3, 4];
let arr4 = [1, 2, 3, 4];
let arr5 = [1, 2, 3, 4];
arr1.fill(5);
arr2.fill(5, 1, 2);
arr3.fill(5, 1, 3);
arr4.fill(5, -3, 2);
arr5.fill(5, 0, -2);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
// Output
5,5,5,5
1,5,3,4
1,5,5,4
1,5,3,4
5,5,3,4Array.find(testingFunc, this)
Array.find() 메서드는 testingFunc의 조건을 만족하는 배열의 요소를 반환한다. 만족하지않는다면 undefined를 반환한다.
첫 번째 인자의 testingFunc은 말그대로 테스팅 함수이다. 내가 확인하고자 하는 어떠한 작업을 담은 함수이며, 두 번째 인자로는 testingFunc에 this값이다.
testingFunc은 3개의 파라미터를 가지고있으며, 첫 번째는 value로, 현재 프로세스에 있는 배열의 원소이다. 두 번째 파라미터는 index로, value의 인덱스값이다. 세 번째 파라미터는 array로, find()를 호출한 배열이다. testingFunc은 반드시 true를 반환해야하며, 배열중에 테스팅 조건을 만족하는 첫 번째 원소를 반환한다. 다음 예시를 보자.
let x = 12;
let arr = [11, 12, 13];
let result = arr.find(function(value, index, array){
if(value == this)
{
return true;
}
}, x);
console.log(result); //Output "12"Array.findIndex(testingFunc ,this)
Array.findIndex() 메서드는 find()메서드와 아주 유사하다. value 대신, index를 반환한다.
let x = 12;
let arr = [11, 12, 13];
let result = arr.findIndex(function(value, index, array){
if(value == this)
{
return true;
}
}, x);
console.log(result); Output "1"Array.copyWithin(targetIndex, startIndex, endIndex)
Array.copyWithin() 메서드는, 타겟인덱스의 위치부터 startIndex ~ endIndex-1 까지의 배열을 새로 배치한다. 다음 예시를 보자.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [1, 2, 3, 4, 5];
let arr3 = [1, 2, 3, 4, 5];
let arr4 = [1, 2, 3, 4, 5];
arr1.copyWithin(1, 2, 4);
arr2.copyWithin(0, 1);
arr3.copyWithin(1, -2);
arr4.copyWithin(1, -2, -1);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
// Output
1,3,4,4,5
2,3,4,5,5
1,4,5,4,5
1,4,3,4,5Array.entries(),keys(),values()
Array.entries() 메서드는, 배열의 index, value를 반환한다. Array.kes() 메서드는 index를 반환하고, Array.values()는 배열의 원소 즉, value를 반환한다. 반환된 이터러블한 객체는 배열이 아니다.
let arr = ['a', 'b', 'c'];
let entries = arr.entries();
let keys = arr.keys();
let values = arr.values();
console.log(...entries);
console.log(...keys);
console.log(...values);
// Output
0,a 1,b 2,c
0 1 2
a b cCollections (컬렉션)
컬렉션이란, 단일 유닛으로서 복수의 원소를 저장하고 있는 형태의 객체이다. ES6는 다양한 새로운 컬렉션을 제시하였으며, 이는 데이터를 저장하고 정리하는데 더 나은 방법을 제공한다.
ES5 에서는 배열이 그 유일한 컬렉션 데이터였다. ES6는 array buffers, typed arrays, Set, Map 등 다양한 내장 컬렉션 객체를 지원한다. ES6에서 지원하는 새로운 컬렉션 객체를 살펴보자.
Array buffers
배열의 원소로 문자열, 숫자, 객체 등 어떠한 형태로도 저장될 수 있다. 배열은 동적으로 커진다. 이렇기 때문에 배열은 실행 속도나 메모리 부분에서 많은 제약이 있다. 이러한 이슈는 많은 연산과 큰 규모의 숫자를 다루는 어플리케이션을 개발하는 과정에서 종종 발생한다. Array buffers는 이러한 이슈의 대안으로서 제시되었다.
Array buffer는 8-bit 블럭단위의 메모리로 구성된 컬렉션이다. 각 블럭은 모두 Array buffer 엘리먼트다. Array buffer의 사이즈는 생성하는 과정에서 결정되어야 하기에 배열처럼 동적으로 커지지 않는다. Array buffer는 오직 숫자만 저장할 수 있으며, 어떠한 Array buffer 생성에 있어서 모든 블럭은 숫자 0으로 초기화된다. Array buffer 객체는 ArrayBuffer constrctor로부터 생성된다.
let buffer = new ArrayBuffer(80); //80 bytes sizeArray buffer 를 읽거나, 값을 작성하는 것은 DataView 객체를 사용하면 된다. 오직 8비트만이 숫자를 표현하기위해 사용하라는 것을 강제하진 않는다. 8,16,32 그리고 64비트를 사용하여 숫자를 표현할 수 있다. 다음 예시를 통해 DataView객체를 생성하고, 이를 통해 ArrayBuffer객체를 읽고 쓰는 방식을 알아보자.
let buffer = new ArrayBuffer(80);
let view = new DataView(buffer);
view.setInt32(8,22,false);
var number = view.getInt32(8,false);
console.log(number); //Output "22"여기서 우리는 DataView객체를 DataView constructor를 이용하여 생성했다. DataView객체는 숫자를 ArrayBuffer객체로 읽고 쓰는 다양한 메서드를 제공한다.
Array buffer로 데이터를 작성하는데 사용되는 모든 DataView 객체의 메서드는 3개의 인자를 받는다.
첫 번째 인자로는 바이트를 받는데, 이는 우리가 작성하고자 하는 숫자를 어떤 바이트로 표현할지를 결정할지의 오프셋이다. 두 번째 인자는 저장될 숫자이다. 세 번째 인자는 Boolean 타입을 받으며, 이는 바이트 오더인 엔디안을 받는다. false는 빅엔디안을 가리키며, 이는 큰 단위가 앞에 온다.
유사하게, DataView 객체의 Array buffer 객체의 데이터를 읽기위해 사용되는 모든 메서드는 2개의 인자를 받는다. 첫 번째 인자는 오프셋, 두 번째 인자는 사용된 엔디안이다.
DataView객체는 아래와 같이 숫자를 저장하는데 있어서 다양한 함수를 제공한다.
Typed arrays
Array buffer는 숫자를 읽거나 쓸 때마다 함수를 매번 불러와야 하는 단점이 존재한다. Typed arrays는 그러한 상황을 해결해주며 일반 배열처럼 읽고 쓸 수 있게 한다.
Typed array는 Array buffer의 wrapper 처럼 작동하며, Array buffer객체의 데이터를 n 비트 숫자의 시퀀스로 다룬다. n 값은 우리가 어떻게 Typed array를 생성하냐에 달려있다.
Array buffer 객체를 생성하고, 이를 Typed array를 이용하여 읽고 쓰는 예시를 보자.
var buffer = new ArrayBuffer(80);
var typed_array = new Float64Array(buffer);
typed_array[4] = 11;
console.log(typed_array.length);
console.log(typed_array[4]);
// Output
10
11
Float64Array cunstructor를 이용하여 Typed Array를 생성했다. 따라서, Array buffer 데이터를 64비트 10진수 숫자로 취급한다. buffer의 사이즈는 640 비트 이므로, 오직 10개의 64비트 숫자만이 저장될 수 있다.
다른 constructor도 존재한다.
Typed arrays는 일반 배열의 모든 메서드를 지원한다. 이터러블 프로토콜 역시 시행하기 때문에, 모두 이터러블 객체로서 사용될 수 있다
