init

js/notes.md

@@ -0,0 +1,350 @@
+---
+layout: default
+title: Javascript - notes
+categories: programming
+path: js/notes
+---
+
+Useful tool:  Why did you render
+https://react.dev/learn/react-developer-tools
+
+### Currying - JavaScript
+
+
+```js
+function currying(fn, ...args) {
+    return (..._arg) => {
+        return fn(...args, ..._arg);
+    }
+}
+```
+
+```js
+function sum(a,b,c) {
+    return a + b + c
+}
+let add = currying(sum,10);
+```
+
+#### Advanced implementation
+
+```js
+function curry(func) {
+    return function curried(...args) {
+        if (args.length >= func.length) {
+            return func.apply(this, args)
+        } else {
+            return function(...args2) { 
+                return curried.apply(this, args.concat(args2))
+            }
+        }
+    }
+}
+```
+
+Usage
+
+```js
+function sum(a, b, c) {
+  return a + b + c;
+}
+
+let curriedSum = curry(sum);
+
+// Callable normally
+curriedSum(1, 2, 3) 
+
+// Currying of 1st argument
+curriedSum(1)(2,3) 
+
+// Currying all arguments
+curriedSum(1)(2)(3)
+```
+
+
+### Closures
+
+```javascript
+var NextClosure = function() {
+    var a = 0;
+    return function next() {
+        a++
+        return a
+    }
+}
+```
+
+```javascript
+var next = NextClosure()
+
+console.log(next())
+console.log(next())
+console.log(next())
+```
+
+
+### Manipulating SVG
+
+```html
+<svg id="display" width="50" height="50" style="background-color: aqua;"></svg>
+```
+
+
+```javascript
+let element = document.createElementNS("http://www.w3.org/2000/svg", 'rect')
+element.setAttribute("x", 25)
+element.setAttribute("y", 25)
+element.setAttribute("width", 25)
+element.setAttribute("height",25)
+element.setAttribute("fill", "black")
+let display = document.getElementById("display")
+display.appendChild(element)
+```
+
+### Operations on arrays
+
+```js
+let test = [1,2,3,4,5,6,7]
+console.log(test.splice(-5, 5)) // [ 3, 4, 5, 6, 7 ]
+console.log(test) // [ 1, 2 ]
+```
+
+- `test.splice(-5, 5)` counting from the end
+-  `test.splice(5)` from 5th to the end of the array
+
+```js
+// Take just first element
+console.log(process.argv.shift()
+```
+
+
+## Call function in place
+
+
+```js
+(function waitForAsync() {
+	if (end) {
+		console.log("Synchronous operation can proceed now")
+	} else {
+		setImmediate(waitForAsync)
+	}
+})()
+```
+
+## Spawn process
+
+```js
+const { spawn } = require('child_process')
+const child = spawn(command, params, {cwd: process.cwd()});
+
+//for text chunks
+child.stdout.setEncoding('utf8')
+
+child.stdout.on('data', (chunk) => {
+	//process.stdout.write(chunk)
+})
+
+// since these are streams, you can pipe them elsewhere
+// child.stderr.pipe(dest);
+
+child.on('close', (code) => {
+	console.log(`ENDED: ${command} ${params.join(" ")} $ => ${code}`);
+});
+```
+
+
+## Handling working directory
+
+```js
+function dir(wd, commands) {
+	let saveWD = process.cwd()
+	process.chdir(wd)
+	commands()
+	process.chdir(saveWD)
+}
+```
+
+## Execute script loaded from string
+
+
+```js
+const util = require('util')
+const vm = require('vm')
+
+const sandbox = {
+	animal: 'cat',
+	count: 2
+}
+
+const script = new vm.Script('count += 1; name = "kitty"')
+const context = new vm.createContext(sandbox)
+
+for (let i = 0; i < 10; ++i) {
+	script.runInContext(context)
+}
+
+console.log(util.inspect(sandbox))
+```
+
+or 
+
+```js
+primes = [ 2, 3, 5, 7, 11 ]
+subset = eval('primes.filter(each => each > 5)')
+console.log(subset)
+```
+
+```js
+(async () => {
+	let file = await readSource()
+})()
+```
+
+
+mjs => node module, allows to use await/async at the top level
+
+
+```json
+{
+  "name": "om",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "ts-node src/index.ts",
+    "build": "tsc && cp src/om dist/om",
+    "run": "node dist/index.js",
+    "watch": "nodemon --watch 'src/**' --ext 'ts,json' --ignore 'src/**/*.spec.ts' --exec 'tsc || true'"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+  "commander": "^12.0.0",
+  "pg": "^8.11.5"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
+  }
+}
+```
+
+
+## Make executable
+
+```js
+#!/usr/bin/env node
+require(".")
+```
+
+### Get all function argments
+
+```js
+function func(1,2 3) {
+	console.log(arguments)
+}
+```
+
+## String literals and parentheses-less calls
+
+
+```javascript
+const showstring = (str, ...values) => {
+  console.log(str);
+  console.log(values)
+}
+const name = 'John'
+showstring`Hello World ${name} ${name} ${1 + 2} and more`;
+```
+
+```javascript
+// str
+[
+  "Hello World ",
+  " ",
+  " ",
+  " and more"
+]
+
+// values
+[
+  "John",
+  "John",
+  3
+]
+```
+
+## Generators
+
+```javascript
+function* zip(...arrays){
+  const maxLength = arrays.reduce((max, curIterable) => curIterable.length > max ? curIterable.length: max, 0);
+  for (let i = 0; i < maxLength; i++) {
+    yield arrays.map(array => array[i]);
+  }
+}
+```
+
+
+## `this` and inheritance
+
+```js
+function sum(b) {
+  return this.a + b;
+}
+
+sum.call({a: 4}, 5) // 9
+const newSum = sum.bind({a: 4})
+newSum(3) // 7
+```
+
+
+```js
+
+function User() {
+	this.id = 5
+
+	this.test1 = () => {
+		console.log(this.id)
+	}
+
+	this.test2 = function() {
+		console.log(this.id)
+	}
+}
+
+User.prototype = {
+	
+    show: function () {
+	    console.log(`user id = ${this.id}`)
+    }
+}
+
+let user = new User()
+
+user.show() // user id = 5
+user.test1() // 5
+user.test2() // 5
+
+user.__proto__ = { 
+	show: function() {
+		console.log(`user: ${this.name}`)
+	}
+}
+
+user.name = "Artur"
+user.show() // user: Artur
+
+user.__proto__ = {
+	show: () => { 
+		console.log(`user: ${this.name}`)
+	}
+}
+
+user.show() // user:
+
+```
+