Published
Edited
Aug 25, 2021
1 fork
3 stars
function hello_standard(name) {
return "Hello "+name;
}
hello_standard("World")
hello_arrow = (name) => "Hello " + name
hello_arrow("World")
point = ({x:2, y:3})
point.x
point.y
point["x"]
point["y"]
getComponent = (p,e)=>p[e]
getComponent(point,"x")
getComponent(point,"y")
md`**Duplicate or copy Javascript Objects**:
\`Remember assignment only copies the pointer to the object. It does not duplicate the object content.\`
To copy an object in JavaScript, you have three options:
- Use the spread (...) syntax
- Use the Object.assign() method
- Use the JSON.stringify() and JSON.parse() methods
The following illustrates how to copy an object using these three methods:`
point
pointCopies = {
// using spread ...
let p1 = {
...point
};
// using Object.assign() method
let p2 = Object.assign({}, point);
let p3 = { p1, p2 };
// using JSON
let p4 = JSON.parse(JSON.stringify(p3));
p1.x = 4;
p2.x = 5;
return [p1, p2, p3, p4];
}
Object.keys(point)
Object.values(point)
Object.entries(point)
pointCopies.slice(0,2)
A = [2, 4, 6, 8, 10]
pointObjects = [
{x:2,y:3},
{x:4, y:1},
{x:-1, y: 2}
]
md`### Array Length
returns the lengh of array A : A.length`
A.length
md `### Array Slice: A.slice([start[,end]]))
Duplicate the array fully or partly from start to end.
Creates a new array from the elements of the original array. The original array remains unchanged.`
A.slice()
A.slice(4)
A.slice(2,4)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
md`### Array Map: A.map(callbackFn)
Create a new array with results of calling function *callbackFn* on every element in A`
A
A.filter(d=> d>5)
A.map(e => 10 * e)
pointArray2 = pointObjects.map(d=>[d.x,d.y])
Xs = pointObjects.map(d=>d.x)
pointMagnitudes = pointObjects.map((d) => Math.sqrt(d.x * d.x + d.y * d.y))
md`### Array Filter: A.filter(callbackFn)
Create a new array with all those elements of array that pass the boolean operation defined in callbackFn.`
points1stQ = pointObjects.filter(d=>d.x>=0 && d.y>=0)
md`##### Note:
*callbackFn* gets the array element as the first parameter. Also gets the index of the element as the second parameter, if you wish to use. (It has a third parameter too. It is the original array that the array function was called upon!)`
Aeven = A.filter((d,i)=>(i%2==0))
md`## Array Reduce: A.reduce(reducerFn, initialValue)
This function executes a reducer function (that you provide) on each element of the array, returns a single output value.
The reducer functions takes one extra argument compared to other callback functions mentioned above. They are
- Accumulator (acc)
- Current Value (cur)
- Current Index (idx)
- Source Array (src)
The accumulator must be used in the reducerFn to accumulate value.
*initialValue* is the starting value that the Accumulator takes.
For example: to compute the average of a number array A, we can use the following statement:
(A.reduce((acc,cur)=>acc = acc+cur, 0))/A.length
`
A
A.slice(1,4)
sum = (A.slice(1).reduce((acc,cur)=>acc = acc+cur, 0))
covid = d3.csv(
"https://covid.ourworldindata.org/data/owid-covid-data.csv",
d3.autoType
)
covid.columns
[...new Set(covid.map(d=>d.continent))]
Object.keys(covid.reduce((o,d)=>{
o[d.continent] = d.continent;
return o;
},{}))
md `##### Thre are many more array functions. For more array functions refer to a cheet sheet line https://www.shortcutfoo.com/app/dojos/javascript-arrays/cheatsheet.`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
