- Early Days
- Created by Brendan Eich at Netscape in 10 days in 1995
- Was not a highly respected programming language for about 10 years
- Based on functional languages with some object-oriented patterns; is a multi-paradigm language
- Applications like Google Maps and Gmail were where JavaScript gained popularity
- Standards
- The standard for JavaScript implementations is called ECMAScript
- Given that there are several competing JavaScript engines, the European Computer Manufacturers Association (ECMA) is responsible for standardizing JavaScript, referred to as ECMAScript
- The standard is updated yearly and the standard for that year is called ECMAScript 20xx (or ES 20xx); ES2015 or ES6.
- Browser Wars still leave us with legacy JavaScript implementations (and weirdness)
- We can use transpiling to write JavaScript according to the standard we want and convert it to code that can be used for the majority of JavaScript applications
- The standard for JavaScript implementations is called ECMAScript
- Request-Response lifecycle
- Request is made to a server
- We get a response back with data in binary, text, HTML, or JSON
- We use that data in our application
- In the browser
- A user enters an address in the address bar (or clicks a link)
- A request is made to a server, which typically serves HTML
- Included in that HTML are links to images, fonts, stylesheets, and scripts
- Each one of those links means another request by the browser but without refreshing the page
- When all the external links have loaded, the page itself is finished loading
- Loaded JavaScript
- JavaScript can be written directly in HTML through a
script
tag - It can also be loaded externally through a
script
tag with asrc
attribute - When the browser sees JavaScript, it attempts to run it immediately
- JavaScript can be written directly in HTML through a
- JavaScript implementations
- Each browser has its own JavaScript engine or implementation
- The Document Object Model is the interface between the loaded HTML and the JavaScript code we write
- Most browsers are converging on agreeing on web standards, but browsers need the ability to add proprietary features to CSS, JS, and the DOM (I'm looking at you Internet Explorer ๐ก)
There are seven data types in JavaScript:
- Symbol
- Undefined
- Null
- Boolean
- Number
- String
- Object
Pass-by-value - when you declare a variable and pass it to a function, a copy of the variable is passed, not the original object in memory.
-
String
'I'm a string in single quotes'
"I'm a string in double quotes"
`I'm a string template with backticks and interpolation ${'Yay!'}`
-
Number
-
Negative
-1
-
Exponent
-1e2
-
Float
-1.1e2
-
NaN
'hello' * 3
-
parseInt / parseFloat
parseInt('123') // => 123 parseInt('123.456') // => 123 parseFloat('123.456') // => 123.456 parseInt('one two three') // => NaN
-
-
Boolean
- Falsey values
- False:
false
- Zero:
0
- Empty string:
""
- Null:
null
- Undefined:
undefined
- Not a number:
NaN
- False:
- Truthy values (everything else)
- Falsey values
-
Undefined
-
A variable that is declared but not assigned a value
let someVar console.log(someVar) // => undefined
-
-
Null
-
An assignment value that represents nothing, like
nil
in Rubylet someVar = null console.log(someVar) // => null
-
-
Symbol
-
Only used as somewhat private, unique identifiers for object properties, i.e. object keys. (Don't worry much about these.)
let sym = Symbol() console.log(sym) // => Symbol()
-
Pass-by-reference: when you declare a variable and pass it to a function, the object in memory itself is passed, not a copy of the object.
-
Object
-
A loaded word in JavaScript. Basically everything that's not a primitive is an object. Objects describe key-value pairs, like hashes in Ruby. They also describe arrays, functions, prototypes, and other complex data types.
-
Object literals
-
Also known as plain-old JavaScript objects (POJOs), these are really simple key-value pairs. The keys are strings (or Symbols), and the values are any data type, including other objects.
const fred = { name: 'Fred', age: 26 } const jone = { name: 'Jone' } const school = { students: [fred, jone] }
-
You access properties of objects in one of two ways: dot-notation or bracket-notation. With the brackets, the value that is passed in needs to evaluate to a String or a Symbol.
const nameKey = 'name' console.log(`${fred.name} is ${fred.age}`) // => "Fred is 26" console.log(`My friend's name is ${jone[nameKey]}`) // => "My friend's name is Jone"
-
-
-
Function
- Definition VS invocation. THIS IS SUPER IMPORTANT
function iLikePancakes() {
console.log('Pancake technology is truly incredible. What a time to be alive!')
}
iLikePancakes
// VS
iLikePancakes()
-
Another point to note is that functions without an explicit return value will return
undefined
. PLEASE BURN THIS INTO YOUR MEMORY. The single exception to this rule is with one-line, single expression arrow functions. -
Functions are POJO's that can be executed/called! This means that you can add properties to functions just like you do POJO's:
function functionsAreObjects() {
return 'nice'
}
functionsAreObjects.name = 'a function object'
-
Function expression
-
This is like a function that can't live without being assigned to a variable, or a function that is defined right when it's used (as in as an argument to another function).
let arr = [1,2,3] let doSomething = function() { return true } let doSomethingElse = () => false arr.map(function namedExpression(n) { return n + 1 })
-
-
Function declaration
-
This is simply a variable assignment and a function expression mashed into one. It ALWAYS begins with the
function
keyword and needs a name.function doSomething() { return true } console.log(doSomething) // f doSomething()
-
-
"The main difference between a function expression and a function statement is the function name, which can be omitted in function expressions to create anonymous functions." - MDN Article on function expression
-
Array
- Arrays in JavaScript are similar to arrays in Ruby, but with different methods. Ruby has a robust enumerable library that can work on arrays and POJOs alike, but JavaScript is more DIY, so there are just enough enumerables to build what you need. Arrays can contain any data type.
let arr = [1, 2, 3, "a", "b", "c", { hello: 'world' }] arr.forEach(function(el) { console.log(el) }) // => prints 1, 2, 3, "a", "b", "c", { hello: 'world' }
The original way of checking types, typeof
, is a little unreliable when looking at some objects like arrays, which return "object"
. This works best for primitive values. For example:
parseInt('HOTDOG') //NaN
typeof parseInt('HOTDOG') //'number'
typeof NaN //'number'
Running the learn
command in Terminal should open a new browser window where the tests will run. When a file is updated in the directory where learn
was executed, the web page with the tests should update automatically. If you need to debug your code, figure out which test is failing and put a debugger
there. This works like binding.pry
in Ruby.
Keep in mind that in order for debugger
to be triggered in your browser, you must have your developer console open.
If you need quicker and more simple debugging, console.log
or console.dir
is the way to go.
- PLEASE ALSO BURN THIS INTO YOUR MEMORY. Always start with MDN when looking at JS documentation. W3 Schools is great for HTML and CSS, NOT SO MUCH FOR JAVASCRIPT.
(all hail Mozilla)
- INDENTATION AND PROPER STYLE ARE ALSO SUPER IMPORTANT MOVING FORWARD. Airbnb has an amazing JavaScript Style Guide if you're unsure about how to format your JS code. Trust me, learn to indent properly now before you end up in a curly bracket hellscape.