20210714 JavaSciprt DeepDive 12 : Symbol, 이터러블(Iterable), 스프레드 문법, 디스트럭처링 할당(구조 분해 할당)

8 분 소요

JavaScript Deep Dive 12

📄 용어 및 중요사항 정리

Symbol

심벌

변경 불가능한 원시 타입의 값
다른 값과 중복되지 않는 유일무이한 값
이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용함

심벌 값의 생성

Symbol 함수 :
- Symbol 함수를 호출하여 심벌을 생성함 (다른 원시값의 경우 리터럴 표기법을 통해 값 생성)
- new 연산자와 함께 호출하지 않음 (인스턴스가 아니라 원시값을 생성하는 것임)
- 생성된 심벌 값은 외부로 노출되지 않아 확인 불가함
- Symbol(description) : Symbol 함수의 인수로는 생성된 심벌값에 대한 설명인 문자열을 전달 가능함
  - 설명 문자열이 같더라도 언제나 Symbol은 변경 불가한 유일무이한 값을 줌으로서 다름
- 생성된 심벌 값에 객체처럼 접근하면 다른 원시 값과 같이 래퍼 객체를 생성함
- 심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않음
  - 불리언 타입으로는 암묵적 타입 변환이 이루어짐 -> 심벌 값의 존재 확인 가능

Symbol.for(stringKey) : 인수로 전달 받은 문자열을 키로 사용하여 키와 심벌 값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 이미 저장된 심벌 값을 검색하거나, 값을 생성함
- 전달된 인수(stringKey)가 존재하는 경우, -> 해당 인수에 맞는 심벌 값을 반환
- 전달된 인수(stringKey)가 존재하지 않는 경우, -> 해당 인수에 맞는 심벌 값을 생성하여 저장하고 반환
- 모든 곳에서 중복되지 않는 상수 역할의 심벌 값을 관리하여 공유 할 수 있음

Symbol.keyFor(symbolValue) : Symbol for로 생성된 심벌값을 인수로 전달하면, 전역 심벌 레지스트리에서 해당 심벌값의 생성할 당시의 key를 찾아 반환해줌

변경/중복될 가능성이 있는 상수 대신 중복 가능성 없는 심벌을 사용할 수 있음

enum : 명명된 숫자 상수의 집합으로 열거형(enumerated type)이라고 함
- JS는 enum을 지원하지 않음, TS는 enum을 지원함

심벌인 프로퍼티 키 :
- 객체의 프로퍼티 키를 심벌로 지정가능하고, 동적으로 생성 가능함
- .을 통한 프로퍼티 값 접근은 불가함
- [] 대괄호를 사용하여 안에 심벌 값을 넣어 프로퍼티 값에 접근 가능함
- 기존의 프로퍼티 키, 미래에 사용할 프로퍼티 키와 절대로 충돌이 없음

const obj = {
  [Symbol.for("mySymbol")]: 1,
};

obj[Symbol.for("mySymbol")]; // 1

심벌인 프로퍼티 은닉
- 심벌 값을 프로퍼티 키로 사용한 프로퍼티는 for…in, Object.keys, Object.getOwnPropertyNames 와 같은 일반적인 메서드로는 찾을 수 없음 -> 외부로 부터 은닉이 됨
- Object.getOwnPropertySymbols 메서드 사용시 해당 심벌 프로퍼티 키를 찾을 수 있음(찾아서 배열로 반환 함)
- 해당 프로퍼티 키를 찾아 가져와서, 객체에 대괄호[ ]로 접근하여 값을 가져올 수 있음

심벌과 표준 빌트인 객체 확장
- 표준 빌트인 객체에 사용자 정의 메서드를 직접 추가하면, 나중에 도입되는 메서드와 충돌이 날수 있음
- 심벌을 통해서 메서드 이름으로 사용하여 추가하면 충돌을 해결 할 수 있음

Array.prototype[Symbol.for("sum")] = function () {
  return this.reduce((acc, cur) => acc + cur, 0);
}[(1, 2, 3, 4)][Symbol.for("sum")](); // 10

Well-known Symbol : JS가 기본 제공하는 빌트인 심벌 값
- 순회 가능한 빌트인 이터러블은 Symbol.iterator를 키로 갖는 메서드를 가짐
- Symbol.iterator 메서드 호출시 이터레이터를 반환함

이터러블 (Iterable)

이터레이션 프로토콜

이터레이션 프로토콜 : 순회 가능한 데이터 컬렉션(자료구조)를 만들기 위해 약속한 규칙(이터러블 프로토콜 + 이터레이터 프로토콜)
- 순회 가능한 데이터 컬렉션 : 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등..
  - ES6 이전 for문, for…in문, forEach등으로 다양한 방법으로 순회 방식
- 이터레이션 프로토콜을 준수하는 이터러블 통일
  - for … of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용 가능
- 데이터 소비자(사용방식)와 데이터 공급자(자료형)를 연결하는 인터페이스 역할 - 순회하는 다양한 자료형에 따라 사용 메서드가 많아지면, 사용에 혼선이 있고 비효율적임 - -> 순회하는 다양한 자료형에 규칙을 두어 규칙을 만족하면, 정해진 사용방식을 통해 다양한 자료형을 사용할 수 있게함
이터러블 프로토콜 :
- Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현시, 프로토타입체인을 통해 상속 받은 Symbol.iterator 메서드 호출시 이터레이터 프로토콜을 준수한 이터레이터를 반환하는 이터러블을 사용해야하는 규약

이터레이터 프로토콜 :
- 이터러블의 Symbol.iterator 메서드 호출시 (next 메서드를 소유하고, next 메서드 호출시 이터러블을 순회하며 이터레이터 result 객체를 반환하는) 이터레이터를 사용해야 하는 규약

이터러블 : Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입체인을 통해 상속 받아 Symbol.ierator 참조, 호출시 이터레이터를 반환하는 객체
- 배열, 문자열, Map, Set 등은 이터러블
- for...of 문으로 순회 가능, 스프레드 문법, 배열 디스트럭처링 할당(배열 구조분해 할당)의 대상으로 사용 가능
  - 스프레드 문법은 일반 객체도 사용 가능

이터레이터 : next 메서드를 소유하여 next 메서드 호출시 이터러블을 순회하며 매 순회 마다 이터레이터 result 객체를 반환하는 함수객체
- 이터러블의 요소를 탐색하기 위한 포인터 역할

이터레이터 result 객체 :
- {value: any, done: boolean}
- value 프로퍼티 : 현재 순회 중인 이터러블의 값
- done 프로퍼티 : 이터러블 전체 순회 완료 여부

빌트인 이터러블

이터레이션 프로토콜을 준수한 객체인 JS 자체(빌트인) 이터러블

빌트인 이터러블인 표준 빌트인 객체

빌트인 이터러블	Symbol.iterator 메서드
Array	Array.prototype[Symbol.iterator]
String	String.prototype[Symbol.iterator]
Map	Map.prototype[Symbol.iterator]
Set	Set.prototype[Symbol.iterator]
TypeArray	TypeArray.prototype[Symbol.iterator]
arguments	arguments[Symbol.iterator]
DOM 컬렉션	NodeList.prototype[Symbol.iterator] HTMLCollection.prototype[Symbol.iterator]

for … 문

for (변수선언문 of 이터러블) {}
- 이터러블 순회하면서 이터러블의 요소를 변수에 할당
  - 내부적으로 이터레이터의 next 메서드 호출시 반환되는 result 객체의 value 프로퍼티 값을 변수에 할당하여 순회함
  - result 객체의 done 프로퍼티 값이 true가 되면 이터러블의 순회 중단함

for (변수선언문 in 객체) {}
- 객체의 프로토타입 체인상에 존재하는 모든 프로토타입 프로퍼티 중에서 [[Enumerable]] 값이 true인 프로퍼티를 순회하며 열거
- 프로퍼티 키 symbol인 경우는 열거 제외

이터러블 vs 유사 배열 객체

유사 배열 객체
- 인덱스로 프로퍼티 값에 접근, length 프로퍼티를 갖는 객체
- for문 순회 O / for …of 순회 X
- Symbol.iterator 없음
- 이터러블X, 일반 객체O
- Array.from 메서드로 배열로 반환하여 이터러블로 만들수 있음
이터러블인 유사 배열 객체
- arguments, NodeList, HTMLCollection

사용자 정의 이터러블

사용자 정의 이터러블 : 이터레이션 프로토콜을 준수하도록 설정한 일반 객체
- Symbol.iterator 메서드 구현
  - 반환되는 이터레이터 구현
    - 반환되는 result 객체 구현

// 사용자 정의 이터러블
// 피보나치 수열의 10 이하의 값만 나타내는 이터러블
const fibonacci = {
  // Symbol.iterator 메서드 구현
  [Symbol.iterator]() {
    let [pre, cur] = [0, 1];
    const max = 10;

    // 이터레이터 반환
    return {
      // next 메서드 구현
      next() {
        [pre, cur] = [cur, pre + cur];
        // result 객체
        return { value: cur, done: cur >= max };
      },
    };
  },
};

// for ... of
for (const num of fibonacci) {
  console.log(num); // 1, 2, 3, 5, 8
}
// 스프레드 문법
const arr = [...fibonacci];
console.log(arr); // 1, 2, 3, 5, 8

// 배열 디스턱처링 할당
const [first, second, ...rest] = fibonacci;
console.log(first, second, rest); // 1 2 [3, 5, 8]

이터러블을 생성하는 함수
- 필요한 인수를 받아 변하는 이터러블을 생성하는 함수 구현

// 이터러블 반환 함수
const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];
  // 이터러블 반환
  return {
    // Symbol.iterator 메서드 구현
    [Symbol.iterator]() {
      // 이터레이터 구현
      return {
        // next 메서드 구현
        next() {
          [pre, cur] = [cur, pre + cur];
          // result 객체 반환
          return { value: cur, done: cur >= max };
        },
      };
    },
  };
};

// for ... of
for (const num of fibonacciFunc(10)) {
  console.log(num); // 1 2 3 5 8
}

이터러블이면서 이터레이터인 객체를 생성하는 함수
- next 메서드를 활용하고자 하면 이터레이터를 받아와야 함, Symbol.iterator 메서드를 호출해서 이터레이터를 받아와야함
- 그럴 필요 없이 이터러블에서 바로 next 메서드를 만들어 사용할수 있게 함

const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];

  // 이터러블
  return {
    [Symbol.iterator]() {
      return this; // this는 이터러블
    },
    next() {
      [pre, cur] = [cur, pre + cur];
      return { value: cur, done: cur >= max };
    },
  };
};
let iter = fibonacciFunc(10);
for (const num of iter) {
  console.log(num); // 1 2 3 5 8
}
iter = fibonacciFunc(10);
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 5, done: false}
console.log(iter.next()); // {value: 8, done: true}

무한 이터러블
- result 객체의 done 프로퍼티를 명시하지 않은 경우
- 무한으로 값을 생성하여 가져올 수 있음(필요한 만큼만 for…of, 배열 디스트럭처링 할당에서 결정하여 가져옴)

지연 평가 : 데이터가 필요한 시점 이전까지는 미리 데이터를 생성하지 않고 필요한 시점이 되면 그때 데이터를 생성하는 기법
- 평가 결과가 필요할때(for…of, 배열 디스트럭처링 할당) 까지 평가를 늦춤
- for…of문의 경우 이터레이터 next 메서드 호출할 때 데이터가 생성됨

스프레드 문법 (spread syntax, 전개 문법)

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듦
사용 가능 대상
- 이터러블에 한정
- Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments
스프레드 문법의 결과는 값이 아니라 값의 목록 임
스프레드 문법의 결과는 변수에 바로 할당 할수 없음
값 목록을 사용하는 문맥
- 함수 호출문의 인수 목록
- 배열 리터럴의 요소 목록
- 객체 리터럴의 프로퍼티 목록

함수 호출문의 인수 목록에서 사용

함수 호출문에서 인수를 전달할 때 사용하는 인수 목록으로 활용 가능함
- 스프레드 문법 전에는 apply를 통해서 인수 배열을 제공하여 인수를 전달 했음
rest 파라미터와 반대의 개념
- rest 파라미터 : 인수 목록 -> 배열
- spread 문법 : 배열 -> 인수 목록

const arr = [1, 2, 3, 4, 5];

const applyMax = Math.max.apply(null, arr); // 5
const spreadMax = Math.max(...arr); // 5

배열 리터럴 내부에서 사용

2개의 배열을 하나로 합치고 싶은 경우
- 과거 : Array.prototype.concat(arr)
- spread 문법 방식 : [...Array1, ...Array2]
Array1을 Array2에 특정한 위치에 넣고 싶은 경우
- 과거 : splice + apply + concat
- spread 방식 : splice에 3번 째 인자 부터 풀어서 넣음
배열 복사를 하고 싶은 경우
- 과거 : slice함수 호출
- spread 방식 : [] 빈 배열에 넣어 풀어사용
이터러블, 유사배열 객체를 배열로 변환하고 싶은 경우
- 과거 : slice + call or Array.from
- spread 방식 : [] 빈 배열에 넣어 풀어사용
  - 단, 이터러블이 아닌 유사배열 객체는 불가
  - from은 이터러블이 아닌 유사배열 객체도 가능

객체 리터럴 내부에서 사용

스프레드 프로퍼티를 사용하면 객체 리터럴의 목록에서도 스프레드 문법 사용 가능
- 일반 객체 대상으로도 스프레드 문법 사용 허용
- 복사 또는 병합으로 많이 사용
- 과거: Object.assign 메서드를 통해서 병합, 변경하였음
- spread 방식 : 빈 객체{}에 풀어서 넣어주면 됨

디스트럭처링 할당 (구조 분해 할당)

배열과 같은 이터러블 또는 객체를 구조 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말함

배열 디스트럭처링 할당

할당의 대상(우변) : 이터러블 (이터러블이 아니면, TypeError 발생)
할당 기준 : 배열의 인덱스 (순서대로 할당됨)
- 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없음
- 변수의 개수 > 이터러블의 요소 개수 -> 할당 받지는 못한 변수는 undefined 임
할당 받을 변수(좌변) : 배열 리터럴 형태로 선언
- let을 사용하면 변수 선언과 할당을 분리할 수 있음 (비추천)
- 할당 받을 변수에 기본값 설정 가능 (기본값 보다 할당값이 우선됨)
- 할당 받을 변수에 Rest 요소(…Rest)를 사용 가능
  - 남은 값의 배열을 이루는 변수가 됨
  - 항상 마지막에 위치해야 함

객체 디스트럭처링 할당

할당의 대상(우변) : 객체 (또는 객체로 평가 될수 있는 표현식인 문자열, 숫자, 배열 등…)
할당 기준 : 프로퍼티 키
- 순서 상관없이, 선언된 변수 이름과 프로퍼티 키가 일치하면 할당 됨
할당 받을 변수(좌변) : 객체 리터럴 형태로 선언
- 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받기 가능
  - 좌변의 프로퍼티 키에 프로퍼티 값으로 사용하고 싶은 이름을 넣으면 됨
- 할당 받을 변수에 기본값 설정 가능
- 함수의 매개변수에도 사용 가능
- 할당 받을 변수에 Rest 요소(…Rest)를 사용 가능
  - 남은 프로퍼티를 가진 객체를 이루는 변수가 됨

배열과 객체 디스트럭처링을 같이 사용 가능
- 배열안에 객체가 item으로 작용하는 경우
중첩 객체 디스트럭처링 가능

Twitter Facebook LinkedIn

Taeyoung Kim(RaccoonCode96)

20210714 JavaSciprt DeepDive 12 : Symbol, 이터러블(Iterable), 스프레드 문법, 디스트럭처링 할당(구조 분해 할당)

JavaScript Deep Dive 12

📄 용어 및 중요사항 정리

Symbol

심벌

심벌 값의 생성

이터러블 (Iterable)

이터레이션 프로토콜

빌트인 이터러블

for … 문

이터러블 vs 유사 배열 객체

사용자 정의 이터러블

스프레드 문법 (spread syntax, 전개 문법)

함수 호출문의 인수 목록에서 사용

배열 리터럴 내부에서 사용

객체 리터럴 내부에서 사용

디스트럭처링 할당 (구조 분해 할당)

배열 디스트럭처링 할당

객체 디스트럭처링 할당

공유하기

참고

[Design Pattern] MVC 패턴

[Node.js] 백준 - 기본 수학 문제 1 : 달팽이는 올라가고 싶다, ACM호텔, 부녀회장이 될테야

[Node.js] 백준 - 기본 수학 문제 1 : 손익분기점, 벌집O(1), 분수찾기O(1)

[Node.js] 백준 - 함수&문자열 문제 : 셀프 넘버, 한수, 아스키 코드, 숫자의 합, 알파벳 찾기, 문자열 반복, 단어 공부, 단어의 개수, 상수, 다이얼, 크로아티아 알파벳, 그룹 단어 체커