Web Devlog

React Concept 1 - Virtual DOM and the myths around it solved

Fri, 19 Jul 2019 15:08:00 GMT

What is the Virtual DOM?

VDOM is a programming concept where an virtual representation of a UI is kept in memory and synced with the real DOM by a library such as ReactDOM.

This approach enables the declarative API of React detect the exact changes of every update: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state.

Is React “faster than DOM”?

There are some myth out there regarding React and virtual DOM and Dan Abramov’s answer for above question was ‘NO’.

He said people think there is something in virual DOM but the truth is it is unnecessarily updating or reading from DOM nodes in a bad order- normally reading should come first then writing. So it actually can be bad for performance.

What really happens is:

internalInstance.props = newElement.props

Nothing fancy, it’s just reassignment, keeping the props around. “Update” might be a too-much-term for this, he said. The more expensive part is calling React components recursively to learn which elements they render to, and diffing child lists.

Reconciliation & Commit

All of the above is reconciliation. Applying DOM changes, which called commit, is usually fast.

Reconciliation takes longer than commit. This is why React Team is making reconciliation pausable in Fiber(an ongoing reimplementation of React’s core algorithm whose one key feature is the ability to pause, abort, or reuse work as new updates come in).

To recap, Virtual DOM doesn’t necessarily make React any faster, because it’s doing unnecessary works, but by letting a real DOM only update the changes, it reduces commit phase.

React helps create maintainalbe applications, and is fast enough for most use cases.

- Dan Abramov

References

https://reactjs.org/docs/faq-internals.html https://github.com/acdlite/react-fiber-architecture https://twitter.com/dan_abramov/status/842329893044146176

SQL vs NoSQL- Which one you might want to use

Thu, 18 Jul 2019 16:07:56 GMT

What is SQL?

Structured Query Language with which you can retrieve/insert/update/delete the data you need from database.

Relational Database

A database which works with certain assumptions or in a certain way and it supports the sql. Such database works with tables. Have to be precise with a clear schema of which data can go into a table which has own fields(columns) and records(rows). It can’t hold more fields than the ones we defined for the table. All records have to follow this schema. You typically don’t only work with one table but instead with multiple tables which are related.

Non Relational Database

In Non Relational Database, there’s no schema applied therefore you can be more flexible regarding the data format. Generally there are no relations in no sql world. Putting all the information in one place. Have less relation merging going on, have super fast end efficient queries therefore. But the disadvantages is that you have some duplicates in data.

Then which one is a winner?

There’s no clear winner. It really depends on the kind of application you are building and the kind of data you are storing. With really big applications or businesses you typically use both.

SQL

Data uses Schema(predictable layout)
when there’re many updates in data, it’s useful
Vertical Scaling (improve server capacitiy / hardware) available

NoSQL

Schema-less(flexible)
Useful when there’re many readings
Horizantal Scaling (add more servers and merge data into one database) available

SQL will be a better choice for the business that has pre-defined structures such as accounting system, inventory monitoring system or when running on legacy systems.

NoSQL will be a strong choice for any businesses that have rapid growth, no clear definition for schema or when the schema continues to change in cases like real-time analytics or content management systems.

sorces

https://www.xplenty.com/blog/the-sql-vs-nosql-difference/?source=post_page--------------------------- https://www.youtube.com/watch?v=ZS_kXvOeQ5Y&t=1121s

What are Agile, DevOps and CICD

Thu, 18 Jul 2019 13:08:35 GMT

Agile

A process that provides customers with some part of the product or servie instead of making them wait until the product is fully featured which have many advantages:

Both the company and the customer can get continuous feedbacks along the developing process.
Companys can cope with fast changing market.

DevOps

Integrates developers and operations teams in order to improve collaboration and productivity by automating infrastructure, automating workflows and continuously measuring application performance.

Traditional Way: writing larage chunks of software over many weeks or months of testing.

DevOps Oriented : Write software in small chunks that are integrated, tested, monitored and deployed usually in hours.

CICD

CI (Continuous Integration)

All the codes written by different developers have to be integrated somewhere at some point before go into production server. You don’t want to wait until all the codes integrated and go throught unit test at once because this could result in a bunch of bugs at the same time which makes it hard debug. Continuous Integration would help solving the problem.

The idea of this is to integrate the modules as often as your commits. Let’s say you are doing five to six commits everyday. Every time the codes are working in your unit test, submit them on the central repository. It will receive the changes and will do the automated proccess of building, testing and providing reports for you.

Commit —> Integration —> Automation Test —> Reports

CD (Continuous Delivery and Continuous Deployment)

Continuous Delivery

Having the integrated code run on the mock server before it goes into production server to make sure the code is running properly and also you can measure the performance of the system in prior to the deployment.

Continuous Deployment

Having the integreated code getting tested and deployed onto production server automatically.

Examples of CICD

React JS

Has a robust and high visible CICE pipeline.
The builds and tests run automatically against submitted pull request.

Tools:

Jenkins
CircleCI
TravisCI

References

https://www.synopsys.com/blogs/software-security/agile-cicd-devops-difference/ https://medium.com/@nirespire/what-is-cicd-concepts-in-continuous-integration-and-deployment-4fe3f6625007 https://www.youtube.com/watch?v=_I94-tJlovg

Sever Side Rendering & Client Side Rendering

Wed, 17 Jul 2019 14:07:02 GMT

How Server Side Rendering works?

We load up .html pages on the server, then the server turns them into useful documents on the user’s browsers. SSR is the traditional rendering method and it worked just as fine until the webs became so complicated and interactive.

A bit faster at the initial reqeust
Renders the entire new page each time users visit a page though the page has only subtle differences, whcih leads to the slightly slower load for all subsequent pages.
Seach engines can crawl the site for better SEO

How’s Client Side Rendering works?

A more recent kind of rendering method where the contents are rendered in the browser via a JavaScript framework. CSR takes two round trips to the server. First request is to get the bare-bones HTML source code which has very little indexable HTML in it, then in the second request, the rest of the site will rendered from .js file using browser.

Slow initial load
Once the initial request is complete, it offers blazing fast experience since the users will only be loading a mall section of the page instead of loading the entire page.
Low SEO if not implemented correctly

SEO Implications of SSR and CSR

How Google Search Engine works

The first wave requests source code, crawls and indexes present HTML
It returns for the additional indexable content when the pages are fully rendered and this takes from a few hours to a few weeks.

The initial page with CSR will be like this:

<html>
<head>
  <script src="js-framwork.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

app.js will have all the HTML contents in JS as strings. Before the page is fully rendered, the search engine can’t locate any stuff from body.

For SSR, having HTML content in the source code, the search engine can request, crawl and index it during the first wave. Thus it is advantageous to appear in search results in short time.

With CSR, since the content is not rendered until the page is loaded on the browser, the web page will have to wait for the second wave when the indexable content is finally available.

But the thing is not every search engine employs the JS rendering capabilities like Google does. Resulting in web developers struggling with thier CSR not being ranked in search results.

Solution for this

SSR for the first page load
CSR for all subsequent page loads

Sources

https://medium.com/@benjburkholder/javascript-seo-server-side-rendering-vs-client-side-rendering-bc06b8ca2383 https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/

The difference between API and REST API

Tue, 16 Jul 2019 18:07:28 GMT

What is an API?

A way to let software components to talk to each other, and it could be in any form.

How do APIs relate to Web Services?

Web Servieces are just APIs, but in general, not the other way around.
REST API = REST web service

REST API/REST Web Service?

An API that follows the rules of REST specification.

How software components will talk?
What kind of messages they will send to each other?
How requests and responses will be handled?

What’s REST?

REpresentational State Transfer

How does HTTP relate to REST?

HTTP is an application layer protocol for sending and receiving messages over a network.
In HTTP, we can use GET method for all sorts of interations.
REST is a specification that dictates how distributed systems on the web should communicate.
REST is a certain way to implement and use the HTTP communication.

How does The WEB relate to REST?

REST is the underlying architecture of the WEB.
Some developers are breaking the rules.
It’s not the best architectual style but it’s still better than doing things arbitrarily.

The most popular REST rules

The method information should be expressed in the HTTP verb.

// Not RESTful
GET api/users/delete/:userId

// RESTful
DELETE api/users/:userId

Scoping information should go in the URI.
```
DELETE api/users/:userId <-- URI
```

How a RESTful API works?

It uses proper HTTP methods according to the situation (GET for getting data, POST for creating data)
Scoping info(and other data) goes in the parameters part of the URI.
It uses common data formats(most commonly JSON).
Communication is stateless.

Source

https://www.youtube.com/watch?v=FOZtRzY5x8E

JavaScript Concept 12 - Modules in JavaScript (CommonJS, Babel & Webpack)

Tue, 16 Jul 2019 16:07:38 GMT

Why Module is important?

Reusability
Composability
Leverage
Isolation (Easy to maintain)
Organization

CommonJS

CommonJs is one of the standards which NodeJS has been using. Before ES6, browsers didn’t support module system. Basically Syntaxs like CommonJS and AMD made it possible for browsers and server engines to use module system.

This is how the module system works in CommonJS.

// greeting.js

let hello = function() {
  console.log('hello')
}

exports.greeting = hello
// example.js

let greeting = require('./greeting.js')
greeting.hello() // 'hello'

Babel & Webpack

Though ES Modules now landed in the browsers, there are some old versions of browsers or servers that don’t understand the syntax of ES Modules. To make our codes compatible for those environments, transpiling process (put simply, translating es6 syntax to es5) is necessary.

The well-known ones are babel and bundling tool, webpack. A JavaScript bundler gathers the separated codes into one .js file and you can set it up for es5 conversion as well if there are codes written in es6.

Conclusion

Transpilers are still needed for a smooth unification of client-side code and on server-side(NodeJS) code.

Reference

https://flaviocopes.com/es-modules/

JavaScript Concept 11 - Callback, Promise and Async/Await

Mon, 15 Jul 2019 17:07:14 GMT

Callback

What is callback?

A function that is to be exceuted after another function
A function that is passed as an argument to other function

When is it needed?

JavaScript is a single-threaded language, which means that instead of waiting for an event to be finished, JavaScript will keep executing the rest of the events. But sometimes we want to make an event to wait before executing the next one. For example, it takes some amount of time before an API request getting back with the response.

Let’s simulate this by using setTimeout.

const APICall = (response, callback) =>
  setTimeout(() => {
    console.log(response)
    callback()
  }, 500)

const makeAPICalls = () => {
  APICall('First', () => {
    APICall('Second', () => {
      APICall('Third', () => {})
    })
  })
}

makeAPICalls()

I can print First, Second and Third in order with callback. But imagine that there are hundreds of nested callback functions within a function, which often called Callback Hell. It’s going to be super ugly and hard to read.

Promise

Basically, Promise was introduced in an effort to fix the nesting problem in callback hell.

Promise takes two funtions as parameters, resolve and reject. Make a Promise wrap the whole function and call resolve for the success case and reject if there is an error and return the Promise.

const APICall = response => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(response)
      resolve()
    }, 500)
  })
}

const makeAPICalls = () => {
  APICall('First')
    .then(() => APICall('Second'))
    .then(() => APICall('Third'))
}

makeAPICalls()

This is a Promise Chain where the code returns the result of the function and it gets to the next function in the chain. You can check out the resolved value by logging the argument passed to the functions after then and error with catch.

Async/Await

Makes asynchronous code more like synchronous/procedural looking
Can store the return of asynchronous function in a variable and use it later on.

const APICall = response => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(response)
      resolve(response)    }, 500)
  })
}

const makeAPICalls = async () => {
  let first = await APICall('First')  let second = await APICall('Second')  let third = await APICall('Third')
  console.log(first, second, third) // 'First Second Third'
}

makeAPICalls()

Sources

https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90

JavaScript Concept 10 - ES5 vs ES6

Mon, 15 Jul 2019 13:08:21 GMT

Arrow function

We can now keep our code clear and short with arrow function.

ES5

function sayHello(name) {
  return 'hello ' + name
}

ES6

const sayHello = name => `hello ${name}`

When passing a single parameter, you can ditch the parenthesis around the parameter. Plus, arrow function provides us with implicit return if there’s no block.

// returns 'Hi Dayoung'
// no block means implicit return

;(name => 'Hi ' + name)('Dayoung')

// returns defined
// explanation: explicit return in block exists

;(name => {
  'Hi ' + name
})('Dayoung')

this in arrow function

this refers to the parent scope in arrow function.

// this in arrow function
let obj = {
  multiplier: 2,  doubleTheNums() {    return [1, 2, 3].map(num => (num = num * this.multiplier))  },}

obj.doubleTheNums() // [2, 4, 6]

Object Manipulation

Spread/Rest Operator

We can now use spread operator to merge objects.

// spread operator
const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 5 }
const obj3 = { ...obj1, ...obj2 }

Object.assign

Another way to implement this, assign method.

// assign method
var obj1 = { a: 1, b: 2 }
var obj2 = { a: 2, c: 3, d: 5 }
var obj3 = Object.assign(obj1, obj2)

Destructuring Assignment

In ES5, we had to assign the values separately if you wanted to store one or more variables from an object. With ES6 we can do this in one beautiful line.

// es5
var obj1 = { a: 1, b: 2, c: 3, d: 4 }
var a = obj1.a
var b = obj1.b
var c = obj1.c
var d = obj1.d

// es6
const obj1 = { a: 1, b: 2, c: 3, d: 4 }
const { a, b, c, d } = obj1

Object Literals

When creating an object, you can make a use of already exisiting variable that is named the same as the key.

const a = 1
const b = 2
const c = 3
const d = 4
const obj1 = { a, b, c, d }

Exporting & Importing Modules

More intuitive exporting and imporing module syntax

ES5

// exporting
var myModule = {
  a: 1,
  b: function() {
    console.log('es5')
  },
}

module.exports = myModule

// importing
var myModule = require('./myModule')

ES6

// exporting
const myModule = {
  a: 1,
  b: () => {
    console.log('es6')
  },
}

export default myModule

// importing
import myModule from './myModule'

We have to import the whole module that’s been exported with export default. If you want to export and import child variables or modules separately, you can make it work like this.

// exporting
export const a = 1
export const b = () => {
  console.log('es6')
}

// importing
import { a, b } from './myModule'

Class

The new way to implement OOP in JavaScript besides constructor function and prototype, Class looks like this:

class Cat {
  constructor(name, treat) {
    this.name = name
    this.treat = treat
  }

  sayMeow() {
    return 'Meow Meow'
  }
}

let myCat = new Cat()
myCat.sayMeow() // 'Meow Meow'

You can also extends classes by using the extends keyword, which enables you to inherit attributes and methods of parent Class.

class Horse {
  constructor(name) {
    this.name = name
  }

  run() {
    return 'Running to the destination'
  }
}

class FlyingHorse extends Horse {
  constructor(name) {
    // super keyword calls functions on a parent object
    super(name)
  }

  fly() {
    return 'Flying to the destination'
  }
}

Sources

http://developmentr.com/javascript/2015/12/31/javascript-es6.html#classes https://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc

JavaScript Concept 9 - Functional Programming & Object Oriented Programming

Sun, 14 Jul 2019 16:08:35 GMT

OOP (Object Oriented Programming)

Combines a group of related variables and functions into an object.

A programming paradigm based on the concept of objects, which can contain data, known as attributes, and code, often known as methods. With the methods of the same instance(objects have a notion of this, which refers to the object itself), we can easily modify the data fields of the object: altering the state of the object.

Objects are instances of class. It works like a template which means we can esaily make a new instance of a certain attributes and methods.

class Dog {
  constructor(name, owner) {
    this.name = name
    this.owner = owner
  }
  bark() {
    return 'walf walf'
  }

  change_owner(owner) {
    this.owner = owner
  }

  let dog1 = new Dog('Bori', 'Rossena')
  dog1.owner // 'Rossena'
  dog1.change_owner('Dayoung');
  dog1.owner // Now Bori's owner is 'Dayoung'
}

Let’s say all dogs have a name and its owner. We can make a new instance of the dog class using new constructor with name and owner parameter. By using the change_owner method, we can also change the state of Bori.

Benefits of OOP

1. Encapsulation
Reduce complexity + increase reusability
Using OOP, functions end up having fewer parameters, making them easier to use and maintain.

2. Abstraction
Reduce complexity + isolate impact of changes
All the complexity is hidden inside. Hiding some of the properties and methods form the outside. It provides simpler interface and reduces the impact of change because we don’t have any that touches these methods outside of the containing objects.

3. Inheritance
Eliminate redundant code
For example, when creating HTML elements intead of defining all the properties and methods, we can define them once in a generic object and utilize it.

4. Polymorphism (Many form)
Refactor ugly conditional statements
The way of each HTML element is rendered is different from the others. With OOP, we can implement render method in each of these objects and the render method will behave differently depending on the type of the object we are referencing.

Functional Programming

A paradigm that focuses on the computation of pure functions.

Complete separation between data and functions
All objects created in functional programming are immutable
Do not share scope with other objects

Pure functions

Always return the same value with the same input value
There are no side effects that might affect in the change of return value
Do not alter the passed data

function double(num) {
  return num * 2
}

// The outcome of double only depends on the input num

Benfits of Functional Programming

1. Predictable

gives certain guarantees on what would out come be

2. Safe

Immutable state
Needed change in the state, I can just create a new one
Protect from typos and other error that could happen from mutable state

3. Modular

like a building blocks with small units
Empowers us to deduplicate the code

FP vs OOP

Fucntional Programming

// Create employees array
let employees = [
  { name: 'Dayoung', salary: 20000 },
  { name: 'Sehyun', salary: 30000 },
  { name: 'Yohan', salary: 25000 },
]

// pure function
// which returns a copy of a single employee with the salary field updated
let change_salary = function(employee) {
  return { name: employee.name, salary: employee.salary + 10000 }
}

// Created a new datatset using the change_salary function
// map returns a new altered dataset
// while each alters the state of the object
let happier_employees = employees.map(employee => change_salary(employee))

happier_employees
// [{name: 'Dayoung', salary: 30000},
// {name: 'Sehyun', salary: 40000},
// {name: 'Yohan', salary: 35000}]

OOP

// Create Employee class
class Employee {
  constructor(name, salary) {
    this.name = name
    this.salary = salary
  }

  change_salary() {
    this.salary = this.salary + 10000
  }
}

// Create a instance of employee
let employee1 = new Employee('Dayoung', 20000)
employee1.salary // 20000

// Use the each method to change salaray attribute of each employee
employee1.change_salary()

employee1.salary // 30000

Sources
https://medium.com/@sho.miyata.1/the-object-oriented-programming-vs-functional-programming-debate-in-a-beginner-friendly-nutshell-24fb6f8625cc https://www.youtube.com/watch?v=pTB0EiLXUC8 https://www.youtube.com/watch?v=FYXpOjwYzcs

JavaScript Concept 8 - Event Loop

Mon, 08 Jul 2019 19:08:20 GMT

JavaScript is a single threaded programming language

single thread
single call stack
Its runtime can only process one piece of code at a time

Any code that is slow blocks the stack.

For example console.log isn’t slow, but doing a while loop from one to ten billion is slow, doing image processing is slow, and network request is slow.

what happens when things are slow?

The browser gets stucked. While the request is handled, the browser can’t render thereby users can’t do anything until those requests complete.

The solution? Asynchronous callbacks

console.log('hello')

// this part goes to WebAPIs
setTimeout(function() {  console.log('there')}, 3000)
console.log('how are you?')

// hello
// how are you?
// there

But how is this possible if JavaScript runtime is single threaded? Because browser is more than just the Runtime. It provides us with WebAPIs, which we can make calls to. So it’s working as multi threads in the back. This diagram is basically identical for node, except the fact that it’s using C++ APIs instead of WebAPIs.

Event loop’s job

Event loop looks at the stack and the task queue. If the stack is empty, it takes the first thing on the queue and pushes it on to the stack.

The order of proccessing asynchronous callback

Pass the callback to webAPIs and pop off the callback from stack
WebAPIs pushes the callback on to the task queue when it’s done
Event loop checks if the call stack is empty
If the call stack is cleared, event loop pushes the callback from the task queue to the call stack

setTimeout is a minimum time to execution

setTimeout is not guaranteed time to execution, it’s a minimum time to execution.

console.log('hello1')

// setTimeout zero doesn't run immediately
setTimeout(function() {
  console.log('hello2')
}, 0)

console.log('hello3')

// hello1
// hello3
// hello2

Conclusion : Don’t put slow code on the stack because when you do that, the browser can’t do what it needs to do, creating a nice fluid UI.

Reference

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=821s

JavaScript Concept 7 - == and ===

Sun, 07 Jul 2019 19:07:05 GMT

What’s the difference between == and === ?

==
Checks for equality

===
Checks for equality and type

== in JavaScript sees both null and undefined as having no value eventhough they have different types

// checkout this badness
let foo // undefined
let temp = null // null

// compare the two
console.log(foo == temp) // true(boolean), what??

JavaScript Concept 6 - Null Undefined Undeclared

Sat, 06 Jul 2019 19:08:05 GMT

What’s the difference between a varible that is: null, undefined or undeclared?

Undeclared

const foo = foo1 + 1

// foo1 is undeclared

Undefined

It’s declared but it hasn’t been assigned with any values.

let foo
let obj = {}
let arr = [1, 2, 3]
const temp = function() {
  // don't return anything
}

console.log(foo, obj.name, arr[5], temp()) // undefined

Null

Null has a value. Its value is null which is a nothing value. Can be used in a situation where you need to zero out of value.

const valueIsNull = null

console.log(valueIsNull) // null

Check for undefined

let foo

// bad idea
console.log(typeof foo) // undefined as a string
console.log(typeof temp) // undeclared, but also returns 'undefined'

// preferred way
console.log(foo === undefined) // boolean true

Check for null

const foo = null

// terrible idea
console.log(typeof foo) // object

// preferred way
console.log(foo === null) // boolean true

JavaScript Concept 5 - Statement(Definition) and Expression

Fri, 05 Jul 2019 19:08:28 GMT

The difference on the usage of ‘Definition’ and ‘Expression’

definition() //'I am definition'
expression() // Uncaught TypeError: expression is not a function

function definition() {
  return 'I am definition'
}

var expression = function() {
  return 'I am expression'
}

Expressions result in a value even if just “undefined” Definition creates sort of like a reference but it’s not an actual value so you can’t run it

function definition() {
  return 'I am definition'
}

let expression

definition()
expression()

expression = function() {
  return 'I am expression'
}

Explain why the following doesn’t work as IIFE

function foo() {
    // i pity this code
}();

In fact, this is how JS reading IIFE (hoisting applied)

function foo() {

}

(); // as if you wrote it on separate lines

You can make it work simply by putting parentheses around it. In this way, you can make the function at an expression.

;(function foo() {})()

Why would I ever use one? => To control variable scope

;(function foo() {})()

console.log(foo) // referenceError: foo is not defined

The variables inside of the foo function will only be availble inside the function not outside of the function, which can let us use dumb(?) and plain naming conventions in our application.

JavaScript Concept 4 - Scope and Closure

Thu, 04 Jul 2019 19:07:25 GMT

1. What is Scope?

A scope in JavaScript defines what variables are accessible. There are two kinds of scope - global scope and local scope

Global scope (Not advised)

When a varible is declared outside all functions or curly brackets. There’s a chance of naming collisions if two or more variables are declared with the same name using let or const.

// Declaring variables with the same name using let(const) in global scope

let greeting = 'hi'
let greeting = 'hello' // Error : Already been declared

Though it’s possible to do so when you declare variables with var, it is still not advised because this will make the code hard to debug.

// Don't do this
// It will mess up the code, hard to debug

var greeting = 'hi'
var greeting = 'hello' // doesn't throw error

console.log(greeting) // 'hello'

Local Scope

When variables are accessible only in a specific part of the code There are two kinds of local scope: function scope and block scope.

2. What does it mean that JavaScript uses lexical scoping?

Inner variable is not accessible from outside but anything that is defined outside is automatically available inside the function. This behavior is called lexical scoping.

3. Explain some examples of closure

// The simplest example

let passed = 3

let addTo = function() {
  let inner = 2
  console.log(inner)
  return passed + inner // using a variable outside function}

console.log(addTo()) // 5

Any functions where you are using variables outside function are closures.

In order to execute addTo function it will look through the varibles it needs. Since passed is not defined inside the function, it will look at the scope outside function. It would keep going up until it founds the variable.

Let’s look at the another example.

let addTo = function(passed) {
  let add = function(inner) {
    return passed + inner
  }

  return add
}

let addToThree = addTo(3) // preserves value insideconsole.log(addToThree(4)) // 7

addTo(3) function preserves 3 value inside the function as closure. This means I can create unlimited number of functions using closure. It keeps the varible it needs to execute.

Conclusion : Closure is a function with preserved data

References

https://www.youtube.com/watch?v=71AtaJpJHw0 https://css-tricks.com/javascript-scope-closures/ https://2ality.com/2015/02/es6-scoping.html

JavaScript Concept 3 - var let const

Wed, 03 Jul 2019 19:07:21 GMT

What’s the difference between var, let, and const?

let & const

Not hoisted
Scoped within the block they are in (within the curly bracket {})
Gives you more control

// var variables are function-scoped
function foo() {
  if (true) {    var temp = 'fooooo'  }  console.log(temp) // 'fooooo'}

// let, const variables are block-scoped
function foo() {
  if (true) {
    let temp = 'fooooo'  }
  console.log(temp) // Uncaught ReferenceError: temp is not defined
}

const creates immutable varibles whereas variables created by let are mutable.

let withLet = 'assigned'
withLet = 're-assigned'
console.log(withLet) // 're-assigned'

const withConst = 'assigned'
withConst = 're-assigned' // TypeError

NOTE ::: If a constant refers to an object or array, the object or array itself can still be changed

JavaScript Concept 2 - Hoisting

Tue, 02 Jul 2019 19:07:32 GMT

Explain ‘Hoisting’

All variables using var are declared at the top of any given function scope whether you like it or not(includes function declartions)

function hoist(country) {
  if (country === 'Korea') {
    var greeting = '안녕'
  } else {
    var greeting = 'hello'
  }
  return greeting
}

var declaration hoisted to top. Linters don’t like this but browsers don’t mind. This works perfectly fine in the browsers.

function hoist(country) {
  var greeting
  if (country === 'Korea') {
    greeting = '안녕'
  } else {
    var greeting = 'hello'
  }
  return greeting
}

So technically, this one works too.

function hoist(country) {
  if (country === 'Korea') {
    greeting = '안녕'
  } else {
    greeting = 'hello'
  }
  var greeting

  return greeting
}

This is pretty absurd and this is reason why people say that they hate JavaScript. This has kind of been addressed with the introduction of const and let in es6.

JavaScript Concept 1 - Event Delegation

Mon, 01 Jul 2019 19:07:15 GMT

Event Delegation in JavaScript

JS event listeners fire not only on a single DOM element but on all its decendants. For example, if you add event listeners to ul, you’re actually adding event listeners to all of children elements inside ul as well. This happens through a process called event bubbling

event.target : The actual element that triggered event
event.currentTarget : The element with the listener attached

function handleChange(event) {
  // when name changes
  console.log(event.currentTarget) //form tag
  console.log(event.target) //name input tag
}

let el = document.getElementById('form')
el.addEventListener('change', handleChange)

<form id="form">
  <div class="input-group">
    <label class="control-label" for="Name">Name</label>
    <input type="text" id="Name" name="Name" placeholder="John Doe" />
  </div>
  <div class="input-group">
    <label class="control-label" for="Email">Email</label>
    <input type="text" id="Email" name="Email" placeholder="example@gmail.com" />
  </div>
</form>

Reference https://www.youtube.com/watch?v=MY0UBGX2FtA&t=1025s

about

Sun, 27 Jan 2019 16:21:13 GMT

Your name

Thank you for reading my resume. If you want to contact me, Please send me an email.