JavaScript (ES6 / ECMAscript 6)

Arrow Functions

Regular Functions

function someMethod(){
    console.log('Inside someMethod')
    return true
}

ES6 version

const someMethod = () => {
    console.log('Inside someMethod')
    return true
}

Can also be used as anonymous function

Anonymous Arrow Function

document.addEventListener('click',(e)=>{
    //Handle Click
})

Implicit Return

const doubleIt = x => x * 2 ;

Implicit Return Object

const returnObject = () => ({name:'John',age:30}) ;

Does not have its own bindings to this or super, and should not be used as methods.
Does not have new.target keyword.
Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
Can not be used as constructors.

Var, Let and Const

whatami = this
var whatami = this  //function scoped
window.whatami = this
//===================

let blockScoped = 'Some Other value' //let is bock scoped, can change or be mutated
const man = {name:'Jhon'}  //const is block scoped, can be mutated but can't change

console.log(this) //global or window object

//Ojbects================
{
    const person = {name:'amir'}
    const person2 = {name:'amir'}
    const person3 = person
    console.log(person === person2) // false
    console.log(person === person3) // true
}
console.log(person) //undefined

//Arrays=================
const arr = []
const arr2 = []
arr = array.map
console.log(arr === arr2) //false

Spread and Rest

... is Spread

const fruits = ['apple','orange','banana']

console.log(...fruits) // 'apple orange banana'
console.log('apple','orange','banana') // 'apple orange banana'

const messages = {
    sour : "Oh, this is sour",
    sweet: "Waow, this is so sweet"
}
function someFunction(fruit1,fruit2,fruit3){
    console.log(fruit1,":",this.sweet)
    console.log(fruit2,":",this.sour)
    console.log(fruit3,":",this.sweet)
}
someFunction.call(messages,...fruits)

const newTaste = "New Taste"
const moreMessages = {
    ...messages,
    bitter: "Eewoooo, Yukh",
    tasteless: "Whatever",
    newtaste,
}

...Rest

function printMyName(...value) {
  return value;
}

printMyName("Oluwatobi", "Sofela") //["Oluwatobi", "Sofela"]


const [firstName, lastName, ...otherInfo] = [
  "amir", "hameed", "coder", "Web Developer", "Male"
];

console.log(otherInfo); //["coder", "Web Developer", "Male"]

Destructring

export function Input(props) {
  const { type = 'input', classes = '', value = '', placeholder = '', events, attributes } = props
  return type === 'input' ? (
    <input
      class={defaultClasses.input + ' ' + classes}
      value={value}
      placeholder={placeholder}
      {...attributes}
      {...events}
    />
  ) : (
    <textarea
      class={`${defaultClasses.input} ${classes}`}
      value={value}
      placeholder={placeholder}
      {...attributes}
      {...events}
    />
  )
}

const fruits = ['apple','orange','banana']

const [apple,orange] = fruits

const messages = {
    sour : "Oh, this is sour",
    sweet: "Waow, this is so sweet"
}
}
const {sweet,sour, newTaste='something new'} = messages;
console.log(newTaste)

VIM

Modes

Normal Mode
Insert Mode
Visual Mode
Replace Mode
Paste Mode

Navigation

Back in the days of UNIX when vi was create there were no arrow keys so other keys were used to move the cursor around. But now arrow keys can be used with vim.

`H` `J` `K` `L`

H -> Left since it is on left side

L -> Right Since is on right

J -> Down since it look like a downward pointing arrow

K -> Up, since only Up direction is left

Navigation over Line

0   ^                                                      $
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Screen Navigation

(gg)[Start of Document] dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

(H)[Header Screen] consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat

(M)[Middle of sreen] on proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

(L)[Lower Screen] consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

(G)[End of Document]

Other Navigations

Goto Line number

:n goto line-bumber :5 (go to line 5)

nG goto line-bumber 5G (go to line 5)

gd - goto local definition

gD - goto global definition

Short Find

fx - jump to next 'x', use Capital F to jump/search backward

tx - jump to one char before next 'x', use Capital T to jump/search backward

; - repeate above search forward

, - repeate above search backword

} - jump to next block/function

Other

% - goto matching block { ( or [ or <tag>

picwellwisher12pk/es6.md