Skip to content

Instantly share code, notes, and snippets.

@NealEhardt NealEhardt/basics.js
Last active Jan 25, 2019

Embed
What would you like to do?
JavaScript language basics
/*
* Basic operations with JavaScript arrays, functions, objects, and strings.
* JavaScript is a small language. With ECMAScript 6 (ES6), it has some
* powerful functional programming tools. I focus on the idioms I've used often.
* If you learn these operations, you won't reach for third-party libraries as often.
*
* To run examples and verify the outputs, paste this file in your browser's console.
*/
({
array: {
literal: [8, 6, 7], //= [8, 6, 7]
typeTest: Array.isArray([8, 6, 7]), //= true
/*
* :: PURE operations ::
* No change to this array.
*/
get: [8, 6, 7][1], //= 6
length: [8, 6, 7].length, //= 3
map: [8, 6, 7].map(x => x * 2), //= [16, 12, 14]
concat: [8, 6, 7].concat([5, 3, 0, 9]), //= [8, 6, 7, 5, 3, 0, 9]
find: [8, 6, 7].find(x => x < 8), //= 6 :: first element matching predicate
filter: [8, 6, 7].filter(x => x < 8), //= [6, 7] :: all elements matching predicate
includes: [8, 6, 7].includes(6), //= true
indexOf: [8, 6, 7].indexOf(6), //= 1 :: index of 1st occurrence
// returns -1 if not found
join: [8, 6, 7].join('-'), //= "8-6-7"
// Reduce will accumulate the elements of an array by feeding your closure's output
// back in as its first argument in the next iteration.
reduce_sum: [8, 6, 7].reduce((acc, x) => acc + x), //= 21 :: the sum of the array
reduce_flatten: [[8, 6, 7], [5, 3], [0, 9]]
.reduce((a, b) => a.concat(b), []), //= [8, 6, 7, 5, 3, 0, 9] :: flattened array
reduce_toMap: [8, 6, 7].reduce((acc, x) => {
acc[x] = String.fromCodePoint(5309 * x);
return acc;
}, {}), //= { 6: "籮", 7: "鄫", 8: "ꗨ" } :: a map with array elements as keys
slice: [8, 6, 7, 5].slice(1, 3), //= [6, 7] :: subarray indexed in interval [1, 3)
slice_toCopy: [8, 6, 7].slice(0), //= [8, 6, 7] :: a shallow copy
/*
* :: MUTATING operations ::
* This array will be mutated.
*/
set: [8, 6, 7][2] = 5, //= 5 :: sets the element
// array is now [8, 6, 5]
sort: [8, 6, 7].sort(), //= [6, 7, 8] :: itself
sort_descending: [8, 6, 7].sort((a, b) => b-a), //= [8, 7, 6] :: itself
reverse: [8, 6, 7].reverse(), //= [7, 6, 8] :: itself
push: [8, 6, 7].push(5), //= 4 :: the new length
// array is now [8, 6, 7, 5]
push_many: [8, 6, 7].push(5, 3), //= 5 :: the new length
// array is now [8, 6, 7, 5, 3]
pop: [8, 6, 7].pop(), //= 7 :: the old tail value
// array is now [8, 6]
pop_empty: [].pop(), //= undefined :: no error
// array is still []
shift: [8, 6, 7].shift(), //= 8 :: the old head value
// array is now [6, 7]
shift_empty: [].shift(), //= undefined :: no error
// array is still []
unshift: [8, 6, 7].unshift(1) //= 4 :: the new length
// array is now [1, 8, 6, 7]
},
func: {
arguments: (function () { return arguments; })(8, 6, 7), //= [8, 6, 7]
// Returns its own arguments as an array
call: ((x, y, z) => x + y + z).call(null, 8, 6, 7), //= 21
// Calls the function with this=null, followed by x=8, y=6, z=7
bind: ((x, y, z) => x + y + z).bind(null, 8)(6, 7), //= 21
// Binds arguments to the function (this=null, x=8), then calls it with y=6, z=7.
apply: ((x, y, z) => x + y + z).apply(null, [8, 6, 7]) //= 21
// Calls the function with this=null, followed by argsArray.
},
object: { // used as a map or dictionary
literal: {a: 3, '.b.': 4}, // {a: 3, ".b.": 4}
// typeTest: none. Everything is an Object. There is no Object test.
getByNiceKey: ({a: 3, '.b.': 4}).a, //= 3
getByMessyKey: ({a: 3, '.b.': 4})[".b."], //= 4
keys: Object.keys({a: 3, '.b.': 4}) //= ["a", "b"] :: order not guaranteed
},
string: {
literal: '555.867.5309', //= "555.867.5309"
indexOf: '555.867.5309'.indexOf('.'), //= 3
lastIndexOf: '555.867.5309'.lastIndexOf('.'), //= 7
split: '555.867.5309'.split('.') //= ["555", "867", "5309"]
},
misc: {
log: console.log('hello'), //= undefined
// Also use console.warn and console.error
voidOperator: void true, //= undefined :: removes the result of an expression
// Idiomatic use: `if (err) return void callback(err);`
// Brave ones will uncomment this 👇
debuggerStatement: (() => { /* debugger; */ })() //= undefined :: declares a breakpoint
// Not available in all environments. Press [▶ Continue] to continue execution.
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.