[코딩] 모던 자바스크립트 입문: 8.11. ECMAScript6 추가된 기능

이  글은 모던 자바스크립트 입문 중 8장 일부 내용을 정리한 글이다.  

ECMAScript 6부터 추가된 함수의 기능에 대한 내용이다

화살표 함수 표현식(익명 함수)의 단축 표현 

var square = function(x) { return x*x; }; 

var square = (x) => {return x*x ; } ; //표현 가능 
var square = (x,y, z) => {...}; 
var square = x => {return x*x;}; 

var f = () => {... }; 
var square = x => x*x; 

var f = (a,b) =>({x:a, y:b}); 
//즉시 실행 함수로 사용할 수도 있음 
(x => x*x)(3); // 9 

 

• 함수 리터럴과 화살표 함수의 차이점 
  • this의 값이 함수를 정의할 때 결정된다 
  • arguments 변수가 없음 
  • 생성자로 사용할 수 없음 
  •  yield 키워드를 사용할 수 없음 

인수에 추가된 기능 

• 나머지 매개변수
  • ...을 입력하면 그만큼의 인수를 배열로 받을 수 있음

// 화살표 함수내에서는 arguments 변수를 사용할 수는 없지만, 가변 인수를 이용할 수 있음 
var sum = (...args) => { 
	for(var i=0,s =0 ; i<args.length ;i++) s+=args[i]; 
    return s; 
}; 
sum(1,2,3,4,5); // 15 

이터레이터와 for/of 문 

• 이터레이션 - 반복 처리 ( 데이터 안의 요소를 연속저긍로 꺼내는 행위를 말함): forEach 
• 이너레이터 - 반복 처리 가능한 객체 : 배열은 symbol.iterator메서드를 가지고 있고, @@iterator표기함(이터레이터 심벌), Symbol.iterator 메서드는 이터레이터를 반환함. 
  • next 메서드를 가짐 
  • next 메서드 반환값 : { value : xx, done:xx } 

//배열의 이터레이터를 반환하는 함수 

function makeIterator(array){
	var index = 0 ; 
    return {
    	next: function(){
        	if(index < array.length ) {
            	return {value : array[index++], done: false }; 
            } else { 
            	return {value : undefined , done: true } ; 
                
           }
       }
   };    
} 

var iter = makeIterator(["A", "B", "C"]); 
console.log(iter.next()); // Object {value : "A", done: false } ; 
console.log(iter.next()); // Object {value : "B", done: false }; 
console.log(iter.next()); // Object {value : "C", done: false } ; 
console.log(iter.next()); // Object {value : undefined, done: true }; 

 

• 반복 가능한 객체와 for/of 문 - for/of 문을 사용하는 경우 반복 처리를 자동으로 하도록 만들 수 있음. 
  •  Symbol.iterator 메서드를 가진 객체로 반복 가능한 객체(이터러블,iterable) - Array, String, TypedArray, Map, Set 사용 가능 

var a = [5,4,3] ; 
var iter = a[Symbol.iterator](); 
while(true){
	var iteratorResult = iter.next(); 
    if(iteratorResult.done == true) break; 
    var v = iteratorResult.value ; 
    console.log(v);
}

//--> for/of 문으로 변경 

var a [ 5,4,3] ; 
for(var v of a) console.log(v); 

제너레이터 

• 제너레이터 
  • 반복 가능한 이터레이터를 값으로 반환함
  • 작업의 일시 정지와 재시작이 가능하며 자신의 상태를 관리함 
• 제너레이터의 정의와 실행 
  • function*문으로 정의한 함수 
  • 하나 이상의 yield 표현식을 표현함 

function* gen(){
	yield 1; 
    yield 2; 
    yield 3; 
}
var iter = gen(); 

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 : undefined, done: true } 

• 제너레이터에 값 넘기기 
• 제너레이터 예외 던지기 
• 반복 가능한 객체에 위임하기 : yield* 

템플릿 리터럴의 태그 함수 

• 태그가 지정된 템플릿 리터럴