Underscore is a widely used library of Javascript functions that help you do common things quickly and easily. There are a whole bunch of functions that help you manipulate arrays and array-like objects, which I'll focus on here.
Read MoreAn Oldie But Goodie
Mastering Javascript Fundamentals: formatColumn, Thinking Recursively, and Broken Tests
A summary of the last few days.
Read More
Mastering Javascript Fundamentals: unformat, new RegExp
Summary
Use regular expression constructors to dynamically use variables in our regular expressions.
Chain together several .replace methods to strip out cruft.
Return a nice clean number.
Mastering Javascript Fundamentals: Lookaheads and backreferences
Mastering Javascript Fundamentals: Regular Expression Capture Groups
Summary
We can use Regex to do Find and Replace type of actions using .replace.
Capturing groups () let us refer to pieces of you match within .replace using $1, $2, etc.
We can refer to our whole match with the token $&
Mastering Javascript Fundamentals: Regular Expressions
Summary
Regular expressions let us look for matches in strings.
Specify options using a concise syntax.
Allows us to do certain things much more easily than in Javascript.
Put the thing we want to match in between // in 'string'.match(/s/)
. will match any character: 'string'.match(/./)
The global flag, g, will give us multiple matches (find all): 'strings'.match(/s/g) // ["s", "s"]
The pipe | will look for a or b: 'abc'.match(/a|b/g).
Specify or by putting our matches in brackets: 'abc'.match(/[abc]/g)
Specify ranges with the - symbol: 'abc'.match(/[a-z]/g)
Combine ranges: 'abcDEF123'.match(/[a-zA-Z0-9]/g)
Use the negation operator, ^, to get things that don't match our specified values: 'abc123'.match(/[^a-z]/g) // [123]
Match consecutive characters rather than single characters, using quantifiers {}: 'string'.match(/[a-z]{1, 20}/g)
Leave of the upper limit to go to infinity
'string'.match(/[a-z]{1,}/g)
Or just type: 'string'.match(/[a-z]+/g)
Match uppercase or lowercase by adding the case insensitive flag, i: 'string'.match(/[a-z]/gi)
Mastering Javascript Fundamentals: Recursively Mapping Arrays
Summary:
We can use recursion to solve unknown depth problems
Here we use it format values within arrays while still maintaining the original array structure.
We combine .map and a recursive call within .map's callback function to do this.
Diagramming the call stack is great way to understand and visualize the journey to the base case.
We can then use the debugger to let that journey play out for real and check our understanding.
Mastering Javascript Fundamentals: Recursing Through the DOM
Summary
Recursion is a great technique for working with the DOM, since the DOM has unknown levels of depth, and lots of nested elements.
We can create a function forEachChildElement that runs a callback on each element of the DOM.
Mastering Javascript Fundamentals: Recursion
Summary
Recursion is when a function calls itself.
Just calling itself will cause stack overflow.
We need a recursive case and a base case to ensure that the function stops calling itself at some point.
We can use this powerful concept to repeatedly call a function until we get to the base case, which returns a useful value, and then we come back out with that value, informing each step out until we have a final return value.
We can see nice examples of this with factorials, and unwrapping arrays.
Examples inside.
Read More
Mastering Javascript Fundamentals: AccountingJS, formatMoney
Summary
formatMoney takes a value and returns that value formatted nicely as money, as a string.
The user can specify formatting settings like currency symbol, separator, etc.
They can do this via a long list of parameters, or by passing in an options object.
Because of this, the code is long, convoluted, and difficult to read.
It would be better to only allow the user to specify formatting by passing in a format object.
Read on for line-by-line notes.
Read More
Mastering Javascript Fundamentals: AccountingJS, Better Rounding with Scientific Notation
Summary
We can round numbers more consistently if we use scientific notation.
First we move the decimal with something like '1.005e2'
Then we round this exponential form with Math.round.
Finally, we move the decimal back to it's original position with 'e-2".
Read on for a detailed walkthrough.
Read More
Mastering Javascript Fundamentals: AccountingJS, toFixed and Rounding Issues
Summary
Javascript doesn't round the way we want in accounting software.
This is to do with some decimal numbers being not completely precise because computers have to think in terms of powers of 2.
AccountingJS creates its own toFixed method that essentially does this:
Multiply to get the number to only one decimal place
Use Math.round to round using more predictable behavior
Then divide the number back down to get it to the number of decimal places you wanted.
Read on to see the full walkthrough.
Mastering Javascript Fundamentals: AccountingJS, checkCurrencyFormat
Summary:
checkCurrencyFormat takes an argument, format that can be a string, object, or function.
It returns a format object
So if the format parameter is a string, it changes it to an object and returns it.
If format is a valid object, it simply returns it back, untouched.
If format is an invalid object, it uses the default (lib.settings.currency.format) and changes it to an object if it isn't already.
Continue reading to see the full walkthrough.
Read More
Mastering Javascript Fundamentals: AccountingJS Internal Helper Methods (Part 3): map()
Summary
AccountingJS’s map() function checks to see if the native Array.prototype.map function is available.
If the native map is available, it uses it.
If not, it uses its own implementation.
Click on to see a detailed walkthrough.
Read More
Mastering Javascript Fundamentals: AccountingJS Internal Helper Methods (Part 2): defaults
Summary
The defaults() function allows you to pass in two objects and apply the properties from the second object to the first one where those properties don't already exist on the first object.
It does this by enumerating through each property on the second object and checking to see if that property exists on the first object. If the property doesn't exist, it applies that property to the first object.
This is a way to only need to define "custom" properties when creating a new object, and then setting all the "standard" options to the defaults set in another "default" object.
Read on to see how this all works in detail.
Read More
Streaks helps you build great habits and keep yourself accountable
Repetition is the mother of skill. If you want to get good at something, you just have to practice. It's that simple, but consistency is key.
I've been using an app called Streaks to help me stay on top of my goal of doing 1 hour of Javascript every day.
The app is simple, you "check in" to an activity when you do it, and over time you can see how many days you hit and how many you missed. The idea is to get addicted to maintaining your streak. Having a visual representation of your consistent hard work is rewarding and reinforces good behavior.
Let's see how high I can get this streak!
Mastering Javascript Fundamentals: AccountingJS Internal Helper Methods (Part 1)
Summary:
isArray
Tells you whether something is an array or not.
Uses the native isArray if browser supports ES5 or later.
Uses hand-rolled implementation if not.
.call()
a nice trick to borrow a method from one object and call it on another.
when you use .call(object) you set the this value to object for whatever is to the left of the dot.
AccountingJS uses Object.prototype.toString(obj) to show us the type of obj (and uses an equality check).
isObject
Uses same techniques as isArray, but instead checks to see if something is a plain object (not an array, string, number, etc.).
Click “Read more” to see the full explanation.
Read More
Mastering Javascript Fundamentals: isString, !!, and String.prototype
Summary
The best way to get into a new code base is to understand the simple pieces, this will help you understand the more complex pieces.
AccountingJS has two main sections: Internal Helper Methods, and API Methods.
The Internal Helper Methods are a good place to start because there are some simple methods in there that are easy to understand and are used in the API methods.
The isString method uses !! to get the corresponding boolean value of what comes after it.
Boolean() is a cleaner alternative to !!
Strings can have methods because Javascript creates an object version of your string using the new String constructor method, so it can put methods on the prototype. When you call these methods, it uses the object version of your string, returns the value, then throws it all away behind the scenes.
Mastering Javascript Fundamentals: Prototypes and Constructors
Summary
We can use constructor functions to create new objects that have shared properties.
An object created by a constructor function has its prototype property set to an object automatically created by the constructor function. For example, Dog.prototype.
We can add functionality to Dog.prototype and all instances of dog will have that functionality.
Array.prototype.forEach() is an example of this.