diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6b2982b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 JS snippets + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 664295d..dcd01f3 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,59 @@ # JavaScript-snippets -JS snippets logo - -# JSsnippets on Facebook - -find us on [Facebook](https://www.facebook.com/snippetsJS) - - -# How to generate a random number in a given range - +> Click :star: if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) + +### Table of Contents +| No. | Questions | +|---- | --------- +|1 | [Generate a random number in a given range](#How-to-generate-a-random-number-in-a-given-range) | +|2 | [Find the difference between two arrays](#How-to-find-the-difference-between-two-arrays)| +|3 | [Convert truthy/falsy to boolean(true/false)](#Convert-truthy-falsy-to-boolean)| +|4 | [Repeat a string](#Repeat-a-string)| +|5 | [Check how long an operation takes](#Check-how-long-an-operation-takes)| +|6 | [Two ways to remove an item in a specific in an array](#Two-ways-to-remove-an-item-in-a-specific-in-an-array)| +|7 | [Did you know you can flat an array?](#Did-you-know-you-can-flat-an-array)| +|8 | [Get unique values in an array](#Get-unique-values-in-an-array)| +|9 | [Copy Text to Clipboard](#Copy-Text-to-Clipboard)| +|10 | [Nested Destructuring](#Nested-Destructuring)| +|11 | [URLSearchParams](#URLSearchParams)| +|12 | [Count elements in an array](#Count-elements-in-an-array)| +|13 | [Aliases with JavaScript Destructuring](#Aliases-with-JavaScript-Destructuring)| +|14 | [The Object.is() method determines whether two values are the same value](#the-objectis-method-determines-whether-two-values-are-the-same-value)| +|15 | [Freeze an object](#Freeze-an-object)| +|16 | [Printing Object keys and values](#Printing-Object-keys-and-values)| +|17 | [Capture the right click event](#Capture-the-right-click-event)| +|18 | [In HTML5, you can tell the browser when to run your JavaScript code](#in-html5-you-can-tell-the-browser-when-to-run-your-javascript-code)| +|19 | [Nullish coalescing operator](#Nullish-coalescing-operator)| +|20 | [Optional chaining](#Optional-chaining)| +|21 | [globalThis](#globalThis)| +|22 | [The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.](#the-second-argument-of-jsonstringify-lets-you-cherry-pick--keys-to-serialize)| +|23 | [Fire an event listener only once.](#Fire-an-event-listener-only-once)| +|24 | [Vanilla JS toggle](#Vanilla-JS-toggle)| +|25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)| +|26 | [getBoundingClientRect](#getBoundingClientRect)| +|27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| +|28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| +|29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| +|30 | [Private class methods and fields](#Private-class-methods-and-fields)| +|31 | [Preventing paste into an input field](#Preventing-paste-into-an-input-field)| +|32 | [The void operator](#The-void-operator)| +|33 | [replaceAll](#replaceAll)| +|34 | [Required Function Params](#Required-Function-Params)| +|35 | [Get input value as a number](#Get-input-value-as-a-number)| +|36 | [reduceRight](#reduceRight)| +|37 | [Abort Fetch](#Abort-Fetch)| +|38 | [How to change the value of an object which is inside an array](#How-to-change-the-value-of-an-object-which-is-inside-an-array)| +|39 | [Numeric separators allow us to improve our code readability](#Numeric-separators-allow-us-to-improve-our-code-readability)| +|40 | [pay attention when using every](#pay-attention-when-using-every)| +|41 | [How to convert an array of key-value tuples into an object](#How-to-convert-an-array-of-key-value-tuples-into-an-object)| +|42 | [Native text to speech JS](#Native-text-to-speech-JS)| +|43 | [toFixed](#toFixed)| +|44 | [generate randomUUID](#generate-random-uuid)| +|45 | [structuredClone](#structuredClone)| +|46 | [get device orientation](#get-device-orientation)| +|47 | [CONST vs LET vs VAR](#const-let-var)| + +**[⬆ Back to Top](#table-of-contents)** +### How to generate a random number in a given range ```javascript // Returns a random number(float) between min (inclusive) and max (exclusive) @@ -26,8 +72,8 @@ const getRandomNumberInclusive =(min, max)=> { getRandomNumberInclusive(2, 10); ``` -# How to find the difference between two arrays. - +**[⬆ Back to Top](#table-of-contents)** +### How to find the difference between two arrays ```javascript const firstArr = [5, 2, 1]; @@ -66,7 +112,9 @@ difference(firstArr, secondArr); //[3,4] console.log('difference',difference(firstArr, secondArr)) ``` -# How to convert truthy/falsy to boolean(true/false) +**[⬆ Back to Top](#table-of-contents)** +### Convert truthy falsy to boolean + ```javascript const myVar = null; const mySecondVar = 1; @@ -78,8 +126,8 @@ console.log( !!myVar ) // false console.log( Boolean(mySecondVar) ) // true console.log( !!mySecondVar ) // true ``` - -# How to repeat a string +**[⬆ Back to Top](#table-of-contents)** +### Repeat a string ```javascript let aliens = ''; @@ -97,7 +145,8 @@ Array(6).join('👽') //👽👽👽👽👽👽 ``` -# Check how long an operation takes +**[⬆ Back to Top](#table-of-contents)** +### Check how long an operation takes ```javascript //The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds. //performance.now() is relative to page load and more precise in orders of magnitude. @@ -110,7 +159,8 @@ const endTime = performance.now(); console.log("this doSomething took " + (endTime - startTime) + " milliseconds."); ``` -# Two ways to remove an item in a specific in an array +**[⬆ Back to Top](#table-of-contents)** +### Two ways to remove an item in a specific in an array ```javascript //Mutating way @@ -120,11 +170,12 @@ console.log(muatatedArray) //['a','b','d','e'] //Non-mutating way const nonMuatatedArray = ['a','b','c','d','e']; -const newArray = nonMuatatedArray.filter((item'index) => !( index === 2 )); +const newArray = nonMuatatedArray.filter((item, index) => !( index === 2 )); console.log(newArray) //['a','b','d','e'] ``` -# Did you know you can flat an array? +**[⬆ Back to Top](#table-of-contents)** +### Did you know you can flat an array ```javascript const myArray = [2, 3, [4, 5],[7,7, [8, 9, [1, 1]]]]; @@ -140,7 +191,8 @@ myArray.flat(infinity) // [2, 3, 4, 5 ,7,7, 8, 9, 1, 1]; ``` -# Get unique values in an array +**[⬆ Back to Top](#table-of-contents)** +### Get unique values in an array ```javascript const numbers = [1,1,3,2,5,3,4,7,7,7,8]; @@ -162,7 +214,9 @@ const unieqNumbers4 = _.uniq(numbers) console.log(unieqNumbers4) //[1,3,2,5,4,7,8] ``` -# Copy Text to Clipboard + +**[⬆ Back to Top](#table-of-contents)** +### Copy Text to Clipboard ```javascript @@ -180,7 +234,8 @@ function copyToClipboard(){ ``` -# Nested Destructuring +**[⬆ Back to Top](#table-of-contents)** +### Nested Destructuring ```javascript @@ -197,7 +252,8 @@ const { education : { degree } } = user; console.log(degree) //Masters ``` -# URLSearchParams +**[⬆ Back to Top](#table-of-contents)** +### URLSearchParams ```javascript @@ -212,22 +268,8 @@ console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" ``` - -# Shuffle an array - - -```javascript -const list = [1,2,3,4,5,6,7,8,9]; -const shuffle = list.sort(func); - -function func(a,b){ - return 0.5 - Math.random(); -} - -console.log(shuffle); -``` - -# Count elements in an array +**[⬆ Back to Top](#table-of-contents)** +### Count elements in an array ```javascript @@ -252,8 +294,8 @@ const countMyFruits = myFruits.reduce((countFruits,fruit) => { // { Apple:3, Banana:1, Mango:2, Orange:1 } ``` - -# Aliases with JavaScript Destructuring +**[⬆ Back to Top](#table-of-contents)** +### Aliases with JavaScript Destructuring ```javascript @@ -273,8 +315,8 @@ console.log(pageName) // JSsnippets ``` - -# The Object.is() method determines whether two values are the same value +**[⬆ Back to Top](#table-of-contents)** +### The Object.is() method determines whether two values are the same value ```javascript @@ -290,3 +332,676 @@ Object.is(foo, foo); // true Object.is(foo, bar); // false ``` + + +**[⬆ Back to Top](#table-of-contents)** +### Freeze an object + + +```javascript +const obj = { + name: "JSsnippets", + age:29, + address:{ + street : 'JS' + } +}; + +const frozenObject = Object.freeze(obj); + +frozenObject.name = 'weLoveJS'; // Uncaught TypeError + +//Although, we still can change a property’s value if it’s an object: + +frozenObject.address.street = 'React'; // no error, new value is set + + +delete frozenObject.name // Cannot delete property 'name' of # + + +//We can check if an object is frozen by using +Object.isFrozen(obj) //true + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Printing Object keys and values + + +```javascript +const obj = { + name: "JSsnippets", + age:29, +}; + +//Object.entries() method is used to return an array consisting of enumerable property +//[key, value] pairs of the object which are passed as the parameter. + +for(let [key,value] of Object.entries(obj)){ + console.log(`${key}: ${value}`) +} + +//expected output: +// "name: Jssnippets" +// "age: 29" +// order is not guaranteed + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Capture the right click event + +```javascript +window.oncontextmenu = () => { + console.log('right click'); + return false // cancel default menu +} +//or + +window.addEventListener('contextmenu', ()=>{ + console.log('right click'); + return false // cancel default menu +},false) +``` + +**[⬆ Back to Top](#table-of-contents)** +### In HTML5, you can tell the browser when to run your JavaScript code +```javascript + +//Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag. + + +//With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time. +//Async is more useful when you really don't care when the script loads and nothing else that is user dependent depends upon that script loading.(for scripts likes Google analytics) + + +//With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Nullish coalescing operator +```javascript + +// an equality check against nullary values (e.g. null or undefined). Whenever the expression to the left of the ?? operator evaluates to either //undefined or null, the value defined to the right will be returned. + +const foo = undefined ?? 'default string'; +console.log(foo); +// expected output: "default string" + + +const age = 0 ?? 30; +console.log(age); +// expected output: "0" +``` + +**[⬆ Back to Top](#table-of-contents)** +### Optional chaining +```javascript + +const car = {} +const carColor = car.name.color +console.log(carColor); +// error- "Uncaught TypeError: Cannot read property 'carColor' of undefined + +//In JavaScript, you can first check if an object exists, and then try to get one of its properties, like this: +const carColor = car && car.name && car.name.color; +console.log(carColor); +//undefined- no error + + +//Now this new optional chaining operator will let us be even more fancy: + +const newCarColor = car?.name?.color; +console.log(newCarColor) +//undefined- no error + +//You can use this syntax today using @babel/plugin-proposal-optional-chaining +``` + +**[⬆ Back to Top](#table-of-contents)** +### globalThis +```javascript +Accessing the global property in JavaScript has always posed some difficulty. This is because +different platforms have different ways to access it. + +Client-side JavaScript uses window or self + +Node.js uses global + +Web workers use self + +The globalThis property provides a standard way of accessing the global 'this' value across environments. you can access the global object in a consistent manner without having to know which environment the code is being run in. + +console.log(globalThis) //get the global this depends on your environment + +``` + + +**[⬆ Back to Top](#table-of-contents)** +# The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize. +```javascript +const user = { + id: 459, + name: 'JS snippets', + age:29, + education:{ + degree: 'Masters' + } +} + +JSON.stringify(user,[name,age], 2) + +/* +returns + +{ + "name": "JS snippets", + "age": 29 +} + + +*/ + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Fire an event listener only once +```javascript +const el = document.getElementById("btn"); + +function myClickHandler(){ + console.log('this click will only fire once') +} + + +el.addEventListener('click', myClickHandler, { + once: true, +}); + +``` +**[⬆ Back to Top](#table-of-contents)** +### Vanilla JS toggle +```javascript +const span = document.querySelector("span"); +let classes = span.classList; + +span.addEventListener("click", function() { + let result = classes.toggle("active"); + + if (result) { + console.log("active class was added"); + } else { + console.log("active class was removed"); + } +}); + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Check if a string is a valid JSON + +```javascript +function isJson(str) { + try { + JSON.parse(str); + } catch (e) { + //the json is not ok + return false; + } + //the json is ok + return true; +} +``` +**[⬆ Back to Top](#table-of-contents)** +### getBoundingClientRect + +```javascript +//getBoundingClientRect provides you with important pieces of data about an +//HTML element’s size and positioning. + +const bodyBounderies = document.body.getBoundingClientRect(); +// => { +// top: Number, +// left: Number, +// right: Number, +// bottom: Number, +// x: Number, +// y: Number, +// width: Number, +// height: Number, +// } +``` + +**[⬆ Back to Top](#table-of-contents)** +### Check if a node is in the viewport +bonus: add/remove animation depending if an image is in the viewport +https://codepen.io/JSsnippets/pen/PoqrjEY +```javascript +const image = document.querySelector('.animate-me'); + +observer = new IntersectionObserver((entries) => { + const [ myImg ] = entries; + if (myImg.intersectionRatio > 0) { + myImg.target.classList.add('fancy'); + } else { + myImg.target.classList.remove('fancy'); + } +}); + + +observer.observe(image); + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Notify when element size is changed +see our codepen: https://codepen.io/JSsnippets/pen/dyYoYVX +```javascript +const foo = document.getElementById("foo"); + +const observer = new ResizeObserver((entries) => { + for (let entry of entries) { + const cr = entry.contentRect; + console.log = `Size: ${cr.width}px X ${cr.height}px`; + } +}); +observer.observe(foo); + +``` +**[⬆ Back to Top](#table-of-contents)** +### Detect if Browser Tab is in the view +play/pause video accordingly +see our codepen: https://codepen.io/JSsnippets/pen/gOapPzq +```javascript + + +const video = document.getElementById("my-video"); + +const onVisibilitychange =()=>{ + return document.hidden + ? video.pause() + : video.play(); +} + +document.addEventListener("visibilitychange", onVisibilitychange) + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### Private class methods and fields +```javascript + +class Students { + #name; + + constructor(){ + this.#name = "JS snippets"; + } + + #privateMethod() { + return 'Come and learn Js with us'; + } + + getPrivateMessage() { + return this.#privateMethod(); + } +} + +const instance = new Something(); +console.log(instance.name); //=> undefined +console.log(instance.privateMethod); //=> undefined +console.log(instance.getPrivateMessage()); //=> Come and learn Js with us + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### Preventing paste into an input field +see our codepen: https://codepen.io/JSsnippets/pen/qBbyMoJ + +```javascript + +const pasteBox = document.getElementById("paste-no-event"); +pasteBox.onpaste = (e) => { + e.preventDefault(); + return false; +}; + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### The void operator +The void operator evaluates the given expression and then returns undefined. +```javascript + + +void 0; //returns undefined +void (0); //returns undefined +void {}; //returns undefined +void "JSsnippets; //returns undefined +void (0); //returns undefined +void (2 == '2'); //returns undefined +void anyfunction(); //returns undefined + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### replaceAll +the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith. +```javascript + + +const str = 'this is a JSsnippets example'; + +const updatedStr = str.replace('example', 'snippet'); // 'this is a JSsnippets snippet' + + +The tricky part is that replace method replaces only the very first match of the substring we have passed: + + +const str = 'this is a JSsnippets example and examples are great'; + +const updatedStr = str.replace('example', 'snippet'); //'this is a JSsnippets snippet and examples are great' + +In order to go through this, we need to use a global regexp instead: + + +const str = 'this is a JSsnippets example and examples are great'; + +const updatedStr = str.replace(/example/g, 'snippet'); //'this is a JSsnippets snippet and snippets are greatr' + +but now we have new friend in town, replaceAll + +const str = 'this is a JSsnippets example and examples are great'; + +const updatedStr = str.replaceAll('example', 'snippet'); //'this is a JSsnippets snippet and snippets are greatr' + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### Required Function Params +Expanding on the default parameter technique, we can mark a parameter as mandatory + +```javascript +const isRequired = () => { + throw new Error( 'This is a mandatory parameter.' ); +} + + +const getPage = ( pageName = 'Jssnippets', url = isRequired() ) => { + return `${pageName} ${url}`; +} + +console.log(getPage()); + +//In the above code, url will be undefined and that will try to set the default value for it which is the isRequired() function. It will throw an error as, + +//Uncaught error: This is a mandatory parameter. +//at isRequired + +``` + + + + +**[⬆ Back to Top](#table-of-contents)** +### Get input value as a number + +```javascript + + + +function checkMyType(event){ + + console.log(typeof event.target.value) // string + console.log(typeof event.target.valueAsNumber ) // number + +} + + +``` +**[⬆ Back to Top](#table-of-contents)** +### reduceRight + +```javascript + +const arr = ["a", "b", "c", "d", "e"] + +const reduceArray = arr.reduce((acc, current) => { + return acc + current +}, "") +//return abcde + +const reduceRightArray = arr.reduceRight((acc, current) => { + return acc + current +}, "") +//return edcba + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### Abort Fetch + +```javascript + + +//HTML + + + +//JS +let controller; + +document.querySelector('#download').addEventListener('click', () => { + controller = new AbortController(); + const signal = controller.signal; + fetch('https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', {signal}) + .then(() => console.log('done')); +}); + +document.querySelector('#abort').addEventListener('click', function() { + controller.abort(); +}); + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### How to change the value of an object which is inside an array + +```javascript + +const state = [ + { + userId: 1, + name: "JSSnippets", + isOwner: false, + }, + { + userId: 2, + name: "React", + isOwner: false, + }, + { + userId: 3, + name: "Vue", + isOwner: false, + }, + { + userId: 4, + name: "Angular", + isOwner: false, + }, +]; + +const newState = state.map((obj) => + obj.name === "JSSnippets" ? { ...obj, isOwner: true } : obj +); + +``` + +**[⬆ Back to Top](#table-of-contents)** +### Numeric separators allow us to improve our code readability + +```javascript + +100_000_000 === 100000000 // true + +300_000 === 300000 //true + +``` + + + + + +**[⬆ Back to Top](#table-of-contents)** +### pay attention when using every + +Calling this method on an empty array will return true for any condition! + + +```javascript + +const arr = [] +const result = arr.every(x=> x==5) +console.log(result) //true + +``` + + + + + +**[⬆ Back to Top](#table-of-contents)** +### How to convert an array of key-value tuples into an object + + +```javascript + +const JSarr = [ + ['name', 'JSsnippets'], + ['address', 'worldwide'], + ['year', '2018'], + ['followers', '15000'] + +]; + +const obj = Object.fromEntries(JSarr); +//{ +// "name": "JSsnippets", +// "address": "worldwide", +// "year": "2018", +// "followers": "15000" +//} +``` + +**[⬆ Back to Top](#table-of-contents)** +### Native text to speech JS + + +```javascript + +const startSpeaking=()=>{ + + let msg = document.getElementById("text-to-speech").value; + let speech = new SpeechSynthesisUtterance(); + + speech.lang = "en-US"; + speech.text = msg; + speech.volume = 1; + speech.rate = 1; + speech.pitch = 1; + + window.speechSynthesis.speak(speech); +} + + +``` + +**[⬆ Back to Top](#table-of-contents)** +### toFixed + +Warning: Floating point numbers cannot represent all decimals precisely in binary. This can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false . + +```javascript + +123.678.toFixed() // Returns '124' +123.678.toFixed(1) // Returns '123.7': Note rounding + +2.35.toFixed(1) // Returns '2.4'. Note it rounds up +2.65.toFixed(1) // Returns '2.6'. Note it rounds down -why??? see the warning above + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### generate random uuid + +The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator. + +```javascript + +crypto.randomUUID() // print in console '460ff1e6-2106-4848-833d-5c5b3bfdc943' + +crypto.randomUUID() // print in console '9a91c014-d1b1-453a-8091-ef8b9b48b14a' + + +``` + + +**[⬆ Back to Top](#table-of-contents)** +### structuredClone + +If you want to deep clone a value in Node.js, you no longer need to use a library or the JSON.parse(JSON.stringify(value)) hack. You can use the new global function structuredClone() + +```javascript + +const user = { + name: "JS Snippets", + address: { street: "Original Road", city: "Placeshire" }, +}; + +const clonedUser = structuredClone(user); + +clonedUser.address.street = "New Road"; + +console.log("user.address.street:", user.address.street); +// > Original Road + +console.log("clonedUser.address.street:", clonedUser.address.street); +// > New Road + + +``` + +**[⬆ Back to Top](#table-of-contents)** +### get device orientation + +Browsers expose a global variable named screen, which we’ll use to access the information we need. + +```javascript + +function getOrientation() { + const isPortrait = screen.orientation.type.startswith('portrait') + return isPortrait ? 'portrait' : 'landscape' +} + +``` + +**[⬆ Back to Top](#table-of-contents)** +### CONST vs LET vs VAR + +| | const | Let | Var | +|------------------------|-------|-----|-----| +| Can be Reaasigned? | :x: | :white_check_mark: |:white_check_mark: | +| Cab be Redeclared? | :x: | :x: | :white_check_mark: | +| Block Scope | :white_check_mark: |:white_check_mark: | :x: | +| Function Scope | :white_check_mark: | :white_check_mark: | :white_check_mark: | +| Stored in Global Scope | :x: | :x: | :white_check_mark: |