Things I would like to remember in JavaScript

1. Closures

A closure is an inner function that has access to the outer (enclosing) function’s variables — scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

> function greetingCreator(greeting){
... return function (name) {
..... return `${greeting}, ${name}`
..... }
... }
undefined
> const greetingsInUK = greetingCreator("Cheers")
undefined
> greetingsInUK("Thomas")
'Cheers, Thomas'

2. ES5 vs ES6(Object function and class)

In ES5:
function Rectangle(sides, width, height){
this.sides = sides
this.width = width
this.height = height
}
Rectangle.prototype.area = function(){
return this.width * this.height
}

In ES6:
class Rectangle {
constructor(sides, width, height){
this.sides = sides
this.width = width
this.height = height
}

area(){
return this.width * this.height
}
}

3. Inheritance

In ES5:
function Square(sides, length) {
Rectangle.call(this, sides, length, length)
}
Square.prototype = Object.create(Rectangle.prototype)
Square.prototype.constructor = Square
In ES6:
class Square extends Rectangle {
constructor(sides, length){
super(sides, length, length)
}
}

4. Ways to bind..

class Cat {
constructor(){
this.kittens = ["Marley", "Grouchy", "Billy" ]
}
feedCats(){
example 1: using .bind
this.kittens.forEach(function(kitten){
this.feedKitten(kitten)
}.bind(this))
example 2: using arrow function
this.kittens.forEach((kitten)=>{
this.feedKitten(kitten)
})
example 3: different way of using arrow function
this.kittens.forEach(kitten =>{ this.feedKitten(kitten) })
}
feedKitten(kitten){
console.log(`Feeding ${kitten}`)
}
}

5. Ternary Operator — ways to write it:

> crew = ['Jon', 'Katie', 'Tristan']
[ 'Jon', 'Katie', 'Tristan' ]
> var docked = false
undefined
> crew.length > 0 ? docked = false : docked = true
false
> docked = crew.length > 0 ? false : true
false
> crew.length > 0 ? false : true
false

6. Undefined (conditonal)

> var emptyArray = []
undefined
> emptyArray === undefined
false
> emptyArray[0] === undefined
true
> emptyArray.length === 0
true

A conditional using undefined for an empty Array will only check the first index of the Array. It will be easier to just check the length of the Array, it makes it easier to check.

7. Switch .. Case statement

When there are more conditionals than 2. The switch.. case statement may be cleaner.

advance(){    switch (this.bearing) {   
case 'north':
this.coordinates[1] += 1
break;
case 'east':
this.coordinates[0] += 1
break;
case 'south':
this.coordinates[1] -= 1
break;
case 'west':
this.coordinates[0] -= 1
break;
}
this.coordinates
}

8. Array methods

.toString()

> var fruits = ["Banana", "Orange", "Apple", "Mango"]
undefined
> fruits.toString()
'Banana,Orange,Apple,Mango'

.filter() method creates new array with all elements that pass the callback

> var numbers = [12, 116, 70, 89, 34, 6]
undefined
> function isGreaterThan(value){
... return value%2 === 0 }
undefined
> numbers.filter(isGreaterThan)
[ 12, 116, 70, 34, 6 ]

.find() method returns a value of the first element in the array that matches the callback function or undefined is returned. This is implemented as part of ES6.

> var numbers = [12, 116, 70, 89, 34, 6]
undefined
> function isGreaterThan(value){
... return value%2 === 0 }
undefined
> numbers.find(isGreaterThan)
12
> numbers.find(num => num%2 === 0) //with arrow function
12

.reduce() method, reduces the value of the Array to a single value (going left to right).

> var numbers = [1,2,3,4,5]
undefined
> numbers.reduce(function(total, sum){
... return total + sum })
15
> numbers.reduce((total, sum) => total + sum ) // arrow function
15

.forEach() calls a function for each array element

> numbers
[ 1, 2, 3, 4, 5 ]
> numbers.forEach(function(num, index){
... console.log (num * index)
... })
0
2
6
12
20
undefined
> numbers.forEach( (num, index)  => {console.log (num * index)})
0
2
6
12
20
undefined

9. For Loop

> nums
[ 1, 2, 3, 4, 5 ]
> for(var i = 0; i < nums.length; i++){
... console.log (nums[i] * i)
... }
0
2
6
12
20
undefined

10. Node.js

// ♥ node -> to enter node
> process.exit() -> to exit node
> .exit -> also to exit
Show your support

Clapping shows how much you appreciated Jennifer Wong’s story.