RegExp Object
// ES6 에서 정규 표현식에 플래그가 추가되었다.
// https://infoscis.github.io/2018/01/24/ecmascript-6-strings-and-regular-expressions/
/*
정규 표현식에 u 플래그가 설정되면, Code unit이 아닌 문자에 대한 작업 모드로 전환됩니다.
즉 정규 표현식이 문자열의 Surrogate pair에 대해 더 이상 혼동하지 않아야 하며 예상대로 작동해야합니다.
예를 들어 다음 코드를 생각해 보겠습니다
정규 표현식 /^.$/은 입력 문자열을 단일 문자와 일치시킵니다. u 플래그없이 사용하면 이 정규 표현식이
Code unit으로 일치를 판단 하기 때문에 한자(두개의 Code unit으로 표현됨)가 정규 표현식과 일치하지 않습니다.
u 플래그와 함께 사용하면 정규식은 Code unit 대신 문자들을 비교하므로 한자 문자가 일치합니다.
*/
var text = "𠮷";
console.log(text.length); // 2
console.log(/^.$/.test(text)); // false
console.log(/^.$/u.test(text)); // true
// sticky 플래그
// 자바스크립트 정규 표현식은 매치된 문자열 마지막 인덱스에 1을 더해 RegExp 오브젝트의 lastIndex 프로퍼티에 설정
// y플래그를 작성하면 매치 대상의 lastIndex위치부터 매치를 수행
// y플래그 작성
let regexpObj = /CD/y; // CD가 매치할 문자
console.log(regexpObj.lastIndex); // 0
console.log(regexpObj.test("ABCDEF")); // false
// CD가있지만 CD의 C가 세번째에 있고 lastIndx값이 0이므로 매치되지 않아 false
regexpObj.lastIndex=2;
console.log(regexpObj.test("ABCDEF")); // true
console.log(regexpObj.lastIndex); // 4 // D의 인데스에 1을 더함
console.log(regexpObj.test("0123CD")); // true
Generator Object
function*는 키워드로 이를 사용한 함수를 제너레이터 함수(Generator Function)라고 한다.
형태)
1) function* 선언문
2) function* 표현식
3) GeneratorFunction
function* 선언문과 function* 표현식은 function 선언문, function 표현식과 형태가 같습니다.
다만, function* 를 사용하는 것이 다릅니다. GeneratorFunction은 new Function()과 같으며 파라미터에 지정한 문자열로 제너레이터 함수를 생성하여 반환
제너레이터 함수를 호출하면 제너레이티 오브젝트를 생성하여 반환한다.
function()을 호출하면 함수 블록을 실행하지만, 제너레이터 함수는 함수블록을 실행하지 않고 제너레이터 오브젝트를 생성하여 반환한다.
생성한 제너레이터 오브젝트에 호출한 함수에서 넘겨 준 파라미터 값이 설정된다.
생성된 제너레이터 오브젝트는 이터레이터 오브젝트이다.
이터레이터 오브젝트의 메서드를 호출했을 때 제너레이터 함수 블록을 실행한다.
제너레이터 함수 블록에 yield 키워드를 작성하면 함수 블록의 코드를 모두 실행하지 않고 yield키워드 단위로 나누어 실행한다.
제너레이터 함수는 new 연산자를 사용할 수 없으며 사용하면 TypeError가 발생한다.
// function* 선언문
function* f1(one, two) {
console.log("함수 블록");
yield one+two;
};
console.log(typeof f1); // function
let genObj = f1(1,3);
console.log(typeof genObj); // object
// 표현식
let f2 = function*(one, two){
yield one+two;
};
let result = f2(10,30);
console.log(result.next()); // {value: 40, done: false}
console.dir(result);
// ----------------
// GeneratorFunction() : 제너레이터 함수 생성
let GenConst = Object.getPrototypeOf(function *() {}).constructor; // 제너레이터 함수를 생성하기 위한 생성자를 구한다.
// 이름없는 제너레이터 함수를 생성하고 getPorototypeOf의 파라미터 값으로 지정
// 그러면 이름없는 제너레이터 함수의 prototype 오브젝트가 반환
let sports = new GenConst(
"one", "two",
"console.log(`함수 블록`); yield one+two"
); // function Music(){} 에서 new Music(0을 실행하면 Music.prototype.constructor 가 호출되어 인스턴스를 생성하는것과 동일
// 파라미터를 하나만 작성하면 함수 블록 코드가 되며 파라미턱 ㅏ없는 형태가 된다.
/*
(function*(one, two){
console.log('함수블록');
yield one+two
}) 와 동일
*/
genObj = sports(3,4);
console.log(genObj.next());
/*
함수 블록
{value: 7, done: false}
*/
// ---------------
// yield : 제너레이터 함수 실행, 멈춤
function* f3(one){
let two = yield one;
let param = yield two + one;
yield param+one;
}
let generatorObj = f3(10);
console.log(generatorObj.next()); // {value: 10, done: false}
console.log(generatorObj.next()); // {value: NaN, done: false}
console.log(generatorObj.next(20)); // {value: 30, done: false}
function* f4(one) {
yield one;
let check = 10;
}
generatorObj = f4(10);
console.log(generatorObj.next()); // {value: 10, done: false}
console.log(generatorObj.next()); // {value: undefined, done: true}
// 더이상 yield가 없으며 함수에 처리할 코드도 없다. 반환할 값이 없으므로 value 프로퍼티 값에 undefined를 설정
// done 프로퍼티 값에 true 를 설정
// next() : yield 단위로 실행
let gen = function*(value) {
return ++value;
}
genObj = gen(1);
console.log(genObj.next()); // { value: 2, done: true }
// 또다른 예제
gen = function*() {
one = yield ;
two = yield 10 + one;
}
genObj = gen();
console.log(genObj.next()); // {value: undefined, done: true}
console.log(genObj.next(30)); // {value: 40, done: true}
console.log(genObj.next(50)); // {value: undefined, done: true}
반응형
'WEB > ECMAScript' 카테고리의 다른 글
Class -> 메서드 선언, 상속 메커니즘 (0) | 2020.02.27 |
---|---|
Generator Object-2 (0) | 2020.02.26 |
Template Literal / Array Object (0) | 2020.02.25 |
Math 오브젝트 / String Object (0) | 2020.02.25 |
Number 오브젝트 (0) | 2020.02.25 |