Next Generation Javascript Flashcards
Component?
Core building block of React
What is the Root of a React Component Tree
App
What does each Component need to return?
Each component needs to return / render some JSX code
What is JSX code?
It defines what HTML-like code React renders
What are the two types of React components?
Functional and Class Based
What is a Functional Component?
×
const cmp = ( ) => {return
some JSX
};
×
What is a Class-Based Component?
×
class cmp extends Component
Render ( ) {
Return
some JSX
;
}
};
×
What are Props?
Arguments passed to a component function
{props.title}
What are two ways of creating variables?
Let -> variable value
Const -> Variable that doesn’t change
What is an arrow function?
const myfunc = (arguments) => {function body}
How to write an arrow function with one argument?
const printMyName = name => console.log(name);
printMyName(‘Frank’);
An arrow function with two arguments
const printMyName = (name, age) => {
console.log(name, age);
}
printMyName(‘Frank’, ‘60’);
Arrow function shortcut if only returning one value
const mutliply = number => number*2;
console.log(multiply(2));
How to export a function
Export
person.js
const person = {name: ‘Max’};
export default person;
Import
import person from ‘./person’;
import prs from ‘./person’;
Export multiple functions
utility.js
Export
export const clean = () => { };
export const basedata= 10j;
Import
import {basedata} from ‘./utility’;
import {clean as cl} from ‘./utility’;
import * as bundled from ‘./utility’;
What is a class
A blueprint for an object
class person {
name= ‘Max’ PROPERTY
call = () => { }. METHOD
}
How to instantiate a class?
class person {
name= ‘Max’ PROPERTY
call = () => { }. METHOD
}
const myPerson = new.Person
What is inheritance
class Person extends Master
super()
if you extend a class you must call ‘super’ to initiate the parent class when instantiating a new child class
What is a spread operator?
Used to split up array elements or object properties
const newArray = […oldArray, 1,2]
const newObject = {…oldObject, newproperty:5};
What is a rest operator?
Used to merge a list of function arguments into an array
function sortArgs(…args) {
return args.sort()
}
What is destructuring?
Easily extracts array elements or object properties and stores them in variables
Array[a,b] = [‘Hello’,’Max’]
Object {name} = {name=’Max’, age: 28}
What are primitive types?
Actual value is copied
numbers, strings, booleans
What are reference types?
A pointer is copied
objects, arrays
to actually make a copy of the object or array use a spread operator
const secondPerson = {
…Person
};
Array functions - map
const numbers = [1,2,3];
const doubleNumbers = numbers.map((num) =>
return num*2;
};
What are the 8 data types in javascript?
Number - of any kind
BigInt - Integers of arbitrary length
String - zero or more characters
Boolean - True or False
Null - Fir unknown values
Undefined - For unassigned values
Object - For more complex data structures
Symbol - For unique identifiers
JS Array Functions
map()
find()
findIndex()
filter()
reduce()
concat()
slice()
splice()
JS Array Functions - find()
The find() method returns the value of the first element in the provided array that satisfies the testing function
const array1 = [5,12,8,130,44];
const found = array1.find(element=> element>10);
console.log(found);
ANS: 12
JS Array Functions - findIndex()
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function
const array1 = [5,12,8,130,44];
const isLargeNumber = (element) => element>13;
console.log(array1.findIndex(isLargeNumber);
ANS: 13
JS Array Functions - filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function
const words=[‘spray’,’limit’,’elite’,’exhuberant’,’destruction’,’present’};
const result=words.filter(word=>word.length>6);
console.log(result);
ANS: array[‘exhuberant’,’destruction’,’present’};
JS Array Functions - reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array resulting in a single output value
const array1=[1,2,3,4};
const reducer= (accumulator, current value) =>
accumulator + current value;
console. log(array1.reduce(reducer); ANS: 10
console. log(array1.reduce(reducer,5); ANS: 5
JS Array Function - concat()
The concat() method is used to merge two or more arrays. This method doesn’t change the existing arrays, but instead returns a new array
const array1=[‘A’,’B’,’C’};
const array2=[‘D’,’E’,’F’};
const array3=array1.concat(array2);
console.log(array3);
ANS: array[‘A’,’B’,’C’,’D’,’E’,’F’];
JS Array Functions - slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in the array
const animals=[‘ant’,’bison’,’camels’,’duck’,’elephant’];
console. log(animals.slice(2)); ANS array[‘camels’,’duck’,’elephant’];
console. log(animales.slice(2,4)); ANS array[‘camels’,’duck’];
console. log(animales.slice(1,5)); ANS array[‘bison’,’camels’,’duck’,’elephant’];];
JS Array Function - splice()
The splice() function changes the contents of an array by removing or replacing existing elements and / or adding new elements
const months=[‘jan’,’mar’,’apr’,’jun’,];
months. splice(1,0,’feb’); ANS: inserts at index 1
console. log(months); ANS array[‘jan’,’feb’,’mar’,’apr’,’jun’,];
months. splic(4,1,’may’); ANS replaces 1 element at index 4
console. log(months) ANS array[‘jan’,’feb’,’mar’,’apr’,’may’,];
What is a component
a core building block of React
Component Tree
Root => ‘App’
What is JSX
Each component needs to return / render some jsx code –> it defines what HTML code react renders
Getting started
install node.js
then install react
sudo npm install create-react-app -g
create-react-app name-of-your-app –scripts-version 1.1.5
