[
{
"path": ".github/FUNDING.yml",
"content": "# These are supported funding model platforms\n\ngithub: [atapas]\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2021 Tapas Adhikary\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# js-tips-tricks\nList of JavaScript tips and tricks I am learning everyday!\n\n- See it running here: https://stackblitz.com/edit/js-tips-tricks\n- Read this blog for more insights: https://blog.greenroots.info/my-favorite-javascript-tips-and-tricks-ckd60i4cq011em8s16uobcelc\n\n# Many Thanks to all the `Stargazers` who has supported this project with stars(⭐)\n\n[](https://github.com/atapas/js-tips-tricks/stargazers)\n\n"
},
{
"path": "index.html",
"content": "\r\n\r\n \r\n JavaScript Tips & Trics \r\n \r\n\r\n \r\n All is in the browser console. Open it up. \r\n \r\n JavaScript Tips & Trics \n \n \n\n \n All is in the browser console. Open it up. \n \n"
},
{
"path": "merge-arrays/merge-arrays.js",
"content": "// Using for-loop\nconsole.log('**** 1. Using for-loop ****');\n{\n let merge = (first, second) => {\n for (let i = 0; i < second.length; i++) {\n first.push(second[i]);\n }\n\n return first;\n };\n\n let merged = merge([1, 2, 3], [4, 5, 6]);\n console.log(`merged using for loop is ${JSON.stringify(merged)}`);\n\n merged = merge(merge([1, 2, 3], [4, 5, 6]), [7, 8, 9]);\n console.log(`merged using for loop: ${JSON.stringify(merged)}`);\n}\n\n// Using Spread Operator\nconsole.log('**** 2. Using Spread Operator ****');\n{\n let arr1 = [1, 2, 3];\n let arr2 = [4, 5, 6];\n\n // Merge arrays\n let merged = [...arr1, ...arr2];\n \n console.log(`input array ${JSON.stringify(arr1)}`); // [1,2,3]\n console.log(`input array ${JSON.stringify(arr2)}`); // [4,5,6]\n console.log(`merged using spread operator: ${JSON.stringify(merged)}`); // [1,2,3,4,5,6]\n \n\n // let merged = [...arr1, ...arr2, ...arr3];\n}\n\n// Using the concat() method\nconsole.log('**** 3. Using concat() Method ****');\n{\n let arr1 = [1, 2, 3];\n let arr2 = [4, 5, 6];\n\n // Merge arrays\n let merged = arr1.concat(arr2);\n\n console.log(`input array ${JSON.stringify(arr1)}`); // [1,2,3]\n console.log(`input array ${JSON.stringify(arr2)}`); // [4,5,6]\n console.log(`merged using concat() method: ${JSON.stringify(merged)}`); // [1,2,3,4,5,6]\n \n\n // let merged = [].concat(arr1, arr2);\n}\n\n// Spread vs Concat\nconsole.log('**** 3a. Spread vs Concat ****');\n{\n let arr1 = [1, 2, 3];\n let name = 'Tapas';\n\n console.log(`input array ${JSON.stringify(arr1)}`); // [1,2,3]\n console.log(`input string ${name}`); // [4,5,6]\n\n const mergedUsingSpread = [...arr1, ...name];\n const mergedUsingConcat = arr1.concat(name);\n\n console.log(`mergedUsingSpread: ${JSON.stringify(mergedUsingSpread)}`);\n console.log(`mergedUsingConcat: ${JSON.stringify(mergedUsingConcat)}`);\n}\n\n// Using push() method\nconsole.log('**** 4. Using push() Method ****');\n{\n let arr1 = [1, 2, 3];\n let arr2 = [4, 5, 6];\n\n // Merge arrays\n let merged = arr1.push(...arr2);\n\n console.log(`merged using push() method: input array array1 changed to: ${JSON.stringify(arr1)}`); // [1,2,3]\n console.log(`input array array2 dodn't change: ${JSON.stringify(arr2)}`); // [4,5,6]\n\n arr1 = [1, 2, 3];\n arr2 = [4, 5, 6];\n arr3 = [7, 8, 9];\n\n // Merge arrays\n arr1.push(...[...arr2, ...arr3]);\n}\n\n// Using reduce() method\nconsole.log('**** 5. Using reduce() Method ****');\n{\n let arr1 = [1, 2, 3];\n let arr2 = [4, 5, 6];\n\n let merged = arr2.reduce((arr = [], item) => {\n arr.push(item);\n return arr;\n }, arr1);\n\n console.log(`input array ${JSON.stringify(arr1)}`); // [1,2,3]\n console.log(`input array ${JSON.stringify(arr2)}`); // [4,5,6]\n console.log(`merged using reduce() method: ${JSON.stringify(merged)}`); // [1,2,3,4,5,6]\n}\n"
},
{
"path": "object-destructuring.js",
"content": "\n// 1. Destructure and pick a property\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const { name } = user;\n console.log(name);\n}\n\n// 2. Declaration Gotcha\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n { name } = user // Uncaught SyntaxError: Unexpected token '='\n\n let name;\n { name } = user; // user // Uncaught SyntaxError: Unexpected token '='\n\n ({ name } = user)\n console.log(name); // Alex\n\n}\n\n// 3. Desctructure and pick multiple properties\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const { name, age } = user;\n console.log(name, age);\n}\n\n// 4. Assign new variable and default value\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n const {name, age, salary=123455} = user;\n console.log(name, age, salary)\n}\n\n// 5. Destructure and add aliases\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const { address: permanentAddress } = user;\n console.log(permanentAddress);\n}\n\n// 6. Destructuring nested objects\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43,\n 'department':{\n 'name': 'Sales',\n 'Shift': 'Morning',\n 'address': {\n 'city': 'Bangalore',\n 'street': '7th Residency Rd',\n 'zip': 560001\n }\n }\n }\n\n const { department } = user; // {name: \"Sales\", Shift: \"Morning\", address: {…}}\n\n const { department: { address } } = user; // {city: \"Bangalore\", street: \"7th Residency Rd\", zip: 560001}\n\n const { department: { address: { city } } } = user; // Bangalore\n}\n\n// 7. Dynamic name property\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const getValue = key => {\n const { [key]: returnValue } = user; \n return returnValue;\n }\n\n getValue('name') // Alex's\n getValue('age') // 43\n}\n\n// 8. Destructuring into Function Parameter\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n logDetails(user); // Alex is 43 year(s) old!\n\n function logDetails({name, age}) {\n console.log(`${name} is ${age} year(s) old!`)\n }\n}\n\n// 9. Destructure function return\n{\n const getUser = () => {\n return{ \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n }\n\n const { name, address, age } = getUser();\n\n console.log(name, age, address);\n}\n\n// 10. Destructuring in loops\n{\n const users = [{ \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n },\n { \n 'name': 'Bob',\n 'address': 'Canada',\n 'age': 53\n },\n { \n 'name': 'Carl',\n 'address': 'Bangalore',\n 'age': 26\n }];\n\n for(let { name, age } of users) {\n console.log(name)\n }\n}\n\n// 11. Destructure console.log \n{\n const { log, warn, error } = console;\n}\n\n// 12. Create a clone of an object\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const clone = {...user} // {name: \"Alex\", address: \"15th Park Avenue\", age: 43}\n\n clone === user; // false\n}\n\n// 13. Add properties to an object in Immutable way\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const updatedUser = {...user, salary:12345}; // {name: \"Alex\", address: \"15th Park Avenue\", age: 43, salary: 12345}\n\n console.log(user); // {name: \"Alex\", address: \"15th Park Avenue\", age: 43}\n}\n\n// 14. Update an object in Immutable way\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const updatedUser = {...user, age:56}; // {name: \"Alex\", address: \"15th Park Avenue\", age: 56}\n\n console.log(user); // {name: \"Alex\", address: \"15th Park Avenue\", age: 43}\n}\n\n// 15. Update Nested objects\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43,\n 'department':{\n 'name': 'Sales',\n 'Shift': 'Morning',\n 'address': {\n 'city': 'Bangalore',\n 'street': '7th Residency Rd',\n 'zip': 560001\n }\n }\n }\n\n {...user, department: {'number': 006}} // department replaced\n\n {...user, department: {...user.department, 'number': 006}} // Right way\n}\n\n// 16. Combine two objects - Shallow Merge\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n\n const department = {\n 'name': 'Sales',\n 'Shift': 'Morning'\n }\n\n const completeDetails = {...user, ...department};\n\n console.log({completeDetails});\n}\n\n// 17. Rest operator in Object Destructuring\n{\n const user = { \n 'name': 'Alex',\n 'address': '15th Park Avenue',\n 'age': 43\n }\n \n const {name, ...rest} = user;\n console.log(name, rest);\n\n const {age, ...rest} = user;\n console.log(age, rest);\n}\n\n"
},
{
"path": "quiz-od.js",
"content": "/*\n\nHere is a Quiz for you. Please have a look at the `dark_theme` object below.\nUse the object destructuring, spread syntax and the rest parameter to achieve\nthe following:\n\n1. Extract the value of the `font` property and assign it to a variable.\n2. Extract the value of the `font` property and assign it to a variable with the\nname `myFont`.\n3. Extract the value of the button text color and link opacity.\n4. Create a clone of the dark_theme object and add the `border-color` attribute \nwith a color value.\n5. Consider a `user` object like,\nconst user = {\n 'name': 'Alex',\n 'id': 'U_001'\n}\nMerge the user object to the `dark_theme` object.\n6. Destructure the dark_theme object and put the link colors in a separate object \nusing the rest parameter.\n\nFeel free to fork the project and submit you answers by creating a file named,\n\n`quiz-od-.js`\n\n*/\n\nconst dark_theme = {\n \"id\": \"T_002\",\n \"name\": \"Dark\",\n \"colors\": {\n \"body\": \"#000000\",\n \"text\": \"#FFFFFF\",\n \"button\": {\n \"text\": \"#000000\",\n \"background\": \"#FFFFFF\"\n },\n \"link\": {\n \"text\": \"teal\",\n \"opacity\": 1\n }\n },\n \"font\": \"Roboto\"\n}\n\n"
}
]