면접-JavaScript #06 | 이터러블(Spread/Destructuring)

📚 개념 요약

모던 JS Deep dive #34 | 이터러블

💡 질문

❓ 이터러블

이터러블은 ES6에서 도입된 이터러블 프로토콜을 준수한 객체를 말합니다.

나온 배경과 함께 설명을 드리면 ES6 이전에, 배열, 문자열 , DOM 컬렉션 이런 순회할 수 있는 자료구조들이 통일된 규약 없이 각자만의 구조를 가지고 여러 방법으로 순회되고 있었고, ES6부터 이터레이션 프로토콜을 도입해 for …of문, 스프레드 문법, 디스트럭처링 할당의 기능을 사용할 수 있도록 일원하하게 되었습니다.

이 이터레이션 프로토콜에는 크게 이터러블과 이터레이터가 있는데 이터러블은 이터레이터를 반환하는 기능을 가진 Symbol.iterator 메서드를 가진 객체이며, 이터레이터는 이터레이터 객체를 return하는 next() 메서드를 가진 객체입니다.

❓ Spread

ES6에서 이터레이션 프로토콜이 도입되면서 함께 추가된 기능으로 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 JS의 기능을 말합니다.

원래 스프레드 문법의 대상은 이터러블이어야 하지만 같은 일반 객체를 대상으로 사용이 가능합니다.

❓ Destructuring

배열같은 이터러블이나 객체를 말 그대로 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.

이 기능을 통해 객체변수.프로퍼티 없이 좀 더 간결하고 가독성 좋은 코드를 작성할 수 있습니다.