This tutorial is a part of the Learn everything about Javascript in one course.
\n\nGenerator function:
\n* (function*).yield key word.yield keyword can return a value (like return but does not finish the function).// Generator function, function can be paused and continued\n\nfunction* createGenerator() {\n console.log('run to yield 1')\n yield { name: 'Bruce' } // 1st pausable point\n yield // 2nd pausable point\n console.log('run to yield 3')\n yield 3 // 3rd pausable point\n console.log('finish')\n return 'final'\n}\n\n// Generator object\nconst generator = createGenerator() // invoking Generator function will return a Generator object\n\nconsole.log(generator.next()) // function is paused at the 1st `yield`\n// run to yield 1\n// { value: { name: 'Bruce' }, done: false }\n\nconsole.log(generator.next())\n// { value: undefined, done: false }, the 2nd `yield` does not return anything\n\nconsole.log(generator.next()) // { value: 3, done: false }\n\nconsole.log(generator.next())\n// finish\n// { value: 'final', done: true }\n\nconsole.log(generator.next()) // { value: undefined, done: true }| Method | \nReturn | \nExample | \n
|---|---|---|
generator.next() | \nan object with value, done key:- value: yielded by the yield expression. - done: boolean, true if function finishes. | \n{ value: { name: 'Bruce' }, done: false } | \n
generator.return(val) | \nthe val and finish the function | \n{ value: val, done: true } | \n
generator.throw(new Error('your message')) | \nthrow exception within the function and finish the function. This will crash the program. | \nError: your message | \n
// Generator function, function can be paused and continued\n\nfunction* createGenerator() {\n console.log('run to yield 1')\n yield { name: 'Bruce' } // 1st pausable point\n yield // 2nd pausable point\n console.log('run to yield 3')\n yield 3 // 3rd pausable point\n console.log('finish')\n return 'final'\n}\n\n// Generator object\nconst generator = createGenerator() // invoking Generator function will return a Generator object\n\nconsole.log(generator.next()) // function is paused at the 1st `yield`\n// run to yield 1\n// { value: { name: 'Bruce' }, done: false }\n\nconsole.log(generator.return('lala'))\n// { value: 'lala', done: true }, the return method return the passed in value and finish the function\n\nconsole.log(generator.next()) // { value: undefined, done: true }// Generator function, function can be paused and continued\n\nfunction* createGenerator() {\n console.log('run to yield 1')\n yield { name: 'Bruce' } // 1st pausable point\n yield // 2nd pausable point\n console.log('run to yield 3')\n yield 3 // 3rd pausable point\n console.log('finish')\n return 'final'\n}\n\n// Generator object\nconst generator = createGenerator() // invoking Generator function will return a Generator object\n\nconsole.log(generator.next()) // function is paused at the 1st `yield`\n// run to yield 1\n// { value: { name: 'Bruce' }, done: false }\n\nconsole.log(generator.throw(new Error('your message'))) // Error: your messageis function that either:
\nSome examples are: function that accepts callback, memoization function, ... It's nothing new to us but the name \"high-order function\" is worth mentioned here because a lot of documents and blogs refer to this name.
\narguments object within a function:
// The \"arguments\" object in function holds all of its arguments\n\nfunction printAllArguments(a, b, c, d) {\n console.log(arguments) // (i)\n console.log(arguments[0]) // (ii)\n console.log(arguments[1]) // (iii)\n console.log(arguments[2]) // (iv)\n console.log(arguments.length) // (v)\n console.log(a,b,c) // (vi)\n}\n\nprintAllArguments(1,2,3, 'd')\n// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 'd' }, (i)\n// 1, (ii)\n// 2, (ii)\n// 3, (iv)\n// 4, (v)\n// 1 2 3, (vi)..., spead given value into listSpread syntax ... turns array, string, object => list of arguments.
// Handy syntax: spread syntax ..., spead given value into list\n\n// spread array to list of arguments: ...array\nconst arr = [1,2,3, 'd']\nconsole.log(arr) // [ 1, 2, 3, 'd' ]\n\nconsole.log(...arr) // spread syntax\n// 1 2 3 d\n// equals to: console.log(arr[0], arr[1], arr[2], arr[3])\n// hence \"spread\"\n\nconst arr2 = [...arr, 'a', 'b']\nconsole.log(arr2) // [ 1, 2, 3, 'd', 'a', 'b' ]\n\nfunction print(a, b, c, d) {\n console.log(d)\n}\nprint(...arr) // d\n\n\n// spread string, ...string\nconst str = 'abc'\nconsole.log(...str) // a b c\n// equals to: console.log(str[0], str[1], str[2])\n\n\n// spread object, ...object\nconst obj = {\n a: 'b',\n c: 1\n}\nconst obj2 = {\n ...obj, // spread syntax\n d: 2\n}\nconsole.log(obj2) // { a: 'b', c: 1, d: 2 }Values to destructure can be arrays or object properties. Destructuring also called \"treeshaking\". We do variable assignment at the same time.
// Destructuring assignment syntax to unpack values into distinct variables\n\n// unpack and assign from array\nconst arr = [1,2,3,'a']\nconst [,val1,, val3] = arr // destructuring\nconsole.log(val1) // 2\nconsole.log(val3) // a\n\n// unpack and assign from object properties\nconst obj = {\n a: 'b',\n 'x-y': 1,\n c: 'd'\n}\nconst { a, c } = obj // destructuring and assign variable the same names with object key\nconsole.log(a) // b\nconsole.log(c) // d\n\nconst { \n a:val5,\n c: val6,\n 'x-y': xy,\n} = obj // destructuring and assign variable the DIFFERENT names with object key\nconsole.log(val5) // b\nconsole.log(val6) // d\nconsole.log(xy) // 1When an argument is missing, the default value is used. When argument is present, default value is ignored.
\n// Set default argument value for function\n\n// in this function, the default values for a is 1,\n// default b is false\n// default c is 'abc'\nfunction print(a = 1, b = false, c = 'abc') {\n console.log(a)\n console.log(b)\n console.log(c)\n}\n\nprint() // no argument present will use default values\n// 1\n// false\n// abc\n\nprint(2,2,2) // no default value used\n// 2\n// 2\n// 2It's very common that destructuring and default value are used at the same time where we define a function. Here is an example to help you get familiar with this pattern.
\n// Set default argument value for function\n\n// in this function, the argument passed in is an object, we then:\n// 1. destructure it\n// 1. give destructured input default values\nfunction print({ a: val1 = 1, b: val2 = {}, c: val3 = false }) {\n console.log(val1)\n console.log(val2)\n console.log(val3)\n}\n\nprint({}) // no argument present will use default values\n// 1\n// {}\n// false\n\nprint({ a: 3, b: { d: 'f'}, c: true}) // no default value used\n// 3\n// { d: 'f' }\n// trueGenerator function is function which can be paused and continued.High-order function is function that either accepts other function as an argument and/or returns a function.Spread, destructuring assignment and default value syntax are widely used for shorthand.