Preparing workspace
← 목록으로

[JavaScript] 모던 자바스크립트 - 10장 배열의 기능 개선 (1)

JavaScript

2021.01.20

배열 만들기

유사 배열 객체 (즉, 숫자 인덱스와 length 프로퍼티를 가지는 객체)를 배열로 변환하기 위한 선택지 또한 제한적이었다.
이 문제를 해결하기 위해서는 추가 코드가 필요했고, ES6에서는 자바스크립트 배열을 보다 쉽게 만들수 있도록
Array.of()와 Array.from() 메서드가 추가되었다.


Array.of() 메서드

  1. ES6에서 자바스크립트에 새로운 생성 메서드가 추가된 이유는 개발자가 Array 생성자로 배열을 만들었을 때
    발생하는 이상 동작을 피하도록 하기 위함이다.
    Array 생성자는 전달된 인자의 타입과 개수에 따라 다르게 동작한다.

    // 1) Array 생성자에 숫자 값 하나가 전달되는 경우, 배열의 length 프로퍼티는 그 값으로 결정됨!
let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]); // undefined
console.log(items[1]); // undefined
// ---

// 2) Array 생성자에 숫자가 아닌 값이 전달되는 경우, 그 값은 배열의 유일한 요소가 된다.
items = new Array('2');
console.log(items.length); // 1
console.log(items[0]); // "2"
// ---

// 3) 여러 개의 값이 전달되는 경우, 그 값들은 배열의 요소가 된다.
items = new Array(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2

items = new Array(3, '2');
console.log(items.length); // 2
console.log(items[0]); // 3
console.log(items[1]); // "2"
// ---

    ▲ 예제, 전달되는 인자의 데이터 타입을 언제나 알 수 있는 것은 아니기 때문에 이 동작은 혼란스럽고 위험!!

  2. 위 문제를 해결하기 위해 ES6에서는 Array.of()가 도입되었음!

  • Array.of()메서드는 Array 생성자와 유사하게 동작하지만 숫자 값 하나가 전달된 경우에도 특별하게 처리하지 않는다!

  • Array.of()메서드는 인자의 개수나 타입에 상관 없이 항상 인자를 요소로 하는 배열을 만든다.

    // ---------------------------------------------------------------------------------
// Array.of() 메서드를 사용하여 배열을 만들기 위해서는 배열 요소가 될 값을 전달하기만 하면 된다.
// ---------------------------------------------------------------------------------

// 1) 숫자 2개를 가진 배열을 만듬
let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
// ---

// 2) 숫자 1개를 가진 배열을 만듬
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2
// ---

// 3) 문자열 1개를 가진 배열을 만듬
items = new Array('2');
console.log(items.length); // 1
console.log(items[0]); // "2"
    • 이 접근법은 배열 리터럴 을 사용하는 것과 유사하며, 대체로 Array.of() 대신 배열 리터럴을 사용할 수 있다.
      그러나 Array 생성자를 함수에 전달할 필요가 있다면, 일관된 동작을 보장하기 위해 Array.of()를 대신 전달하는 것이 좋음 
      function createArray(arrayCreator, value) {
  return arrayCreater(value);
}
let items = createArray(Array.of, value);

      createArray의 첫번째 인자는 Array.of()를 전달할 수 있다.
      value가 숫자가 아니라는 것을 보장할 수 없다면 Array를 전달하는 것은 위험!

    • 추가, 배열 리터럴 ?
      • 배열 리터럴은 0개 이상의 식(expression) 목록.
        각 식은 배열 요소를 나타내고 대괄호([])로 묶임.
      • 배열 리터럴은 일종의 객체 이니셜라이저(initialiizer). 
        var fish = ['Lion', , 'Angel']; // length: 3. 값이 없는 부분 (,)는 자동으로 undefined로 만듬
var myList = [, 'home', , 'school']; // length: 4

Array.from() 메서드

  1. 배열이 아닌 객체를 배열로 변환하는 것은 자바스크립트에서 항상 처리하기 어려운 부분이었음!
    예를 들어 유사 배열인 arguments 객체를 배열처럼 사용하길 원한다면 먼저 배열로 변환해야 함.
    ES5에서는 다음과 같이 함수를 작성해서 사용해야 했음.

    function makeArray(arrayLike) {
    var result = [];

    for (var i = 0; len = arrayLike.length; i < len; i++) {
        result.push(arrayLike[i]);
    }

    return result;
}

function doSomething() {
    var args = makeArray(arguments);
    // args 변수 사용. (arguments 변환됨.)
}
    • 이 코드는 수동으로 result 배열을 만들고 이 새로운 배열에 arguments의 각 요소를 복사하는 방식.
    • 이 코드는 잘 동작하지만 간단한 연산에 비해 상당한 코드가 필요함.

  2. 위 코드의 문제를 해결할 방안으로 개발자들은 배열의 네이티브 메서드 slice()를 호출하여 유사 배열 객체를 전달하는 방식으로 코드를 줄일 수 있었음.

    function makeArray(arrayLike) {
  return Array.prototype.slice.call(arrayLike);
}

function doSomething() {
  var args = makeArray(arguments);
}
    • 이 코드는 1.의 코드와 기능적으로 같음. 유사 배열 객체를 slice()의 this 값에 설정하기에 잘 동작함.
    • slice()는 적절한 숫자 인덱스와 length 프로퍼티만 있으면 올바르게 동작함. 어떤 유사 배열 객체에서든 잘 동작할 것임.
    • 이 코드를 사용하면 코드량이 감소하지만 Array.prototype.slice.call(arrayLike) 를 호출하는 것이
      "arrayLike를 배열로 변환"하는 것으로 명확히 해석이 되지 않는다.

  3. ES6에서는 명확하고 깔끔한 배열 변환 방법인 Array.from() 메서드를 추가했다. Array.from()메서드에 첫 번째 인자로는 이터러블이나 유사 배열 객체를 전달하면 배열을 반환한다.

    function doSomething() {
  var args = Array.from(arguments);
  // args 변수 사용
}
    • Array.from() 호출은 arguments의 요소에 기반한 새로운 배열을 만든다.

매핑변환

  1. Array.from()의 두 번째 인자로 매핑함수를 제공할 수 있다. ( map() 같은 함수를 뜻 하는듯.)
    매핑 함수는 만들어질 배열의 인덱스에 결과 값을 저장하기 전에,
    유사 배열 객체의 각 값에 특정 연산을 수행하거나 최종 형태로의 변환 작업을 할 수 있다

    function translate() {
  return Array.from(arguments, (value) => value + 1);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2, 3, 4
    • Array.from()에 매핑 함수로 ((value) => value + 1)을 전달하므로,
      배열의 각 요소는 저장되기 전에 1이 더해진다.

  2. 매핑 함수가 객체에서 수행된다면 Array.from()에 매핑 함수의 this 값을 나타내는 세 번째 인자를 선택적으로 전달할 수 있다.

    let helper = {
  diff: 1,
  add(value) {
    return value + this.diff;
  },
};

function translate() {
  return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);
console.log(numbers); // 2, 3, 4
    • 배열 변환 시 매핑 함수로 helper.add()를 전달한다.
      helper.add()는 this.diff 프로퍼티를 사용하기 때문에,
      Array.from()의 세 번째 인자에 this 값을 지정하여 전달할 필요가 있다.
    • 세 번째 인자 덕분에 Array.from()은 bind() 호출이나
      this 값을 지정하는 다른 방법을 사용하지 않고 데이터를 쉽게 변환할 수 있다.

이터러블에서 사용하는 방식

  1. Array.from() 메서드는 유사 배열 객체와 이터러블에서 동작한다.
    이는 메서드가 Symbol.iterator 프로퍼티를 가진 객체라면 모두 배열로 변환할 수 있다는 의미.

    let numbers = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  },
};

let number2 = Array.from(numbers, (value) => value + 1);

console.log(number2); // 2, 3, 4
    • numbers 객체는 이터러블이기에, 객체의 값을 배열로 변환하기 위해 Array.from()에 바로 numbers를 전달할 수 있다.
      매핑함수는 각 숫자에 1을 더하므로 결과 배열은 1, 2, 3 대신 2, 3, 4를 요소로 가진다.

참고 자료

Ranohub

0%