JavaScript on jeffcarp

Visualizing JavaScript Project Structure

Mon, 12 Jan 2015 00:00:00 +0000

Recently I thought to myself: fairly frequently I dive into a big JS codebase and need to poke around for a while to get acquainted with the project structure, wouldn’t it be nice if I could have a more visual way of seeing the whole thing to make sense of it all?

It was this need I was trying to fill when I embarked on my open dev project last Friday. In this post I’ll try to walk through the steps I took so you can replicate them. If you want to just to play with the final project, it’s available as an npm module named jsviz (npm: jsviz, GitHub: jeffcarp/jsviz).

Things learned while preparing for Angular Live Code

Tue, 22 Apr 2014 00:00:00 +0000

This week I learned that there’s nothing quite like signing up to teach something to make you realize you don’t actually know the material all that well.

I’m giving an introduction to AngularJS talk this Thursday at Startup House SF. You should come by if you want to learn about AngularJS.

It’s Tuesday and 124 people have signed up and I’m kind of nervous to say the least. I’ve tried to channel my nervousness into preparation (we’ll see if it pays off or not). Here are a few things I’ve learned in the process.

Two interesting IE JavaScript quirks

Fri, 14 Mar 2014 00:00:00 +0000

In the past month I’ve diagnosed and fixed a couple particularly pernicious bugs relating to JavaScript quirks in Internet Explorer. Hopefully if you haven’t run into these before, this will save you some pain in the future.

1. `window` does not inherit from `Object.prototype`

Oddly enough, according to the ECMAScript specification, the global window object does not necessarily have to inherit from Object.prototype. In Chrome, FF, and Safari, it does, but in IE it does not.

JavaScript's Mutative vs. Non-Mutative Array Methods

Thu, 20 Feb 2014 12:00:04 +0000

This is an issue that has endlessly tripped me up in JavaScript and I hope this post will help clarify things a bit and hopefully discover a pattern one can use to discern between mutative and non-mutative array methods.

First, let me define what I mean when I say mutative:

// If a method is mutative, that means it changes the original array.
var foo = [1, 2, 3];
foo.reverse();
console.log(foo); // [3, 2, 1]

// Notice how we didn't assign foo to new variable, reverse() acted upon it in place.
// In contrast, non-mutative array methods return a new copy of the original array.

// Here, the new array concat() generates is lost since we didn't assign it
var bar = [1, 2, 3];
bar.concat([4, 5]);
console.log(bar); // [1, 2, 3]

// Now if we assign it, bar becomes the new array.
bar = bar.concat([4, 5]);
console.log(bar); // [1, 2, 3, 4, 5]

Mutative	Non-Mutative
splice	slice
shift, pop	concat
unshift, push	every *
reverse	filter *
sort	forEach *
	indexOf
	lastIndexOf
	join
	map *
	reduce *
	reduceRight *
	some *
	toLocaleString
	toString