diff --git a/content/javascript/concepts/methods/methods.md b/content/javascript/concepts/methods/methods.md deleted file mode 100644 index 5cc3077c7be..00000000000 --- a/content/javascript/concepts/methods/methods.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -Title: 'Methods' -Description: 'Methods are object properties that contain functions.' -Subjects: - - 'Web Development' - - 'Computer Science' -Tags: - - 'Methods' - - 'Objects' - - 'OOP' - - 'Functions' -CatalogContent: - - 'introduction-to-javascript' - - 'paths/create-a-back-end-app-with-javascript' ---- - -In JavaScript, methods are object properties containing a function definition. Within the function definition, `this` can be used to refer to the containing object as long as the function is defined within the object. - -**Note:** If a function is assigned to a property later, any reference to `this` will reflect the context of the new function. Also, if the object's function is assigned to a variable and executed via the variable, `this` will reflect the variable's execution context. - -## Syntax - -A method of an object is called via the following syntax: - -```js -objectName.methodName(); -``` - -If a method is called without parenthesis, it is being called as a property, which means it will return the function definition, not execute the method. - -## Example - -The following code snippet demonstrates how object methods work and how the context of `this` can affect the behavior of those methods when called in different ways: - -```javascript -const car = { - make: 'Honda', - model: 'Civic', - year: 2019, - printOut: function () { - console.log(this.year + ' ' + this.make + ' ' + this.model); - }, -}; - -car.printOut(); - -// Referenced as a property -var method = car.printOut; - -car.year = 2020; - -method(); -// 'this' is being referenced outside an object context -// can be fixed by explicitly setting the object context with 'bind()' - -method = car.printOut.bind(car); - -method(); -``` - -The above example returns the following output: - -```shell -2019 Honda Civic -undefined undefined undefined -2020 Honda Civic -``` - -## Codebyte Example - -The following code snippet illustrates how the context of `this` affects the behavior of methods within an object, and how it can be controlled using `bind()`: - -```codebyte/javascript -const person = { - firstName: 'John', - lastName: 'Doe', - fullName: function() { - return this.firstName + ' ' + this.lastName; - } -}; - -console.log(person.fullName()); - -const getFullName = person.fullName; - -console.log(getFullName()); - -const getBoundFullName = person.fullName.bind(person); - -console.log(getBoundFullName()); -``` diff --git a/content/javascript/concepts/polyfill/polyfill.md b/content/javascript/concepts/polyfill/polyfill.md new file mode 100644 index 00000000000..747bbe90d79 --- /dev/null +++ b/content/javascript/concepts/polyfill/polyfill.md @@ -0,0 +1,64 @@ +--- +Title: 'Polyfill' +Description: 'A polyfill is JavaScript code that adds modern functionality to older browsers lacking native support, ensuring compatibility and consistent behavior.' +Subjects: + - 'Computer Science' + - 'Developer Tools' + - 'Web Development' +Tags: + - 'Developer Tools' + - 'Frameworks' + - 'Javascript' + - 'Programming' +CatalogContent: + - 'introduction-to-javascript' + - 'paths/front-end-engineer-career-path' +--- + +A **polyfill** is a small piece of JavaScript code that enables developers to use modern features in browsers that don’t natively support them, ensuring consistent functionality. It serves as a fallback strategy that adds newer features to older browser versions, making it easier for developers to use advanced methods, APIs, or syntax without worrying about browser compatibility. Polyfills are particularly beneficial when implementing cutting-edge functionality, as they allow a uniform user experience across different browsers and platforms. For example, if a browser doesn't support the `Array.prototype.includes` method, a polyfill can be used to manually add the feature, ensuring smooth operation of applications across multiple environments. + +## Syntax + +Here's the syntax for a polyfill that typically checks if a method or feature is already available, and if not, it defines the missing functionality: + +```pseudo +if (!Feature.prototype.method) { + // Define the polyfill for the missing method + Feature.prototype.method = function() { + // Polyfill implementation + }; +} +``` + +- `feature`: The object, class, or prototype (like `String`, `Array`, `Object`, or custom objects) that is missing the method or functionality. The polyfill ensures this feature becomes available on it. +- `method`: The specific method (e.g., `includes`, `assign`, etc.) that is missing and needs to be added by the polyfill. +- `if (!Feature.prototype.method)`: Condition that checks if the method is missing in the current environment and only applies the polyfill if it's absent. + +## Example + +Here’s an example that demonstrates how a polyfill works by adding the missing `includes` method to the `Array` prototype: + +```js +if (!Array.prototype.includes) { + // Polyfill for the 'includes' method + Array.prototype.includes = function(element) { + for (let i = 0; i < this.length; i++) { + if (this[i] === element) { + return true; + } + } + return false; + }; +} + +// Example usage of the polyfill +const arr = [1, 2, 3, 4]; +console.log(arr.includes(3)); +console.log(arr.includes(5)); +``` +Here the code first checks if the `Array.prototype.includes` method exists. If it's missing, the polyfill defines it. The polyfill works by iterating through the array and returning `true` if the specified element is found, or `false` if it's not. + +```shell +true +false +``` diff --git a/content/javascript/polyfill b/content/javascript/polyfill new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/content/javascript/polyfill @@ -0,0 +1 @@ + diff --git a/content/javascript/polyfill.md b/content/javascript/polyfill.md new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/content/javascript/polyfill.md @@ -0,0 +1 @@ +