새로운 Array 클래스의 메소드를 사용하면(자), for 루프는 사용하지 않고 배열 요소가 처리할 수 있습니다. 다만, 원래가 되는 배열이 없을 때, 필요한 요소가 납입된 배열을 어떻게 만들면 좋은가 생각해야 합니다.

for 루프에서 Canvas에 그리는 샘플 코드

제목 for 루프를 사용하는 함수는 다음 코드 001입니다 ( "스타일과 색상 적용"참조). 색상이 변경된 작은 사각형을 Canvas에 타일 모양으로 정렬합니다. 인수는 작은 정사각형의 한 변의 길이와, 종횡에 늘어놓을 수 있는 개수입니다. draw(25, 4) 에서 호출하면 Canvas는 다음 그림 001의 모양을 그립니다. jsdo.it에 "Drawing squares on Canvas with for loop"로 내걸었습니다.

코드 001 ■ for 루프를 사용하여 Canvas에 그리기

function draw(side, count) {
    var context2d = document.getElementById('myCanvas').getContext('2d');
    var amount = count * count;
    var angle = 360 / (amount - 1);
    for (var i = 0; i < count; i++) {
        for (var j = 0; j < count; j++) {
            context2d.fillStyle = 'hsl(' + angle * (i * count + j) + ', 100%, 50%)';
            context2d.fillRect(j * side, i * side, side, side);
            console.log(angle * (i * count + j));
        }
    }
}

그림 001 ■ 색조가 바뀐 사각형이 타일로 늘어서 있습니다.

생각하는 것은, Array() 생성자로 길이를 결정해 만든 배열에, 요소는 Array.map() 메서드 그리고 더하는 방법입니다. 그런데 반환되는 것은 빈 배열입니다. Array.map() 메서드는 값이 (undefined 되어도) 대입되어 있지 않은 요소에 대해서는, 콜백을 호출하지 않는다 입니다.

new Array(amount).map(() => 0)  // []

Array.fill() 메서드로 배열 요소 채우기

ECMAScript 6에 제공된 Array.fill() 메서드 메서드는 인수 값을 지정된 인덱스에 할당합니다. 이것으로, 길이를 정한 배열의 요소는 메우기 때문에, Array.map() 메소드를 호출할 수 있습니다.

이전 코드 001의 for 문을 사용한 처리는 다음의 코드 002와 같이 Array 클래스의 메소드로 바꿀 수 있습니다. jsdo.it에도 「 ES6: Drawing squares on Canvas with Array methods 」를 내걸었습니다.

코드 002 ■ for 문은 사용하지 않고 Array 클래스의 메서드로 처리

function draw(side, count) {
    const context2d = document.getElementById('myCanvas').getContext('2d');
    const amount = count * count;
    const angle = 360 / (amount - 1);
    new Array(amount).fill(0, 0).map((data, i) => ({
        color: `hsl(${angle * i}, 100%, 50%)`,
        x: i % count * side,
        y: Math.floor(i / count) * side
    }))
    .forEach((data) => {
        context2d.fillStyle = data.color;
        context2d.fillRect(data.x, data.y, side, side);
    });
}

Array.from() 메서드로 새로운 요소의 배열을 만든다.

ECMAScript 2015의 Array 클래스에는 Array.from() 메서드도 추가되었습니다. 배열형(array-like) 혹은 반복 가능(iterable) 오브젝트로부터, 새롭게 Array 인스턴스를 만드는 것이 원래의 역할입니다. 그러나 두 번째 인수는 맵에 대한 콜백 함수를 제공합니다. 그리고, 제1 인수가 길이를 결정한 것만의 요소가 없는 배열에서도, 콜백 함수를 호출할 수 있는 것입니다.

이전 코드 002는, Array.from() 메소드를 사용해 다음과 같이 재기입할 수도 있습니다.

// new Array(amount).fill(0, 0).map((data, i) => ({
Array.from(new Array(amount), (data, i) => ({
    // プロパティ
}))

스프레드 연산자로 배열 요소 분리

ECMAScript 2015에는 스프레드 연산자 ...이 있습니다. 배열 요소를 나누어 부모 배열의 요소로 할 수 있습니다. 이 연산자를 사용하여 이전 코드 002는 다음과 같이 다시 작성할 수도 있습니다.

[...new Array(amount)].map((data, i) => ({
    // プロパティ
}))

[2018년 1월 23일: 본항을 추가]