Javascript - Iteration Protocol

안녕하세요? 오늘은 Iteration Protocol의 기본적인 개념과 사용 방법에 대해서 알아보도록 하겠습니다.

Iteration Protocol은 JavaScript에서만 사용되는 것이 아니라, 여러가지 프로그래밍 언어에서 반복 동작을 수행하기 위해 사용되는 방법입니다.

 

목차는 다음과 같이 구성해보았습니다.

1. Iteration Protocol이란? Iterator Protocol과 Iterable Protocol이란?

2. Iteration Protocol을 사용하는 문법

3. 마무리

 

1. Iteration Protocol 이란

JavaScript에서 Iteration Protocol은 ECMA Script 6(ES2015)에서 추가된 프로토콜입니다.

 

또한 Iteration Protocol의 하위 규칙으로 Iterable Protocol과 Iterator Protocol이 있습니다.

위 두 가지는 예제 이후에 알아보겠습니다.

 

Iteration Protocol이 추가되기 전에 자바스크립트는 배열을 어떻게 순회 했는지 알아봅시다.

var str = "123";
var arr = [1, 2, 3];

for (var i = 0; 3 > i; i++) {
	console.log(str[i], arr[i]);
}

// 1 1
// 2 2
// 3 3

이런식으로 for문을 사용해 index로 접근하는 방법을 사용했습니다.

 

다음은 Iteration Protocol이 추가된 후 for...of 문을 사용한 배열을 순회하는 방법입니다.

(for...of문 또한 ECMAScript6에서 추가된 문법입니다.)

const str = "123";
const arr = [1, 2, 3];

for (const item of str) {
	console.log(item);
}

// 1
// 2
// 3

for (const item of arr) {
	console.log(item);
}

// 1
// 2
// 3

어떻게 이렇게 작동하는 것일까요??

 

그것은 바로 str, arr 라는 객체가 Iterable Protocol 규칙을 준수하기 때문입니다.

규칙은 다음과 같습니다.

 

Symbol.iterator 라는 키로 접근할 수 있는 어떠한 메서드를 가지고 있다.

그리고 그 메서드는 iterator 객체를 반환한다.

 

그리고 Iterable Protocol을 준수하는 타입은 다음과 같습니다.

• String
• Array
• TypeArray
• Map
• Set

const arr = [1, 2, 3];

console.log(arr[Symbol.iterator]);
// ƒ values() { [native code] }

const iterator = arr[Symbol.iterator]();

여기서 특이한 점은 해당 메서드를 null 처리하면 에러가 뜨면서 for...of문 사용이 불가능해집니다.

 

...

arr[Symbol.iterator] = null;

for (const item of arr) {
	console.log(item);
}

// TypeError: a is not iterable

 

그리고 Iterator 객체는 다음과 같이 사용할 수 있습니다.

...

const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

 

쉽게 정리하자면 다음과 같습니다.

iterable

• iterator 객체를 리턴하는 [Symbol.iterator] 메서드를 가진 값. (String, Array, ...)

iterator

• { value, done } 형태의 객체를 리턴하는 next 메서드를 가진 값

 

2. Iteration Protocol을 활용하는 문법

이러한 Iteration Protocol을 사용하면 특이한 문법들을 사용 가능합니다.

여기서는 두 가지만 다뤄보겠습니다.

 

(1) for...of

위 예재들에서 언급한 for...of문을  사용할 수 있습니다.

const arr = [1, 2, 3];

for (const item of arr) {
	console.log(item);
}

// 1
// 2
// 3

 

(2) Destructuring assignment (구조 분해 할당)

문자열이나 배열, 객체등을 해체하여 그 값을 개별 변숭에 담을 수 있게 하는 JavaScript 표현식입니다.

코드를 간소화 해주는 장점이 있으며, 다양하게 사용 가능합니다.

// 배열
const arr = [1, 2, 3];
let a, b, c;

[a, b, c] = arr;
// a - 1, b - 2, c - 3


const [first, second, third] = arr;
// first - 1, second - 1, third - 1

// 문자열
const str = "123";

const [firstStr, ...restStr] = str;
// firstStr - 1, restStr - ['2', '3']

3. 마무리

오늘 정리해본 내용은 Iteration Protocol의 아주 기초적인 내용입니다.

오늘 정리한 내용 외에도 Generator 함수를 사용하는 방법 등 다양한 내용들이 있습니다.

 

또 Iteration Protocol은 함수형 프로그래밍에서 아주 유용하게 사용할 수 있습니다.

 

다음 글에서는 Generator 함수의 사용법과 Iteration Protocol 을 사용해 어떻게 함수형 프로그래밍을 할 수 있는지 살펴보도록 하겠습니다.

감사합니다.