What to prepare when applying for a JavaScript position?

What to prepare:

1. Core JavaScript concepts: 10 things to learn during a weekend
2. Building NPM packages, publishing, and importing
3. Building an application with an express server
4. Two ways of creating a react app: from scratch and from create-react-app
5. Build react app with a fake server for API testing
6. Git repos and commands
7. Responsive web design, (can this make the process simpler: react-responsive-navbar)
8. CSS approaches: SCSS files, bootstrap, css modules, media-queries
9. ReactJs routing, hooks, using context & HIC, child as a function
10. Some examples of Jest unit testing
11. Some examples of Ajax call testing
12. Feature testing: Selenium, Cypress
13. Responsive web design
14. A11y
15. ESLinting
16. Build and deploy process
17. CodeSandBox and CodePen
18. Workshop

Core JavaScript concepts:

Function objects:

• Functions are function objects. In JavaScript, anything that is not a primitive type ( undefined, null, boolean, number, or string) is an object. Objects in JavaScript are extremely versatile. Because of this, we can even pass a function as a parameter into another function.

Callback functions:

• A callback is a function that is to be executed after another function has finished executing — hence the name 'call back'.

• Example: setTimeout(function() {console.log('I am the response from callback function')}, 300)

Promises: 
Use Promise API to use asynchronous code. Create promise object using Promise API, access the asynchronous code response using promise.then.

Example: 

let promise = new Promise(a callback function); 

// By the way, this callback takes two parameters resolve and reject that are functions too, so…

let resolve = function(){}

let reject = function(){}

let promise = new Promise(function(resolve, reject) {

// do your async code here…

// If successful, call resolve function

// If failure, call reject function

});

promise.then to handle the data returned by either resolve or reject

Nobody can explain promises better than this guy: https://www.sitepoint.com/overview-javascript-promises/

Closures:

A Closure is nothing but a function that has access to the variables defined in outer (and enclosing) function. 

As far as scope is concerned, the closure has access to global variables, its own variables, and variables of outer (and enclosing) function.

Example:

const myFunctionTwo = () => {  

   const message = 'My New Message';  

   const printMessage = () => {  

     console.log(message);  

   }  

   return printMessage;  

 }  

 const myPrintMessage = myFunctionTwo();  

 myPrintMessage();

// prints My New Message

Currying:

The curried effect is achieved by binding some of the arguments to the first function invoke, so that those values are fixed for the next invocation. It’s something like keeping masala ready and cook either chicken, goat, beef with ease.

Example:

var all_you_have_to_do_is_specify_masala = function(masala) {

return cook_with_masala = function(b){

console.log('i cooked ' + b + ' with ' + masala)

}

}

let use_ramesh_recipe = all_you_have_to_do_is_specify_masala ('masala made with garlic, ginger, spices')

use_ramesh_recipe('chicken')

use_ramesh_recipe('goat')

JavaScript making HTTP requests

The XMLHttpRequest object can be used to request data from a web server.

Example:

const puzzleAPIhit = () => {  

   const request = new XMLHttpRequest()  

   request.addEventListener('readystatechange', (e) => {  

     if (e.target.readyState === 4 && e.target.status === 200) {  

       const data = JSON.parse(e.target.responseText);  

       console.log(data.puzzle)  

     } else if (e.target.readyState === 4) {  

       console.log('An error has taken place')  

     }  

   })  

   request.open('GET', 'https://puzzle.mead.io/puzzle?wordCount=3')  

   request.send()  

 }  

 puzzleAPIhit(); 

Fetch API:

The Fetch API introduced in relatively newer versions of JavaScript and has built-in support for Promises. Technically, it is just another method of hitting HTTP Requests while harnessing the powers and perks of Promises and Promise Chaining.

fetch('http://puzzle.mead.io/puzzle', {}).then((response) => {  

   if (response.ok) {  

     return response.json();  

     /*  

       Actually, the .json() method takes the response and returns a Promise Object and hence  

       We need to add another then() as we have done in Promise Chaining   

     */  

   } else {  

     throw new Error('Unable to fetch the puzzle');  

   }  

 }).then((data) => {  

   console.log(data.puzzle);  

 }).catch((error) => {  

   console.log(error);  

 }); 

Object Oriented Programming (OOP) in JavaScript:

OOP describes a way to write programs. This way focuses on data: stored as object properties, and actions: stored as object methods.

• Constructor functions versus ES6 classes, encapsulation, inheritance, prototypal vs static methods in JavaScript: https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a

• Prototypal methods Vs Static methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

• References: https://fullstackgeek.blogspot.com/2019/02/asynchronous-javascript-explained-for-beginners.html#HittingHTTPRequests

• Building NPM packages, publishing and importing (https://npmjs.com)

• Reference: https://medium.com/the-andela-way/build-and-publish-your-first-npm-package-a4daf0e2431

Building an application with an express server: 

• Create the app from express, tell your app how to handle get, post, put requests, and run the app at a port
• Reference: https://alligator.io/nodejs/express-basics/

Creating a React app from scratch:

• You need Webpack, React, Babel to create a react app from scratch.
• Example: https://www.valentinog.com/blog/babel/ 

• Create a React using create-react-app:
• Example: https://github.com/facebook/create-react-app

Creating a web site using MEAN stack:

• https://medium.com/javascript-in-plain-english/full-stack-mongodb-react-node-js-express-js-in-one-simple-app-6cc8ed6de274

Build react app with a fake server for API testing