published
updated
https://fullstackopen.com/en/part1/java_script#objects
Variables
{{{javascript const x = 10 let y = 5
console.log(x, y) y += 2 console.log(x, y) y = 'some' console.log(x, y) x = 4 // Errors }}}
const defines a constant, so it can't be changed
let is for variable definition
Technically you can also use var but it's use is discouraged
Functions
{{{javascript // name args function def const sum = (p1, p2) => { return p1 + p2 }
// no need for parens or {} if single arg and single statement, sorta like lambdas const square ### p > return p*p
// Old way before arrow definitions function product(p1, p2) { return p1 * p2 }
// Using function expression so you don't need to name it (actual lambdas) const average = function(p1, p2) { return (p1 + p2 ) / 2 }
}}}
Arrays
{{{javascript const t = [1, -1, 2]
t.push(5) console.log(t.length) // 4 console.log(t) // [1, -1, 2, 5] console.log(t[1]) // -1
t.forEach(value => { console.log(value) }) // prints 1, -1, 2, 5 each on their own line
}}}
Fucking arrays aren't constant, what's constant is the reference to the array (wtf js!!!). This is true of all objects, so javascript doesn't have immutable objects.
The other thing to note, is using forEach to iterate through each of the elements of the array, passing the element as an argument to the function we define using the arrow notation.
We also used the push method to change the array in place. Since this is react land, we want immutable stuff, which we can instead do with concat
Arrays also support destructuring!
{{{javascript const t = [1, -1, 2] const t1 = t.concat(5) const t2 = t.map(value => value * 2) const [first, second ... rest] = t2 }}}
Objects
{{{javascript
const object = { name: "anish" age: 27 education: 'Software' }
const object3 = { name: { first: 'Dan', last: 'Abramov', }, grades: [2, 3, 5, 3], department: 'Stanford University', }
console.log(object.name) console.log(object['age'])
object['address'] = 'chadpad' object.job = 'jobless'
}}}
Objects can be defined in many ways, but one way is using object literals. They may be updated at any time (no immutability...) through either the dot or square bracket notation
Technically objects can also have methods, and be built using a constructor but we're trying to stay in functional land, so none of that.
Objects can also define methods. New versions of React don't use these, but it's good to know. Specifically, the thing to know about javascript and object methods is that the this keyword is in reference to how the function gets called(!!!). This has been a pain for developers everywhere, and has led to the development of "this-less Javascript". For example let's look at what happens when we do regular ass things with function calls that are actually methods.
{{{javascript const arto = { name: 'Arto Hellas', age: 35, education: 'PhD', greet: function() { console.log('hello, my name is ' + this.name) }, doAddition: function(a, b) { console.log(a + b) },}
arto.doAddition(1, 4) // 5 is printed
const referenceToAddition = arto.doAddition referenceToAddition(10, 15) // 25 is printed
const referenceToGreet = arto.greet referenceToGreet() // My name is undefined is printed
setTimeout(arto.greet(), 1000) // My name is undefined is printed }}}
When we call this method by reference, the this in the function is actually referring to the Global Context which means we can't access properties of the object. When we call the function from setTimeout the Javascript engine is actually directly calling this function, which means it also doesn't use the object as reference for this. Wild stuff.
One way to get around this is to use bind when calling the function like so:
{{{javascript setTimeout(arto.greet.bind(arto), 1000) }}}
We also can't use references to this in arrow functions at all, presumably because they never bind to any object, always being floating references. The tutorial I'm following doesn't actually say yet.
Classes
Technically Javascript doesn't have classes, but ES6 added the class syntax to create pseudo-classes out of objects. This was controversial. The syntax looks very similar to the object syntax, and under the hood, it is technically an object.
{{{javascript class Person = { constructor(name) { this.name = name; } greet() { console.log("My name is " + this.name) } } }}}