Programing Flashcards
typescirpt, javascript, webpack ,react
Immediately Invoked Function Expression (IIFE)
(() => console.log(‘Hello world’))();
An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
Abstraction
Abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems. It hides the technical complexity of systems behind simpler APIs.
Accessibility
Web Accessibility (A11Y) refers to best practices for keeping a website usable despite physical and technical restrictions.
Execution context
Created to run the code of a
function - has 2 parts
- Thread of execution
- Memory
Call stack
JavaScript keeps track of what
function is currently running
(where’s the thread of execution)
- Run a function - add to call stack
- Finish running the function - JS
removes it from call stack
- Whatever is top of the call stack
- that’s the function we’re
currently running
thread
of execution
Goes through the code
line-by-line and runs/ ’executes’
each line - known as the thread
of execution
string.trim()
`var myString = ‘ Some Tabs and Spaces ‘;
console.log(myString.length); // logs 28
var myNewString = myString.trim(); // trim it
console.log(myNewString); // logs ‘Some Tabs and Spaces’
console.log(myNewString.length); // logs 20
// Note: this method does not mutate a value it creates a new value
console.log(myString, myString.length); // This still is, ‘ Some Tabs and Spaces ‘
The ES5 .trim() method removes whitespace from both ends
Array.isArray()
The Array.isArray() method is used to determine precisely (true or false) if a value is a true Array. In other words, this method checks to see if the provided value is an instance of the Array() constructor.
[].some()
The [].some() method will start testing values in array, until a test returns true, then the function passed to .some() immediately returns true, otherwise the function returns false (i.e. the first truthy value found will result in the function immediately returning true and potentially this could mean not all tests are run).
~~~
// Check if one or more items in the array is bigger than or equal to 2
var someMethod = [1, 2, 3].some(function(value, valueIndex, wholeArray){
return value >= 2;
});
console.log(someMethod)
// logs true because the array contains a value that is greater than or equal to 2
```
[].every()
The [].every() method will start testing values in array, until a test returns false, then the function passed to .every() immediately returns false, otherwise the function returns true (i.e. the first falsy value found will result in the function immediately returning false and potentially this could mean not all tests are run).
// Check if every item in the array is bigger than or equal to 2
var everyMethod = [1, 2, 3].every(function(value, valueIndex, wholeArray){
return value >= 2;
});
console.log(everyMethod) // logs false because the array contains a value that is less than 2
[].filter()
[].filter() method will return a new Array containing all the values tha (i.e. are true) the filtering test.
```var myArray = [1,2,3];
// filter out any value in the array that is not bigger than or equal to 2
var FilteredArray = myArray.filter(function(value, valueIndex, wholeArray){
return value >= 2;
});
console.log(FilteredArray) // logs [2,3]
// Note: filter() returns a new Array, myArray is still equal to [1,2,3]```
[].forEach()
The [].forEach() method executes a provided function for each value in the array.
// log to the console each value, valueIndex, and wholeArray passed to the function
['dog','cat','mouse'].forEach(function(value, valueIndex, wholeArray){
console.log('value = '+value+' valueIndex = '+valueIndex+' wholeArray = '+wholeArray);
/** logs:
"value=dog valueIndex=0 wholeArray=dog,cat,mouse "
"value=cat valueIndex=1 wholeArray=dog,cat,mouse "
"value=mouse valueIndex=2 wholeArray=dog,cat,mouse "
**/
});
[].indexOf()
The [].indexOf() method searches an array for the first value matching the value passed to indexOf(), and returns the index of this value.
// get index of first 'cat'
console.log(['dog','cat','mouse', 'cat'].indexOf('cat')); // logs 1
// Note: Remember the index starts at 0
[].lastIndexOf()
The [].lastIndexOf() method searches an array for the last value matching the value passed to [].lastIndexOf(), and returns the index of this value.
// get index of last 'cat'
console.log(['dog','cat','mouse', 'cat'].lastIndexOf('cat')); // logs 3
// Note: Remember the index starts at 0
[].map()
The [].map() method executes a provided function for each value in the array, and returns the results in a new array.
var myArray = [5, 15, 25];
// add 10 to every number in the array
var mappedArray = myArray.map(function(value, valueIndex, wholeArray){
return value + 10;
});
console.log(mappedArray) // logs [15,25,35]
// Note: map() returns a new Array, myArray is still equal to [5, 15, 25]
[].reduce()
The [].reduce() method runs a function that passes the return value to the next iteration of the function using values in the array from left to right and returning a final value.
// add up numbers in array from left to right i.e. (((5+5) +5 ) + 2)
var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value;
});
console.log(reduceMethod) // logs 17
/** reduce also accepts a second parameter that sets the first accumulator value,
instead of using the first value in the array. **/
// add up numbers in array from left to right, but start at 10 i.e. ((((10+5) +5 ) +5 ) + 2)
var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value; // first iteration of func accumulator is 10 not 5
}, 10);
console.log(reduceMethod) // logs 27
The [].reduceRight() method runs a function that passes the return value to the next iteration of the function using values in the array from right to left and returning a final value.
The [].reduceRight() method runs a function that passes the return value to the next iteration of the function using values in the array from right to left and returning a final value.
// add up numbers in array from left to right i.e. (((2+5) +5 ) + 5)
var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value;
});
console.log(reduceRightMethod) // logs 17
/** reduce also accepts a second parameter that sets the first accumulator value,
instead of using the first value in the array. **/
// add up numbers in array from left to right, but start at 10 i.e. ((((10+2) + 5 ) +5 ) + 5)
var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){
return accumulator + value; // first iteration of func accumulator is 10 not 5
}, 10);
console.log(reduceRightMethod) // logs 27
New ES5 Getters and Setters (aka Accessors Descriptors or Computed Properties)
ES5 adds to Objects computed properties via the keywords get and set. This means that Objects can have properties, that are methods, but don’t act like methods (i.e you don’t invoke them using ()). In short by labeling a function in an object with get or set one can invoke the backing property function on a property, by merely accessing the property, without using innovating brackets.
The example below demonstrates the nature of getter and setter properties:
~~~
var person = {
firstName : ‘’,
lastName : ‘’,
get name() {
return this.firstName + ‘ ‘ + this.lastName;
},
set name(str) {
var n = str.split(/\s+/);
this.firstName = n.shift();
this.lastName = n.join(‘ ‘);
}
}
~~~
Object.create()
ES5 added the Object.create() method so objects could be created and their prototypes easily setup. Object.getPrototypeOf() was added to easily get an objects prototype.
// setup an object to be used as the prototype to a newly created myObject object below
var aPrototype = {
foo: 'bar',
getFoo: function(){
console.log(this.foo);
}
}
// create a new myObject, setting the prototype of this new object to aPrototype
var myObject = Object.create(aPrototype);
// logs 'bar' because myObject uses aPrototype as its prototype, it inherits getFoo()
myObject.getFoo(); // logs 'bar'
// get a reference to the prototype of myObject, using getPrototypeOf()
console.log(Object.getPrototypeOf(myObject) === aPrototype); //logs true
Object.defineProperty()
ES5 added Object.defineProperty(), Object.defineProperties(), and Object.getOwnPropertyDescriptor() so object properties can be precisely defined (using descriptors) and retrieved. Descriptors provide an attribute that describe a property in an object. The attributes (i.e descriptors) that each property can have are: configurable, enumerable, value, writable, get, and set.
// add a property, 'value2' with descriptors to myObject using Object.defineProperty()
Object.defineProperty(myObject, 'prop2', {
value: 'value2',
writable: true,
enumerable: true,
configurable: true,
});
// get the descriptors for the prop2 property.
console.log(Object.getOwnPropertyDescriptor(myObject,'prop2'));
Object.keys()
ES5 added Object.keys() which returns an Array of non-inherited-enumerable properties of a given object. ES5 added Object.getOwnPropertyNames() which returns an Array of non-inherited properties of a given object regardless of enumerability.
~~~
// Create an object
var myObject = Object.create(null); // no prototype used
// Add prop to object created
myObject.myObjectProp1 = 1;
// Define a property using defineProperty()
Object.defineProperty(myObject, ‘myObjectProp2’, {
enumerable: false,
value: 2
});
// Use keys() to get Array of all non-inherited, enumerable properties
console.log(Object.keys(myObject)); // logs [“myObjectProp1”]
// Use getOwnPropertyNames to get Array of all non-inherited properties including non-enumerable
console.log(Object.getOwnPropertyNames(myObject)); // logs [“myObjectProp1”, “myObjectProp2”]
```
Object.preventExtensions()
Stops properties from being added but not deleted.
Object.seal():
Stops properties from being added or configured (i.e. the configurable descriptor attribute for each property is changed to false).
Object.freeze()
Stops properties from being added, configured, or writable (i.e. the configurable and writable descriptor attribute for each property is changed to false)
Object.isExtensible():
Boolean check if an object is extensible.
Object.isSealed()
Boolean checking if an object is sealed.
Object.isFrozen()
Boolean checking if an object is frozen.
Thread of Execution
Story of the code execution, line by line
Function
Block of code that referance is saved in memory
Call Stack
Data structure working as LIFO where the active functions are stored and didn’t finish their work, its go one by one.
Higher Order Function
Functions that takes another function or returning a function
Arrow Functions
ES6 arrow function make a this asign to the context where was defined
Clousure
Its like a backpack with required data that are passed to function even if execution context are done you can still have acces to nesecery data. Its a function with all data from lexical scope
Task
SetTimeout, SetInterval, task are last to go
Thread of Execution > MicroTask > Task
MicroTask
Fetch, micro task are priorytaized before tasks but after Global Thread of Execution
Thread of Execution > MicroTask > Task
Promises
Promise create a empty object with a promision some data will be passed in, we can use those data after using then or catch a error
Class
ES6 Class simplify creating a Object
Object.create()
Object.create create a empty object but pass a “__proto__” as a hidden property
