[JS] ES6의 특징 (2) - 템플릿 리터럴, 반복자, for ... of

• const and let
• Arrow functions(화살표 함수)
• Template Literals(템플릿 리터럴)
• Default parameters(기본 매개 변수)
• Array and object destructing(배열 및 객체 비구조화)
• Import and export(가져오기 및 내보내기)
• Promises(프로미스)
• Rest parameter and Spread Operator(나머지 매개 변수 및 확산 연산자)
• Classes(클래스)
• Generator(생성자)
• Iterator(반복자)

템플릿 리터럴(Template literals)

복잡한 문자열을 쉽게 만들어주는 장치로 문자열 안에 문자열 및 변수를 넣을 수 있다.

 

기존 문자열 출력 시 변수와 함께 출력하려면 아래와 코드와 같이 따옴표(', ")와 더하기 연산자(+)나 쉼표(,)를 써줘야 했다.

또한 띄어쓰기도 따로 신경써줘야 하는 번거로움이 있었다.

 

const a = "apple";
const b = "banana";

// I Like apple and banana
console.log("I Like " + a + " and " + b);

 

하지만 ES6부터 아래와 같은 코드를 사용할 수 있게 되었다.

 

const a = "apple";
const b = "banana";

// I Like apple and banana
console.log(`I Like ${a} and ${b}`);

 

이런 방식으로 코드를 작성하는 것을 템플릿 리터럴이라고 한다.

 

템플릿 리터럴은 따옴표나 큰 따옴표가 아닌 백틱(`) 기호를 사용해 작성한다. (보통 백틱 기호는 키보드의 ~ 기호와 함께 있다.)

템플릿 리터럴을 사용하기 위해서는 백틱으로 문장을 감싸고 변수가 들어갈 부분에 ${변수명}과 같은 형태로 써주면 된다.

 

또한 기존에는 여러 줄을 표현하기 위해서는 \n을 붙여 줄이 구분된다는 것을 표현했지만 템플릿 리터럴을 사용하면 여러 줄을 표현하기 쉽다.

 

const str = "hello\nworld"; // 기존
const str2 = `hello			// Template String
world`;

console.log(str);
console.log(str2);

 

 

+ 태그드 템플릿 리터럴(Tagged Template literals)

태그드 템플릿 리터럴을 이용하면 템플릿 리터럴의 표현식을 분해할 수 있다.

 

`ABC${value1}EFG${value2}HIJ${value3}`

 

위와 같은 리터럴이 있다면 'ABC', 'EFG', 'HIJ', ''와 value1, value2, value3으로 분해한다.

 

function taggedTemplateLiterals(str, ...rest) {
  console.log(str);
  console.log(rest);

  return 0;
}

let value1 = 10;
let value2 = "ten";
let value3 = false;

const result = taggedTemplateLiterals`ABC${value1}EFG${value2}HIJ${value3}`;

console.log(result);

 

실행 결과

여기서 주의할 점은 str의 length는 rest의 length보다 항상 1이 크다는 것이다. 이는 str의 마지막에 값이 없더라도 빈 문자열이 들어가기 때문이다.

(맨 끝에 문자열이 있는 경우에는 빈 문자열을 포함하지 않는다.)

 

아래와 같이 사용할 수 있다.

 

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로
  // ${age} 뒤에는 ''인 string이 존재하여
  // 기술적으로 strings 배열의 크기는 3이 됩니다.
  // 하지만 빈 string이므로 무시하겠습니다.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다.
  return str0 + personExp + str1 + ageStr;

}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

 

반복자(Iterator)

반복자(Iterator)는 반복을 위해 설계된 특정 인터페이스가 있는 객체이다.  (어떤 자료구조를 순회하는데 쓰이는 pointer라고 생각하면 된다.)

이터레이션 프로토콜을 준수한 객체는 for ... of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다.

 

두개의 속성 {value, done}을 반환하고, next 메서드를 가진다. Array.prototype.values()를 사용하면 배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환하여 이터레이터를 만들 수 있다.

 

const array = [1, 2, 3];

// Symbol.iterator 메소드는 이터레이터를 반환한다.
const iterator = array[Symbol.iterator]();
console.log(iterator);

// 이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.
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}

 

console.log(iterator) 결과

 

이터레이터를 사용하면 next() 메서드를 반복적으로 호출해 명시적으로 반복시킬 수 있다.

value 프로퍼티는 다음 시퀀스의 값을 반환하고, done은 시퀀스의 마지막 값이 산출되었는지의 여부를 boolean으로 반환한다.

 

이터러블(iterable)한 객체(string, array, map, set)의 프로토타입 객체에는 모두 Symbol.iterator 메서드가 있다. (Object는 이터러블한 객체가 아니다. 따라서 for of와 같은 문법을 쓸 수 없다.)

 

for (변수 선언문 of 이터러블) {...}

 

for ... of 문은 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for ... of 문의 변수에 할당한다.

그리고 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 순회를 중단한다.

 

 

이터러블은 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당과 같은 데이터 소비자에 의해 사용되므로 데이터 공급자와 연결해주는 인터페이스라고 생각할 수 있다.

 

만약 데이터 공급자가 각자의 순회 방식을 갖는다면 데이터 소비자는 다양한 데이터 공급자의 순회 방식을 모두 지원해야 하므로 효율적이지 않다. 하지만 다양한 데이터 공급자가 이터레이션 프로토콜을 준수하도록 규정하면 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 된다.

 

이처럼 이터레이션 프로토콜은 다양한 데이터 공급자가 하나의 순회 방식을 갖도록 규정해 데이터 소비자가 효율적으로 다양한 데이터 공급자를 이용할 수 있도록 데이터 소비자와 공급자를 연결하는 인터페이스 역할을 한다.

 

출처: poiemaweb.com

 

 

 

참조

템플릿 리터럴

https://angelplayer.tistory.com/112

https://bloodstrawberry.tistory.com/443

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

 

반복자, for ... of

https://velog.io/@ggong/ES6-%EC%9D%B4%ED%84%B0%EB%A0%88%EC%9D%B4%ED%84%B0%EC%99%80-%EC%A0%9C%EB%84%88%EB%A0%88%EC%9D%B4%ED%84%B0

모던 자바스크립트 Deep Dive

https://poiemaweb.com/es6-iteration-for-of